<template>
  <my-dialog
    :visible="visible"
    header="修改设备发货信息"
    :width="700"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
  >
    <div class="readonly-info">
      <t-form labelWidth="70px">
        <t-row :gutter="[10, 0]">
          <t-col :span="6">
            <t-form-item label="项目单号：">
              {{ curRow?.crmNo || '-' }}
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="供应商：">
              {{ curRow?.supplierName }}
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="设备编号：">
              {{ curRow?.deviceNo }}
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="序列号：">
              {{ curRow?.serialNo }}
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="品牌：">
              {{ curRow?.brand }}
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="型号：">
              {{ curRow?.model }}
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </div>
    <t-form ref="formRef" :data="formData" :rules="rules" labelWidth="120px">
      <t-row :gutter="[0, 20]">
        <t-col :span="6">
          <t-form-item label="邮寄地址" name="mailingAddress">
            <t-input v-model="formData.mailingAddress"></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="6">
          <t-form-item label="快递单号" name="expressNo">
            <t-input v-model="formData.expressNo"></t-input>
          </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="EditDeviceInfoDialog">
import { ref, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import useClearDialog from '@/hooks/useClearDialog';
import { editDeviceSendApi } from '@/api/resource-guard';

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

const formRef = ref(null);

const { formData, isEdit } = useClearDialog(
  {
    mailingAddress: '',
    consignee: '',
    consigneePhone: '',
    expressNo: '',
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
  }
);

const rules = {
  mailingAddress: [
    {
      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',
    },
  ],
  expressNo: [
    {
      required: true,
      message: '请输入快递单号',
      type: 'error',
      trigger: 'change',
    },
  ],
};

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

  const res = await editDeviceSendApi({
    ...formData,
    id: props.curRow.id,
  }).catch(() => {});
  if (!res) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>
<style lang="less" scoped>
.readonly-info {
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 16px;
  margin-bottom: 24px;
}
</style>
