<template>
  <a-modal
    centered
    class="creatReplenish-confirm-modal"
    :footer="null"
    :maskClosable="false"
    title="生成补货单"
    v-model="isShow"
    @cancel="isShow = false"
    :width="800">
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="padding:0 0 20px;text-align: center;">
        <h4>请选择需要生成补货单的数字货架</h4>
        <div style="color:#999;font-size:14px;">(请从左侧选择货架并移动到右侧区域)</div>
      </div>
      <!-- 列表 -->
      <div>
        <a-transfer
          :titles="['货架列表', '已选货架']"
          :listStyle="{width:'45%',height:'400px'}"
          :data-source="shelfList"
          show-search
          :filter-option="filterOption"
          :target-keys="targetKeys"
          :render="item => item.title"
          @change="handleChange"
        />
      </div>
      <div class="btn-cont">
        <a-button type="primary" id="creatReplenish-confirm-modal-save" @click="handleSave">确定</a-button>
        <a-button id="creatReplenish-confirm-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { queryListForSettle, shelfTaskInsertBill } from '@/api/shelfReplenish'
export default {
  name: 'ConfirmModal',
  mixins: [commonMixin],
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    nowData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      shelfList: [],
      targetKeys: []
    }
  },
  methods: {
    getShelf () {
      this.spinning = true
      queryListForSettle().then(res => {
        if (res.status == 200) {
          this.shelfList = res.data || []
          this.shelfList.map(item => {
            item.title = item.shelfName
            item.key = item.shelfSn
          })
        } else {
          this.shelfList = []
        }
        this.spinning = false
      })
    },
    filterOption (inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    handleChange (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    //  确认补货
    handleSave () {
      if (this.targetKeys.length == 0) {
        this.$message.info('请选择货架！')
        return false
      }

      this.spinning = true
      shelfTaskInsertBill(this.targetKeys).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
          this.$emit('ok')
        }
        this.spinning = false
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        const _this = this
        this.$nextTick(() => { // 页面渲染完成后的回调
          _this.getShelf()
        })
      }
    }
  }
}
</script>

<style lang="less">
.creatReplenish-confirm-modal {
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
}
</style>
