<template>
  <my-dialog
    :visible="visible"
    :header="title"
    :width="600"
    attach="body"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
    @opened="dialogOpened"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" labelAlign="top">
      <t-row :gutter="[20, 20]">
        <t-col :span="6">
          <t-form-item label="客户ID" name="code">
            <t-input v-model="formData.code" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="客户名称" name="name">
            <t-input v-model="formData.name" clearable />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <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-col>
        <!-- <t-col :span="6">
          <t-form-item label="客户经理" name="managerId">
            <select-type-user
              v-model="formData.managerId"
              type="ACCOUNT_MANAGER"
            >
            </select-type-user>
          </t-form-item>
        </t-col> -->
        <t-col :span="6">
          <t-form-item label="服务档位">
            <select-service-level
              v-model="formData.levelId"
              :type="formData.type"
              type-required
            >
            </select-service-level>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="标准人天">
            <t-input-number
              v-model="formData.peoperDay"
              :decimalPlaces="0"
              :min="1"
              theme="column"
              style="width: 100%"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="区域" name="province" required-mark>
            <select-area
              v-model="pca"
              value-type="full"
              placeholder="请选择省市区"
              @change="areaChange"
            ></select-area>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="详细地址" name="address" required-mark>
            <t-input
              v-model="formData.address"
              clearable
              placeholder="请输入详细地址"
            />
          </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="EditCustomerDialog">
import { ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { CUSTOMER_TYPE } from '@/config/constants';
import { customerEditApi } from '@/api/system';

const emit = defineEmits(['update:visible', 'success']);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const formRef = ref(null);
let pca = ref([]);

const title = computed(() => {
  return (isEdit.value ? '编辑' : '新增') + '客户';
});

const { formData, isEdit } = useClearDialog(
  {
    id: null,
    code: '',
    name: '',
    type: '',
    province: '',
    city: '',
    area: '',
    address: '',
    // managerId: null,
    levelId: null,
    peoperDay: 1,
    sync: true,
    enable: true,
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
    setTimeout(() => {
      formData.levelId = props.curRow.levelId;
    }, 50);
  }
);

const rules = {
  code: [
    { required: true, message: 'ID必填', type: 'error', trigger: 'change' },
  ],
  name: [
    { required: true, message: '姓名必填', type: 'error', trigger: 'change' },
    {
      min: 2,
      message: '至少需要2个字',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 50,
      message: '至多需要50个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  type: [
    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
  ],
  province: [
    {
      validator: () => {
        if (!formData.province || !formData.city || !formData.area)
          return { result: false, message: '省市区必选' };

        return { result: true, type: 'success' };
      },
      type: 'error',
      trigger: 'change',
    },
  ],
  address: [
    {
      required: true,
      message: '详细地址必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 100,
      message: '详细地址至多需要100个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  // managerId: [
  //   { required: true, message: '经理必选', type: 'error', trigger: 'change' },
  // ],
};

const dialogOpened = () => {
  pca.value = [formData.province, formData.city, formData.area];
};

const areaChange = (val) => {
  formData.province = val[0];
  formData.city = val[1];
  formData.area = val[2];
};

// 获取经纬度 https://apis.map.qq.com/ws/geocoder/v1/?address=%E6%AD%A6%E6%B1%89%E9%94%A6%E7%BB%A3%E9%BE%99%E5%9F%8E&key=ORUBZ-OXNW4-HMGUJ-KMTZJ-46N37-YWFVF

const save = async () => {
  const valid = await formRef.value.validate();
  if (valid !== true) return;

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

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