<template>
  <el-dialog :visible.sync="visible" center append-to-body width="900px">
    <div slot="title" class="dialog-title">
      选择
      <span>货位{{ cargoSpace }}</span>
    </div>
    <div class="tool-box">
      <el-input v-model="searchVal" placeholder="编码、名称"></el-input>
      <div>选中调拨 {{ selected }}/{{ sum }} 项</div>
    </div>
    <div class="scroll-wrapper">
      <AssetsCell
        v-for="(item, index) in showList"
        :key="index"
        :item="item"
        :cargoSpaceId="warehouse.cargoSpaceId"
      />
      <el-empty description="暂无数据" v-if="!tableData.length"></el-empty>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button type="primary" @click="confirm">确认添加</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { getGoodsInfo } from '@/api/stockManagement/inventoryAllocation'
import AssetsCell from './AssetsCell'
export default {
  components: { AssetsCell },
  inject: {
    parentOpt: { value: 'parentOpt', default: null }
  },
  props: {},
  data () {
    return {
      searchVal: '',
      visible: false,
      tableData: [],
      cargoSpace: '',
      warehouse: {}
    }
  },
  computed: {
    showList () {
      if (this.searchVal) {
        return this.tableData.filter(({ batchNum, assetName, assetCode }) => {
          return (
            String(assetName).indexOf(this.searchVal) != -1 ||
            String(assetCode).indexOf(this.searchVal) != -1
          )
        })
      }
      return this.tableData
    },
    sum () {
      let sum = 0
      this.tableData.forEach(item => {
        sum += +item.amount
      })
      return sum
    },
    selected () {
      let sum = 0
      this.tableData.forEach(item => {
        if (item.takeStockPattern) {
          sum += +item.amount
        } else {
          sum += item.detailReqList?.length || 0
        }
      })
      return sum
    }
  },
  methods: {
    async open (warehouse) {
      this.warehouse = warehouse
      this.cargoSpace =
        warehouse.warehouseName +
        '-' +
        warehouse.areaName +
        '-' +
        warehouse.shelfCode +
        '-' +
        warehouse.cargoSpaceCode
      this.visible = true
      const assetsList = (this.parentOpt && this.parentOpt().assetsList) || []
      const preAssetsList =
        (this.parentOpt && this.parentOpt().preAssetsList) || []
      const res = await getGoodsInfo({ cargoSpaceId: warehouse.cargoSpaceId })
      if (res?.success) {
        this.tableData = res.data.map(i => {
          // 唯一id 添加相同判断
          i.curId = warehouse.cargoSpaceId + i.assetCode

          let preAmount = 0
          let tempAmount = 0

          // 预调入数量需展示，但不可修改，展示剩余可调拨
          const index1 = preAssetsList.findIndex(item => item.curId === i.curId)
          if (index1 > -1) {
            preAmount = preAssetsList[index1].amount
          }

          i.stocker = +i.amount

          i.amount = 0

          const index = assetsList.findIndex(item => item.curId === i.curId)
          if (index > -1) {
            tempAmount = assetsList[index].amount
          }

          i.max = i.stocker - preAmount - tempAmount

          delete i.id
          return i
        })
      }
    },
    confirm () {
      const selection = this.tableData.filter(item => {
        Object.assign(item, this.warehouse)
        if (!item.takeStockPattern) {
          item.amount = item.detailReqList?.length
        }
        return item.amount > 0
      })
      if (!selection.length) {
        this.$message.error(`请至少选择一条数据`)
        return
      }

      this.$emit('success', selection)
      this.cancel()
    },
    cancel () {
      this.visible = false
      this.tableData = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.scroll-wrapper {
  height: 40vh;
  overflow: auto;

  .assets-cell {
    & + .assets-cell {
      margin-top: 10px;
    }
  }
}
::v-deep.tool-box {
  text-align: right;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .el-input {
    width: 320px;
    margin-right: 20px;
  }
}
.dialog-title {
  color: #fff;
  text-align: left;
  position: relative;

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
  }
}
</style>
