<template>
  <a-modal :open="visible" title="新增出库拣选" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" :width='1000'>
    <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 label="状态" name="status">
                    <a-select v-model:value="formState.status" :options="pickStatus" placeholder="请选择状态">
                    </a-select>
                  </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-row>
              <a-row>
                <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-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-row>
              <a-row>
                <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-col :span="8">
                  <a-form-item ref="spInv" label="特殊标志" name="spInv">
                    <a-input v-model:value="formState.spInv" placeholder="请输入特殊标志" />
                  </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 ref="qualityStatus" label="质量状态" name="qualityStatus">
                    <a-select v-model:value="formState.qualityStatus" :options="pickQualityStatus" placeholder="请选择状态">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="pickQty" label="拣选数量" name="pickQty">
                    <a-input v-model:value="formState.pickQty" placeholder="请输入拣选数量" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item ref="targetLoc" label="目标地址" name="targetLoc">
                    <a-input v-model:value="formState.targetLoc" placeholder="请输入目标地址" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-item label="备注" name="note">
                    <a-textarea v-model:value="formState.note" />
                  </a-form-item>
                </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/pick";
  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 pickStatus = ref([{
          value: '开始',
          label: '开始',
        },
        {
          value: '执行中',
          label: '执行中',
        },
        {
          value: '异常',
          label: '异常',
        },
        {
          value: '取消',
          label: '取消',
        },
        {
          value: '完成',
          label: '完成',
        },
      ]);

      const pickQualityStatus = 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 formState = reactive({


      });

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


      const formRules = {
        groupName: [{
          required: true,
          message: '请输入组名',
          trigger: 'blur'
        }],
        peopleNum: [{
          required: true,
          message: '请输入人数',
          trigger: 'blur',
          type: "number",
        }],
        plantingQty: [{
          required: true,
          message: '请输入种植数量',
          trigger: 'blur',
          type: "number",
        }],
        plantingDate: [{
          required: true,
          message: '请选择种植日期',
          trigger: 'blur',
          type: 'date',
        }],

      };
      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);
      };
      const handleChange = (e) => {
        context.emit("状态值改变事件", e);
      };
      return {
        submit,
        cancel,
        formRef,
        formState,
        formRules,
        pickQualityStatus,
        pickStatus,

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