<template>
  <a-modal :open="visible" title="新增托盘明细信息" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='1200'>
    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <div>
        <page-layout>
          <a-row :gutter="[0, 0]">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="palletCode" label="托盘号" name="palletCode">
                    <a-input v-model:value="formState.palletCode" placeholder="请输入托盘号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="skuCode" label="物料编号" name="skuCode">
                    <a-input v-model:value="formState.skuCode" placeholder="请输入物料编号" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="skuName" label="物料描述" name="skuName">
                    <a-input v-model:value="formState.skuName" placeholder="请输入物料描述" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="skuType" label="物料类型" name="skuType">
                    <a-input v-model:value="formState.skuType" placeholder="请输入物料类型" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="batch" label="批次" name="batch">
                    <a-input v-model:value="formState.batch" placeholder="请输入批次" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="serial" label="序列号" name="serial">
                    <a-input v-model:value="formState.serial" placeholder="请输入序列号" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="master" label="货主" name="master">
                    <a-input v-model:value="formState.master" placeholder="请输入货主" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="producer" label="厂家" name="producer">
                    <a-input v-model:value="formState.producer" placeholder="请输入厂家" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="customer" label="客户" name="customer">
                    <a-input v-model:value="formState.customer" placeholder="请输入客户" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="produceDate" label="生产日期" name="produceDate">
                    <a-date-picker v-model:value="formState.produceDate" style="width: 100%" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="overdue" label="过期日期" name="overdue">
                    <a-date-picker v-model:value="formState.overdue" style="width: 100%" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="skuQty" label="物料数量" name="skuQty">
                    <a-input v-model:value="formState.skuQty" placeholder="请输入物料数量" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="lockQty" label="锁定数量" name="lockQty">
                    <a-input v-model:value="formState.lockQty" placeholder="请输入锁定数量" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="baseUnit" label="物流单位" name="baseUnit">
                    <a-input v-model:value="formState.baseUnit" placeholder="请输入物流单位" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="convertQty" label="统计数量" name="convertQty">
                    <a-input v-model:value="formState.convertQty" placeholder="请输入统计数量" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item ref="primaryUnit" label="统计单位" name="primaryUnit">
                    <a-input v-model:value="formState.primaryUnit" placeholder="请输入统计单位" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="特殊库存" name="spInv">
                    <a-select v-model:value="formState.spInv" placeholder="请选择特殊库存" :options="spInvs">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="invType" label="库存类型" name="invType">
                    <a-input v-model:value="formState.invType" placeholder="请输入库存类型" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="质量状态" name="qualityStatus">
                    <a-select v-model:value="formState.qualityStatus" placeholder="请选择质量状态" :options="qualityStatuss">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="备注" name="remark">
                    <a-textarea v-model:value="formState.remark" />
                  </a-form-item>
                </a-col>
                <a-col :span="8"></a-col>
              </a-row>
            </a-col>
          </a-row>
        </page-layout>
      </div>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    save,
  } from "@/api/wms/palletDetail";
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
    watch,
  } from "vue";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
    },
    emit: ["close"],
    setup(props, context) {

      const formRef = ref();

      const state = reactive({});

      const formState = reactive({});

      const spInvs = ref([{
        value: '1',
        label: '是',
      }, {
        value: '0',
        label: '否',
      }]);

      const qualityStatuss = ref([{
        value: 'Q',
        label: '合格',
      }, {
        value: 'N',
        label: '不合格',
      }, {
        value: 'W',
        label: '待检',
      }, {
        value: 'E',
        label: '免检',
      }, {
        value: 'T',
        label: '实验料',
      }, {
        value: 'S',
        label: '待确定',
      }, {
        value: 'C',
        label: '待验',
      }, {
        value: 'D',
        label: '冻结',
      }]);

      const formRules = {
        palletCode: [{
          required: true,
          message: '请输入托盘号',
          trigger: 'blur'
        }],
        skuCode: [{
          required: true,
          message: '请输入物料编号',
          trigger: 'change'
        }],
        skuQty: [{
          required: true,
          message: '请输入物料数量',
          trigger: 'change',
        }],
        baseUnit: [{
          required: true,
          message: '请输入物流单位',
          trigger: 'change',
        }],
        convertQty: [{
          required: true,
          message: '请输入统计数量',
          trigger: 'change',
        }],
        primaryUnit: [{
          required: true,
          message: '请输入统计单位',
          trigger: 'change',
        }],
      }
      const saveKey = "save";

      const submit = (e) => {
        formRef.value
        .validate()
        .then(() => {
            message.loading({
              content: '提交中...',
              key: saveKey
            });
            save(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: saveKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: saveKey,
                  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,
        spInvs,
        qualityStatuss,
        formRules,
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 12
        },
      };
    },
  });
</script>
