<template>
  <my-dialog
    :visible="visible"
    :header="`${isEdit ? '编辑' : '新增'}sop`"
    :width="800"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
    @confirm="createHandler"
  >
    <SearchForm
      :fields="fields"
      :params="formData"
      noBorder
      :rules="rules"
      ref="searchForm"
    ></SearchForm>
  </my-dialog>
</template>
<script name="CreateSopItem" setup>
import { ref, computed, onMounted, reactive } from 'vue';
import { SERVICE_RANGE } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import useClearDialog from '@/hooks/useClearDialog';
const searchForm = ref();
const props = defineProps({
  visible: Boolean,
  curRow: { type: Object, default: null },
  isCloud: { type: Boolean, default: false },
});
const emit = defineEmits(['update:visible', 'confirm']);

const rules = {
  courseName: [{ required: true, message: '请填写科目名称' }],
  examStudentCount: [{ required: true, message: '请填写考生人数' }],
  serviceScope: [{ required: true, message: '请选择服务范围' }],
  scanStartTime: [{ required: true, message: '请选择扫描开始时间' }],
  scanEndTime: [{ required: true, message: '请选择扫描结束时间' }],
  markPaperStartTime: [{ required: true, message: '请选择评卷开始时间' }],
  markPaperEndTime: [{ required: true, message: '请选择评卷结束时间' }],
  mobileNumber: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }],
};

const { formData, isEdit } = useClearDialog(
  {
    courseName: '',
    scanStartTime: '',
    examStudentCount: '',
    scanEndTime: '',
    contacts: '',
    markPaperStartTime: '',
    mobileNumber: '',
    markPaperEndTime: '',
    serviceScope: '',
  },
  props,
  null,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
  }
);

const fields = computed(() => {
  return [
    {
      prop: 'courseName',
      label: '科目名称',
      labelWidth: 120,
      colSpan: 12,
      attrs: {
        clearable: true,
        disabled: !!props.isCloud,
      },
    },
    props.isCloud
      ? null
      : {
          prop: 'scanStartTime',
          label: '扫描开始时间',
          type: 'date',
          labelWidth: 120,
          colSpan: 12,
          attrs: {
            clearable: true,
            valueType: 'time-stamp',
          },
        },
    {
      prop: 'examStudentCount',
      label: '考生人数',
      labelWidth: 120,
      colSpan: 12,
      attrs: {
        clearable: true,
      },
    },
    props.isCloud
      ? null
      : {
          prop: 'scanEndTime',
          label: '扫描结束时间',
          type: 'date',
          labelWidth: 120,
          colSpan: 12,
          attrs: {
            clearable: true,
            valueType: 'time-stamp',
          },
        },
    {
      prop: 'contacts',
      label: '联系人',
      labelWidth: 120,
      colSpan: 12,
      attrs: {
        clearable: true,
        maxlength: 15,
      },
    },
    props.isCloud
      ? null
      : {
          prop: 'markPaperStartTime',
          label: '评卷开始时间',
          type: 'date',
          labelWidth: 120,
          colSpan: 12,
          attrs: {
            clearable: true,
            valueType: 'time-stamp',
          },
        },
    {
      prop: 'mobileNumber',
      label: '电话',
      labelWidth: 120,
      colSpan: 12,
      attrs: {
        clearable: true,
      },
    },
    props.isCloud
      ? null
      : {
          prop: 'markPaperEndTime',
          label: '评卷结束时间',
          type: 'date',
          labelWidth: 120,
          colSpan: 12,
          attrs: {
            clearable: true,
            valueType: 'time-stamp',
          },
        },
    props.isCloud
      ? null
      : {
          prop: 'serviceScope',
          label: '服务范围',
          type: 'select',
          labelWidth: 120,
          colSpan: 12,
          options: dictToOptionList(SERVICE_RANGE),
          attrs: {
            clearable: true,
          },
        },
  ];
});
const createHandler = async () => {
  const formRef = searchForm.value.formRef;
  const valid = await formRef?.validate();
  if (valid !== true) return;
  emit('update:visible', false);
  emit(
    'confirm',
    props.isCloud
      ? {
          courseName: formData.courseName,
          examStudentCount: formData.examStudentCount,
          contacts: formData.contacts,
          mobileNumber: formData.mobileNumber,
          status: 'UN_PUBLISH',
        }
      : { ...formData, status: 'UN_PUBLISH' }
  );
};
</script>
<style lang="less" scoped></style>
