<template>
  <my-dialog
    :visible="visible"
    :header="`${isEdit ? '修改' : '新增'}服务单元`"
    :width="460"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" labelWidth="120px">
      <t-form-item label="服务单元名称" name="name">
        <t-input v-model="formData.name"></t-input>
      </t-form-item>
      <t-form-item label="业务类型" name="type">
        <t-select v-model="formData.type">
          <t-option
            v-for="(val, key) in CUSTOMER_TYPE"
            :key="key"
            :label="val"
            :value="key"
          />
        </t-select>
      </t-form-item>
      <t-form-item label="服务开始时间" name="startTime">
        <t-date-picker
          v-model="formData.startTime"
          :disable-date="{ after: formData.endTime || undefined }"
          value-type="time-stamp"
          enable-time-picker
          format="YYYY/MM/DD HH:mm"
          :time-picker-props="{ format: 'HH:mm' }"
        />
      </t-form-item>
      <t-form-item label="服务截止时间" name="endTime">
        <t-date-picker
          v-model="formData.endTime"
          :disable-date="{ before: formData.startTime || undefined }"
          value-type="time-stamp"
          enable-time-picker
          format="YYYY/MM/DD HH:mm"
          :time-picker-props="{ format: 'HH:mm' }"
        />
      </t-form-item>
      <t-form-item label="区域配比" name="regionPeopleCount" required-mark>
        <t-input-number
          v-model="formData.regionPeopleCount"
          theme="column"
          :decimalPlaces="0"
          :max="1000"
          :min="0"
          style="width: 70px"
          placeholder="00"
        ></t-input-number>
        <span style="padding: 0 10px">:</span>
        <t-input-number
          v-model="formData.regionProjectCount"
          theme="column"
          :decimalPlaces="0"
          :max="1000"
          :min="0"
          style="width: 70px"
          placeholder="00"
        ></t-input-number>
      </t-form-item>
      <t-form-item label="负责人" name="serviceLeadId">
        <select-type-user
          v-model="formData.serviceLeadId"
          type="BUSSINESS"
        ></select-type-user>
      </t-form-item>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">保存</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="AddUnitDialog">
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { serviceUnitEditApi } from '@/api/service-unit';
import { CUSTOMER_TYPE } from '@/config/constants';

const emit = defineEmits(['update:visible', 'success']);
const formRef = ref(null);

const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const { formData, isEdit } = useClearDialog(
  {
    id: null,
    name: '',
    type: '',
    startTime: '',
    endTime: '',
    regionPeopleCount: '',
    regionProjectCount: '',
    serviceLeadId: '',
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
  }
);

const rules = {
  name: [
    {
      required: true,
      message: '名称必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 50,
      message: '至多需要50个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  type: [
    {
      required: true,
      message: '类型必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  startTime: [
    {
      required: true,
      message: '服务开始时间必填',
      type: 'error',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      required: true,
      message: '服务截止时间必填',
      type: 'error',
      trigger: 'change',
    },
  ],
  regionPeopleCount: [
    {
      validator: () => {
        if (!formData.regionPeopleCount || !formData.regionProjectCount)
          return { result: false, message: '请完成区域配比设置' };

        return { result: true, type: 'success' };
      },
      type: 'error',
      trigger: 'blur',
    },
  ],
  serviceLeadId: [
    {
      required: true,
      message: '负责人必选',
      type: 'error',
      trigger: 'change',
    },
  ],
};
const save = async () => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  if (formData.startTime >= formData.endTime) {
    MessagePlugin.success('服务开始时间不得迟于服务截止时间');
    return;
  }

  const res = await serviceUnitEditApi(formData).catch(() => {});
  if (!res) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>
