<template>
  <div>
    <p-modal
      title="选择库位"
      :visible="visible"
      :dialogStyle="{ top: '40px' }"
      :draggable="true"
      :width="'70%'"
      :destroyOnClose="true"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="box-wrapper">
        <p-table-edit
          ref="mainlist"
          :rowKey="'whLocatorId'"
          :columns="overflowColumns"
          :autoLoad="false"
          :data-source.sync="dataList"
          :hasRowSelectCheck="true"
          :rowSelectType="2"
          @selectChange="selectChange"
          :scroll="{ y: 400 }"
        >
        </p-table-edit>
      </div>
    </p-modal>
  </div>
</template>

<script>
import { overflowColumns } from '../js/config'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    paramRowData: {
      type: Object,
      default: null,
    },
    paramData: {
      type: Array,
      default: null,
    },
    detailData: {
      type: Array,
      default: null,
    },
  },

  model: {
    prop: 'visible',
    event: 'change',
  },

  watch: {
    visible: {
      handler(visible) {
        if (!visible) return
        this.$nextTick(() => {
          this.dataList = []
          this.initLineData()
        })
      },
    },
  },
  data() {
    return {
      overflowColumns: overflowColumns,
      dataList: [],
      selectedRows: [],
    }
  },

  methods: {
    initLineData() {
      this.dataList = JSON.parse(JSON.stringify(this.paramData))
    },

    handleOk(e) {
      if (this.selectedRows.length < 1) {
        this.$message.warning('请先选择货位！')
        return
      }
      //明细行
      var rowData = this.paramRowData
      //货位查询数据
      var dataList = JSON.parse(JSON.stringify(this.paramData))
      //选择几个货位拆分成几条明细
      //获取选择条数
      var num = this.selectedRows
      var split = []
      var newData = rowData
      for (let i = 0; i < this.selectedRows.length; i++) {
        split.push({
          ...newData,
          whLocatorId: num[i].whLocatorId,
          whLocatorName: num[i].whLocatorName,
          batchId:num[i].batchId
        })
        split[i].id = Math.floor(Math.random() * 1000)
      }
      var empNum = 0
      split.forEach((t) => {
        empNum += t.pieceQuantity
      })
      let index = rowData._row_count - 1
      // if (this.detailData.length != 0) {
      //   split = split.filter((item, i) => {
      //     return item.whLocatorId != this.detailData[i].whLocatorId
      //   })
      // }
      console.log(split,'splitsplit');
      this.detailData.splice(index, 0, ...split)
      this.paramRowData.pieceQuantity = empNum
      this.$emit('change', false)
    },
    handleCancel(e) {
      this.$emit('change', false)
    },
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style scoped>
.box-wrapper {
  margin-bottom: 20px;
  background: #fff;
}
.btn {
  color: #2b80ff;
  margin-right: 10px;
  cursor: pointer;
}
.btn:hover {
  text-decoration: underline;
}
</style>
