<template>
  <base-dialog
    title="设置工作量"
    v-bind="attrs"
    :width="useVW(500)"
    :footer="false"
    destroy-on-close
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <base-form
      ref="formRef"
      :rules="rules"
      :items="items"
      :model="model"
      :label-width="useVW(110)"
      :disabled="loading || setting"
    >
      <template #form-item-markerName>
        {{ data?.markerName }}
      </template>
      <el-form-item>
        <span class="tip">*为0时表示不限制任务量</span>
      </el-form-item>
      <el-form-item>
        <confirm-button @confirm="onConfirm" @cancel="onCancel"></confirm-button>
      </el-form-item>
    </base-form>
  </base-dialog>
</template>

<script setup lang="ts" name="SetWorkload">
import { reactive, useAttrs, watch } from 'vue'
import { ElFormItem, ElMessage } from 'element-plus'
import BaseDialog from '@/components/element/BaseDialog.vue'
import BaseForm from '@/components/element/BaseForm.vue'
import useForm from '@/hooks/useForm'
import useVW from '@/hooks/useVW'
import useFetch from '@/hooks/useFetch'
import ConfirmButton from '@/components/common/ConfirmButton.vue'

import type { EpFormItem, EpFormRules } from 'global-type'
import type { ExtractApiParams, ExtractApiResponse } from '@/api/api'

const attrs = useAttrs()

const props = defineProps<{ data?: ExtractArrayValue<ExtractApiResponse<'getStatisticsByGroup'>> }>()

const emit = defineEmits(['update:modelValue'])

const { fetch: getUserInfo, result: userInfo, loading } = useFetch('getUserInfo')

watch([() => attrs.modelValue, () => props.data?.markerId], () => {
  if (attrs.modelValue && props.data?.markerId) {
    getUserInfo({ id: props.data.markerId })
  }
})

const { fetch: markerSetCount, loading: setting } = useFetch('markerSetCount')

const { formRef, elFormRef } = useForm()

const model = reactive<ExtractApiParams<'markerSetCount'>>({
  markDayCount: 0,
  markTotalCount: 0,
  userId: [],
})

watch(userInfo, () => {
  model.markDayCount = userInfo?.value?.markDayCount || 0
  model.markTotalCount = userInfo?.value?.markTotalCount || 0
})

const rules: EpFormRules = {
  markTotalCount: [{ required: true, message: '请填写评卷员工作量' }],
  markDayCount: [{ required: true, message: '请填写评卷员每日工作量' }],
}

const items: EpFormItem[] = [
  {
    slotName: 'markerName',
    label: '评卷员',
  },
  {
    label: '工作量',
    slotType: 'inputNumber',
    prop: 'markTotalCount',
  },
  {
    label: '每日工作量',
    slotType: 'inputNumber',
    prop: 'markDayCount',
  },
]

const onConfirm = async () => {
  try {
    if (!props.data?.markerId) {
      return
    }
    const valid = await elFormRef?.value?.validate()
    if (valid) {
      await markerSetCount({ ...model, userId: [props.data.markerId] })
    }
    ElMessage.success('设置成功')
    emit('update:modelValue', false)
  } catch (error) {
    console.error(error)
  }
}

const onCancel = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.tip {
  color: var(--el-color-tip);
  font-weight: 600;
}
</style>
