<template>
  <a-modal :open="visible" title="编辑客户信息" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item ref="customerCode" label="编号" name="customerCode">
        <a-input v-model:value="formState.customerCode" placeholder="请输入编号" />
      </a-form-item>
      <a-form-item ref="customerName" label="简称" name="customerName">
        <a-input v-model:value="formState.customerName" placeholder="请输入简称" />
      </a-form-item>
      <a-form-item ref="fullName" label="全称" name="fullName">
        <a-input v-model:value="formState.fullName" placeholder="请输入全称" />
      </a-form-item>
      <a-form-item label="客户类型" name="customerType">
        <a-select v-model:value="formState.customerType" :options="customerTypes" placeholder="请选择客户类型">
        </a-select>
      </a-form-item>
      <a-form-item ref="address" label="地址" name="address">
        <a-input v-model:value="formState.address" placeholder="请输入地址" />
      </a-form-item>
      <a-form-item ref="contact" label="联系人" name="contact">
        <a-input v-model:value="formState.contact" placeholder="请输入联系人" />
      </a-form-item>
      <a-form-item ref="phoneNo" label="电话号码" name="phoneNo">
        <a-input v-model:value="formState.phoneNo" placeholder="请输入电话号码" />
      </a-form-item>
      <a-form-item ref="postCode" label="邮政编码" name="postCode">
        <a-input v-model:value="formState.postCode" placeholder="请输入邮政编码" />
      </a-form-item>
      <a-form-item ref="email" label="电子邮箱" name="email">
        <a-input v-model:value="formState.email" placeholder="请输入电子邮箱" />
      </a-form-item>
      <a-form-item ref="country" label="所属国家" name="country">
        <a-input v-model:value="formState.country" placeholder="请输入所属国家" />
      </a-form-item>
      <a-form-item ref="city" label="所属城市" name="city">
        <a-input v-model:value="formState.city" placeholder="请输入所属城市" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" placeholder="请输入备注" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    edit
  } from "@/api/wms/customer";
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch
  } from "vue";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
      record: {
        type: Object,
      }
    },
    emit: ["close"],
    setup(props, context) {

      const formRef = ref();

      const formState = reactive({});

      watch(props, (props) => {
        formState.id = props.record.id;
        formState.customerCode = props.record.customerCode;
        formState.customerName = props.record.customerName;
        formState.fullName = props.record.fullName;
        formState.customerType = props.record.customerType;
        formState.address = props.record.address;
        formState.contact = props.record.contact;
        formState.phoneNo = props.record.phoneNo;
        formState.postCode = props.record.postCode;
        formState.email = props.record.email;
        formState.country = props.record.country;
        formState.city = props.record.city;
        formState.remark = props.record.remark;
      })

      const formRules = {
        customerCode: [{
          required: true,
          message: '请输入编号(必填)',
          trigger: 'blur'
        }],
        customerName: [{
          required: true,
          message: '请输入简称(必填)',
          trigger: 'blur'
        }],
        fullName: [{
          required: true,
          message: '请输入全称(必填)',
          trigger: 'blur'
        }],
        customerType: [{
          required: true,
          message: '请选择客户类型(必选)',
          trigger: 'blur'
        }],
      };

      const editKey = "add";

      const customerTypes = ref([{
        value: 'Customer',
        label: '客户',
      }, {
        value: 'Owner',
        label: '货主',
      }, {
        value: 'Supplier',
        label: '供应商',
      }]);


      const submit = (e) => {
        formRef.value
        .validate()
        .then(() => {
            message.loading({
              content: '提交中...',
              key: editKey
            });
            edit(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: editKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: editKey,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

      const cancel = (e) => {
        formRef.value.resetFields();
        context.emit("close", false);
      };

      return {

        submit,
        cancel,
        customerTypes,
        formRef,
        formState,
        formRules,

        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 12
        },
      };
    },
  });
</script>
