<!--配货单从WMS撤回-->
<template>
  <div class="custom-modal">
    <p
      v-if="operation"
      class="modal-text"
    >
      是否确定从WMS撤回？
    </p>
    <p
      v-else
      class="modal-text"
    >
      已勾选配货单数据存在不是配货中状态，不能进行此操作！
    </p>
    <businessButton :btn-config="btnConfig" />
    <Modal
      v-model="modal"
      title="取消结果"
    >
      <p class="modal-text">
        {{ title }}
      </p>
      <Table
        :columns="columns"
        :data="data"
        height="200"
      />
      <div slot="footer">
        <Button type="error" size="large" long @click="closeDialog">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<style lang="less">
.modal-text {
  margin-bottom: 10px;
}
</style>
<script lang="js">
  import businessButton from 'professionalComponents/businessButton';

  export default {
    name: 'RevokeFromWMSModal',
    props: {
      selectRowData: { // 获取选择行的数据
        type: Array,
        default: () => []
      },
      idArray: {// 获取ID用于多选
        type: [Array, Object],
        default: () => {}
      },
    },
    components: {
      businessButton
    },
    data() {
      return {
        modal: false, // 弹框
        operation: true, // 是否可以操作
        title: '本次取消成功XX条，取消失败XX条，失败数据如下',
        columns: [{ // 表头
                    title: '退单编号',
                    key: 'id'
                  },
                  {
                    title: '失败原因',
                    key: 'msg'
                  }],
        data: [], // 错误数据
        processedSuccessfully: false, // 是否处理成功
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消', // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.closeDialog();
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.determine();
              }, // 按钮点击事件
            }
          ]
        },
      };
    },
    mounted() {
      // 判断勾选的数据是否有不是配货中状态
      this.selectRowData.forEach((element) => {
        if (element.VIRSTATUS.val !== '配货中') {
          this.operation = false;
          this.btnConfig.buttons.splice(1);
        }
      });
    },
    methods: {
      // 从WMS撤回
      async determine() {
        const res = await this.service.storageContent.recallWMS({ ids: this.idArray.join(',') });
        console.log(res);
        if (res.data.code === 0) {
          this.data = res.data.data;
          this.title = res.data.message;
          this.modal = true;
          this.processedSuccessfully = true;
        }
      },
      closeDialog() {
        this.$emit('closeActionDialog', this.processedSuccessfully);
      }
    }
  };
</script>
