<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" :disabled="true" />
      </a-form-item>
      <a-form-item ref="itemCode" label="单据明细号" name="itemCode">
        <a-input v-model:value="formState.itemCode" placeholder="请输入单据明细号" />
      </a-form-item>
      <a-form-item ref="skuCode" label="SKU编号" name="skuCode">
        <a-input v-model:value="formState.skuCode" placeholder="请输入SKU编号" />
      </a-form-item>
      <a-form-item ref="skuName" label="SKU名称" name="skuName">
        <a-input v-model:value="formState.skuName" placeholder="请选择SKU名称" />
      </a-form-item>
      <a-form-item ref="skuType" label="SKU类型" name="skuType">
        <a-input v-model:value="formState.skuType" placeholder="请选择SKU类型" />
      </a-form-item>
      <a-form-item ref="batch" label="批次" name="batch">
        <a-input v-model:value="formState.batch" placeholder="请选择批次" />
      </a-form-item>
      <a-form-item ref="master" label="货主" name="master">
        <a-input v-model:value="formState.master" placeholder="请选择货主" />
      </a-form-item>
      <a-form-item ref="producer" label="厂家" name="producer">
        <a-input v-model:value="formState.producer" 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 ref="produceDate" label="生产日期" name="produceDate">
        <a-date-picker v-model:value="formState.produceDate" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="overdue" label="到期日期" name="overdue">
        <a-date-picker v-model:value="formState.overdue" style="width: 100%" />
      </a-form-item>
      <a-form-item label="明细状态" name="status">
        <a-select v-model:value="formState.status" :options="inBillDetailStatus" placeholder="请选择明细状态">
        </a-select>
      </a-form-item>
      <a-form-item ref="planQty" label="计划数量" name="planQty">
        <a-input-number v-model:value="formState.planQty" placeholder="请选择计划数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="lockQty" label="已组盘数量" name="lockQty">
        <a-input-number v-model:value="formState.lockQty" placeholder="请输入已组盘数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="actQty" label="实际入库数量" name="actQty">
        <a-input-number v-model:value="formState.actQty" placeholder="请输入实际入库数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="submitQty" label="提交过账数量" name="submitQty">
        <a-input-number v-model:value="formState.submitQty" placeholder="请输入提交过账数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="convertPlanQty" label="换算计划数量" name="convertPlanQty">
        <a-input-number v-model:value="formState.convertPlanQty" placeholder="请输入换算计划数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="convertActQty" label="换算实际数量" name="convertActQty">
        <a-input-number v-model:value="formState.convertActQty" placeholder="请输入换算实际数量" style="width: 100%" />
      </a-form-item>
      <a-form-item ref="baseUnit" label="物流单位" name="baseUnit">
        <a-input v-model:value="formState.baseUnit" placeholder="请选择物流单位" />
      </a-form-item>
      <!--  <a-form-item ref="primaryUnit" label="换算单位" name="primaryUnit">
        <a-input v-model:value="formState.primaryUnit" style="width: 100%" placeholder="请选择换算单位" />
      </a-form-item> -->
      <a-form-item label="换算单位" name="primaryUnit">
        <a-select v-model:value="formState.primaryUnit" :options="inBillDetailPrimaryUnit" placeholder="请选择换算单位">
        </a-select>
      </a-form-item>
      <a-form-item label="特殊库存" name="spInv">
        <a-select v-model:value="formState.spInv" :options="inBillDetailSpInv" placeholder="请选择特殊库存">
        </a-select>
      </a-form-item>
      <a-form-item label="库存类型" name="invType">
        <a-select v-model:value="formState.invType" :options="inBillDetailInvType" placeholder="请选择库存类型">
        </a-select>
      </a-form-item>
      <a-form-item label="质量标志" name="qualityFlag">
        <a-select v-model:value="formState.qualityFlag" :options="inBillDetailQualityFlag" 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/inBillDetail";

  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 inBillDetailStatus = ref([{
          value: 'New',
          label: '新增',
        },
        {
          value: 'PartAssign',
          label: '部分分配',
        },
        {
          value: 'Assigned',
          label: '分配完成',
        },
        {
          value: 'Doing',
          label: '执行中',
        },
        {
          value: 'Pause',
          label: '暂停',
        },
        {
          value: 'Cancel',
          label: '取消',
        },
        {
          value: 'Over',
          label: '执行完成',
        },
        {
          value: 'Closed',
          label: '关闭',
        },
      ]);

      const inBillDetailPrimaryUnit = ref([{
          value: '盒',
          label: '盒',
        },
        {
          value: '箱',
          label: '箱',
        },
        {
          value: '台',
          label: '台',
        },
      ]);

      const inBillDetailSpInv = ref([{
        value: '1',
        label: '是',
      }, ]);
      const inBillDetailQualityFlag = 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 inBillDetailInvType = ref([{
          value: '满托',
          label: '非满托',
        },
        {
          value: '混托',
          label: '非混托',
        },
      ]);



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

      const formState = reactive({
        baseUnit: "件",
      });

      watch(props, (props) => {
        formState.invoiceCode = props.record.invoiceCode;
      })


      //获取单价
      const checkunitPrice = async (rule, value) => {
        console.log(rule, value);
      };
      //获取数量
      const checkqty = async (rule, value) => {
        console.log(rule, value);
      };


      const formRules = {
        skuCode: [{
          required: true,
          message: '请输入SKU编号',
          trigger: 'blur'
        }, ],
        skuName: [{
          required: true,
          message: '请输入SKU名称',
          trigger: 'blur'
        }, ],
        skuType: [{
          required: true,
          message: '请输入SKU类型',
          trigger: 'blur'
        }, ],
        batch: [{
          required: true,
          message: '请输入批次',
          trigger: 'blur'
        }, ],
        master: [{
          required: true,
          message: '请输入货主',
          trigger: 'blur'
        }, ],
        producer: [{
          required: true,
          message: '请输入厂家',
          trigger: 'blur'
        }, ],
        customer: [{
          required: true,
          message: '请输入客户',
          trigger: 'blur'
        }, ],
        produceDate: [{
          required: true,
          message: '请输入生产日期',
          trigger: 'blur',
          type: 'date',
        }, ],
        overdue: [{
          required: true,
          message: '请输入到期日期',
          trigger: 'blur',
          type: 'date',
        }, ],
        status: [{
          required: true,
          message: '请输入明细状态',
          trigger: 'blur'
        }, ],
        planQty: [{
          required: true,
          message: '请输入计划数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        lockQty: [{
          required: true,
          message: '请输入锁定数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        actQty: [{
          required: true,
          message: '请输入实际数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        submitQty: [{
          required: true,
          message: '请输入提交数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        convertPlanQty: [{
          required: true,
          message: '请输入换算计划数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        convertLockQty: [{
          required: true,
          message: '请输入换算锁定数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        convertActQty: [{
          required: true,
          message: '请输入换算实际数量',
          trigger: 'blur',
          type: 'number',
        }, ],
        baseUnit: [{
          required: true,
          message: '请输入物流单位',
          trigger: 'blur'
        }, ],
        primaryUnit: [{
          required: true,
          message: '请输入换算单位',
          trigger: 'blur'
        }, ],
        invType: [{
          required: true,
          message: '请输入库存类型',
          trigger: 'blur'
        }, ],
        qualityFlag: [{
          required: true,
          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 valueChanged = (e) => {
        console.log(e)

      }
      const cancel = (e) => {
        formRef.value.resetFields();
        context.emit("close", false);
      };
      // const handleChange = (e) => {
      //   context.emit("状态值改变事件", e);
      // };


      return {
        state,
        submit,
        cancel,
        formRef,
        formState,
        formRules,
        // projectStatus,
        valueChanged,
        inBillDetailStatus,
        inBillDetailPrimaryUnit,
        inBillDetailSpInv,
        inBillDetailInvType,
        inBillDetailQualityFlag,


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