<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="palletCode" label="托盘号" name="palletCode">
        <a-input v-model:value="formState.palletCode" placeholder="请输入托盘号" />
      </a-form-item>
      <a-form-item label="托盘类型" name="palletType">
        <a-select v-model:value="formState.palletType" placeholder="请选择托盘类型" :options="locHighTypeOption">
        </a-select>
      </a-form-item>
      <a-form-item label="托盘大小" name="sizeType">
        <a-select v-model:value="formState.sizeType" placeholder="请选择托盘大小" :options="locSizeTypeOption">
        </a-select>
      </a-form-item>
      <a-form-item label="满盘标志" name="fullFlag">
        <a-select v-model:value="formState.fullFlag" placeholder="请选择满盘标志" :options="fullFlags">
        </a-select>
      </a-form-item>
      <a-form-item ref="locCode" label="托盘位置" name="locCode">
        <a-input v-model:value="formState.locCode" placeholder="请输入托盘位置" />
      </a-form-item>
      <a-form-item ref="status" label="托盘状态" name="status">
        <a-input v-model:value="formState.status" placeholder="请输入托盘状态" />
      </a-form-item>
      <a-form-item label="任务标志" name="jobFlag">
        <a-select v-model:value="formState.jobFlag" placeholder="请选择任务标志" :options="jobFlags">
        </a-select>
      </a-form-item>
      <!--      <a-form-item ref="note" label="备注" name="note">
        <a-input v-model:value="formState.note" placeholder="请输入备注" />
      </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/pallet";
  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 fullFlags = ref([{
        value: 'true',
        label: '整盘',
      }, {
        value: 'false',
        label: '散盘',
      }]);

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

      const locHighTypeOption = ref([{
        value: 'High',
        label: '高货位',
      }, {
        value: 'Short',
        label: '矮货位',
      }, {
        value: 'None',
        label: '不区分高矮',
      }]);

      const locSizeTypeOption = ref([{
        value: 'Big',
        label: '大货位',
      }, {
        value: 'Small',
        label: '小货位',
      }, {
        value: 'None',
        label: '不区分大小',
      }]);

      const formRules = {
        palletCode: [{
          required: true,
          message: '请输入托盘号',
          trigger: 'blur'
        }],
        fullFlag: [{
          required: true,
          message: '请选择满盘标志',
          trigger: 'blur'
        }],
        locCode: [{
          required: true,
          message: '请输入托盘位置',
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: '请输入托盘状态',
          trigger: 'blur',
        }],
        jobFlag: [{
          required: true,
          message: '请选择任务标志',
          trigger: 'blur'
        }],
      }

      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,
        fullFlags,
        jobFlags,
        locHighTypeOption,
        locSizeTypeOption,
        formRules,
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 12
        },
      };
    },
  });
</script>
