<template>
  <my-dialog
    :visible="visible"
    :header="dialogTitle"
    :width="dialogWidth"
    attach="body"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <slot></slot>
    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
      <t-row :gutter="[0, 20]">
        <t-col :span="12">
          <t-form-item label="服务单元" name="serviceUnitId">
            <select-service-unit
              v-model="formData.serviceUnitId"
              :filterParams="{
                statusList: ['PUBLISH'],
                type: customType,
              }"
            >
            </select-service-unit>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="大区经理" name="leadType">
            <t-radio-group
              :disabled="!canEdit"
              allowUncheck
              v-model="formData.leadType"
              name="leadType"
              :options="[
                { value: 'BY_AREA', label: '按地域系统自动指定大区经理' },
                { value: 'BY_PERSON', label: '直接指定大区经理' },
              ]"
            ></t-radio-group>
          </t-form-item>
        </t-col>
        <t-col :span="12" v-if="formData.leadType == 'BY_PERSON'">
          <t-form-item label="大区经理" name="leadId">
            <select-type-user
              :disabled="!canEdit"
              v-model="formData.leadId"
              type="REGION_MANAGER"
            ></select-type-user>
          </t-form-item>
        </t-col>
      </t-row>
    </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="MultDelineationDialog">
import { ref, reactive, watch } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { serviceScopeBindNewApi, getCrmBindInfoApi } from '@/api/service-unit';
import { omit } from 'lodash-es';
import useClearDialog from '@/hooks/useClearDialog';

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

const props = defineProps({
  visible: Boolean,
  customType: String,
  dialogWidth: { type: Number, default: 640 },
  dialogTitle: { type: String, default: '划定服务单元' },
  curRow: {
    type: Object,
    default: () => ({}),
  },
});

const { formData, isEdit } = useClearDialog(
  {
    serviceUnitId: null,
    crmId: null,
    leadType: '',
    leadId: '',
  },
  props,
  formRef,
  () => {
    formData.serviceUnitId = null;
    formData.crmId = props.curRow.id;
    if (props.curRow?.serviceId) {
      formData.serviceUnitId = props.curRow.serviceId;
    }
  }
);
const rules = {
  serviceUnitId: [
    {
      required: true,
      message: '未选择服务单元',
      type: 'error',
      trigger: 'change',
    },
  ],
  leadId: [
    {
      required: true,
      message: '未指定大区经理',
      type: 'error',
      trigger: 'change',
    },
  ],
  leadType: [
    {
      required: true,
      message: '请选择大区经理',
      type: 'error',
      trigger: 'change',
    },
  ],
};
const canEdit = ref(true);
const serviceIdChange = (val) => {
  getCrmBindInfoApi({
    customId: props.curRow?.customId,
    serviceUnitId: val,
  }).then((res) => {
    formData.leadType = res.leadType || '';
    // if (res.leadType) {
    canEdit.value = res.canEdit;
    // }
    if (res.leadType === 'BY_PERSON') {
      formData.leadId = res.leadId || '';
    }
  });
};

watch(
  () => formData.serviceUnitId,
  (val) => {
    if (val) {
      serviceIdChange(val);
    }
  }
);
const save = async () => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  const res = await serviceScopeBindNewApi(
    formData.leadType === 'BY_PERSON' ? formData : omit(formData, 'leadId')
  ).catch(() => {});
  if (!res) return;
  MessagePlugin.success('操作成功');
  emit('update:visible', false);
  emit('success');
};
</script>
