<!--配货单-- 匹配出仓单-->
<template>
  <div class="custom-modal">
    <div
      v-if="operation"
      class="custom-table"
    >
      <Form
        ref="formModel"
        :model="formModel"
        :rules="formRule"
      >
        <FormItem
          label="可供匹配的出仓单"
          prop="poDeliveryId"
        >
          <Select
            v-model="formModel.poDeliveryId"
            filterable
          >
            <Option
              v-for="item in data"
              :key="item.ID"
              :value="item.ID"
            >
              {{ item.OUTSTORAGECODE }}
            </Option>
          </Select>
        </FormItem>
      </Form>
    </div>
    <p
      v-else
      class="modal-text"
    >
      已勾选数据不能进行此操作！
    </p>
    <businessButton :btn-config="btnConfig" />
  </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() {
      const validatePoDeliveryId = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择出仓单'));
        } else {
          callback();
        }
      };
      return {
        operation: true,
        data: [],
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消', // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.$emit('closeActionDialog', false);
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.determine();
              }, // 按钮点击事件
            }
          ]
        },
        formModel: {
          poDeliveryId: '',
        },
        formRule: {
          poDeliveryId: {
            validator: validatePoDeliveryId,
            trigger: 'change'
          }
        }
      };
    },

    mounted() {
      // 判断状态是否是已匹配
      if (this.selectRowData[0].VIRSTATUS.val !== '未确认') {
        this.operation = false;
        this.btnConfig.buttons.splice(1);
      } else {
        this.getWarehouseList();
      }
    },
    methods: {
      // 查询符合条件的出仓单列表
      async getWarehouseList() {
        const res = await this.service.storageContent.getPoDelivery({ ids: this.idArray }) //selectRowData[0].ID.val });
        if (res.data.code === 0) {
          this.data = res.data.data || [];
        }else {
          this.$emit('closeActionDialog', true);
        }
      },
      // 匹配出仓单
      async determine() {
        this.$refs.formModel.validate(async (valid) => {
          if (!valid) {
            this.$Message.error('请完成必输项的选择或输入!');
            return;
          }

          const params = {
            ids: this.idArray.join(','), // this.selectRowData[0].ID.val, // 明细id
            poDeliveryId: this.formModel.poDeliveryId, // 出仓单号
            isRematch: false
          };
          const res = await this.service.storageContent.matching(params);
          this.$emit('closeActionDialog', true);
          console.log(res);
          if (res.data.code === 0) {
            this.$Message.success(res.data.message || '成功！');
          }
        });
      }
    }
  };
</script>
