<template>
  <a-modal :open="visible" title="批量更改存储状态" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel" style="margin-top: 120px;">
    <a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="新存储状态" name="newStatus">
        <a-select v-model:value="formState.newStatus" placeholder="请选择新存储状态" :options="storeStatusOption">
        </a-select>
      </a-form-item>
      <a-form-item ref="msg" label="变更的原因" name="msg">
        <a-textarea v-model:value="formState.msg" placeholder="请输入变更的原因" style="height: 60px;" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    changeLocStoreStatus
  } from "@/api/wms/loc";
  import {
    defineComponent,
    reactive,
    ref,
    toRaw,
  } from "vue";
  export default defineComponent({
    props: {
      visible: {
        type: Boolean,
      },
      record: {
        type: Object,
      }
    },
    emit: ["close"],
    setup(props, context) {

      const formRef = ref();

      const formState = reactive({
        ids: props.record,
      });

      const storeStatusOption = ref([{
        value: 'Free',
        label: '空闲',
      }, {
        value: 'Load',
        label: '载货',
      }, {
        value: 'DoIn',
        label: '预入',
      }, {
        value: 'DoOut',
        label: '预出',
      }, {
        value: 'Fault',
        label: '故障',
      }]);

      const formRules = {
        newStatus: [{
          required: true,
          message: '请选择新存储状态(必选)',
          trigger: 'blur'
        }],
        msg: [{
          required: true,
          message: '请输入变更的原因(必填)',
          trigger: 'blur'
        }],
      };

      const editKey = "add";

      const submit = (e) => {
        formRef.value
        .validate()
        .then(() => {
            message.loading({
              content: '提交中...',
              key: editKey
            });
            changeLocStoreStatus(toRaw(formState)).then((response) => {
              if (response.success) {
                message.success({
                  content: '保存成功',
                  key: editKey,
                  duration: 1
                }).then(() => {
                  cancel();
                });
              } else {
                message.error({
                  content: response.msg,
                  key: editKey,
                  duration: 1
                }).then(() => {
                  // cancel();
                });
              }
            });
          })
          .catch(error => {
            console.log('error', error);
          });
      };

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

      return {

        submit,
        cancel,
        formRef,
        formState,
        formRules,

        storeStatusOption,

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