<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="invoiceCode" label="单据号" name="invoiceCode">
        <a-input v-model:value="formState.invoiceCode" placeholder="请输入单据号" />
      </a-form-item> -->
      <a-form-item ref="extCode" label="外部单据号" name="extCode">
        <a-input v-model:value="formState.extCode" placeholder="请输入外部单据号" />
      </a-form-item>
      <!-- <a-form-item ref="businessType" label="业务类型" name="businessType">
        <a-input v-model:value="formState.businessType" placeholder="请选择业务类型" />
      </a-form-item> -->
      <a-form-item label="业务类型" name="businessType">
        <a-select v-model:value="formState.businessType" :options="inBillBusinessType" placeholder="请选择业务类型">
        </a-select>
      </a-form-item>
      <a-form-item label="搬运类型" name="deliver">
        <a-select v-model:value="formState.deliver" :options="inBillDeliver" placeholder="请选择搬运类型">
        </a-select>
      </a-form-item>
      <a-form-item ref="platform" label="卸货站台" name="platform">
        <a-input v-model:value="formState.platform" placeholder="请选择卸货站台" />
      </a-form-item>
      <a-form-item ref="truckCode" label="车牌号" name="truckCode">
        <a-input v-model:value="formState.truckCode" placeholder="请输入车牌号" />
      </a-form-item>
      <a-form-item ref="driver" label="司机" name="driver">
        <a-input v-model:value="formState.driver" placeholder="请输入司机名称" />
      </a-form-item>
      <a-form-item ref="telephone" label="联系电话" name="telephone">
        <a-input v-model:value="formState.telephone" placeholder="请输入联系电话" />
      </a-form-item>
      <a-form-item ref="customer" label="客户" name="customer">
        <a-input v-model:value="formState.customer" placeholder="请输入客户名称" />
      </a-form-item>
      <a-form-item label="单据状态" name="status">
        <a-select v-model:value="formState.status" :options="inBillStatus" placeholder="请选择单据状态">
        </a-select>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    save
  } from "@/api/wms/inBill";
  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({});

      const inBillDeliver = ref([{
        value: '人工',
        label: '人工',
      }, {
        value: '机械手',
        label: '机械手',
      }, ]);

      const inBillBusinessType = ref([{
        value: '入库',
        label: '入库',
      }, ]);

      const inBillStatus = ref([{
          value: 'New',
          label: '新增',
        },
        {
          value: 'Doing',
          label: '执行中',
        },
        {
          value: 'Pause',
          label: '暂停',
        },
        {
          value: 'Cancel',
          label: '取消',
        },
        {
          value: 'Over',
          label: '执行完成',
        },
        {
          value: 'Closed',
          label: '关闭',
        },
      ]);

      const state = reactive({
        options: []
      });


      watch(props, (props) => {
        // formState.orderNo = props.record.orderNo
      })

      const formRules = {
        invoiceCode: [{
          required: false,
          message: '请输入单据号',
          trigger: 'blur'
        }, ],
        // extCode: [{
        //   required: true,
        //   message: '请输入外部单据号',
        //   trigger: 'blur'
        // }, ],
        businessType: [{
          required: false,
          message: '请选择业务类型',
          trigger: 'blur'
        }, ],
        deliver: [{
          required: false,
          message: '请输入搬运类型',
          trigger: 'blur'
        }, ],
        platform: [{
          required: true,
          message: '请输入卸货站台',
          trigger: 'blur'
        }, ],
        customer: [{
          required: true,
          message: '请输入客户名称',
          trigger: 'blur'
        }, ],
        status: [{
          required: false,
          message: '请输入单据状态',
          trigger: 'blur'
        }, ],
      };


      const submit = (e) => {
        formRef.value
          .validate()
          .then(() => {
            save(toRaw(formState)).then((response) => {
              console.log("监听报错", response)
              if (response.success) {
                message.success({
                  content: '保存成功',
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

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

      return {
        state,
        submit,
        cancel,
        formRef,
        formState,
        formRules,
        inBillDeliver,
        inBillBusinessType,
        inBillStatus,

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