<template>
  <my-dialog
    :visible="visible"
    :header="title"
    :width="1000"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" labelWidth="120px">
      <t-row :gutter="[0, 20]">
        <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-option>
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="6"></t-col>
        <t-col :span="6">
          <t-form-item label="客户名称" name="name">
            <t-input v-model="formData.name"></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="具体单位" name="unit">
            <t-input v-model="formData.unit"></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="收件人姓名" name="consignee">
            <t-input v-model="formData.consignee"></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="收件人电话" name="consigneePhone">
            <t-input v-model="formData.consigneePhone"></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="收件人地址" name="consigneeAddress">
            <t-textarea v-model="formData.consigneeAddress"></t-textarea>
          </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="AddReceiveInfoDialog">
import { ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { editReceiveInfoApi } from '@/api/system';
import { CUSTOMER_TYPE } from '@/config/constants';

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

const formRef = ref(null);
const title = computed(() => {
  return (isEdit.value ? '编辑' : '新增') + '客户收件地址';
});

const { formData, isEdit } = useClearDialog(
  {
    type: '',
    name: '',
    unit: '',
    consignee: '',
    consigneePhone: '',
    consigneeAddress: '',
    id: '',
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
    formData.id = props.curRow?.id || undefined;
  }
);

const rules = {
  type: [
    {
      required: true,
      message: '业务类型必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  name: [
    {
      required: true,
      message: '客户名称必填',
      type: 'error',
      trigger: 'change',
    },
  ],
  unit: [
    {
      required: true,
      message: '具体单位必填写',
      type: 'error',
      trigger: 'change',
    },
  ],
  consignee: [
    {
      required: true,
      message: '收件人姓名必填',
      type: 'error',
      trigger: 'change',
    },
  ],
  consigneePhone: [
    {
      required: true,
      message: '收件人电话必填',
      type: 'error',
      trigger: 'change',
    },
    {
      telnumber: true,
      message: '请输入合适的手机号码',
      type: 'error',
      trigger: 'change',
    },
  ],
  consigneeAddress: [
    {
      required: true,
      message: '收件人地址必填',
      type: 'error',
      trigger: 'change',
    },
  ],
};

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

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

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>
<style lang="less">
.project-experience {
  & > .t-textarea__inner {
    height: 130px !important;
  }
}
</style>
