<template>
  <el-dialog
    :visible.sync="visible"
    center
    append-to-body
    width="900px"
    :close-on-click-modal="false"
  >
    <div slot="title" class="dialog-title">
      选择
      <span>{{ row.assetName }}-{{ row.assetCode }}</span>
    </div>
    <div class="tool-box">
      <el-input v-model="searchVal" placeholder="编码、批次"></el-input>
      <div v-if="type != 'detail'">
        已选 {{ tableData.filter(item => item.checked).length }}/{{
          tableData.length
        }}<el-checkbox
          v-model="checkAll"
          style="margin-left: 10px"
        ></el-checkbox>
      </div>
    </div>
    <div class="scroll-wrapper">
      <div class="assets-cell" v-for="(item, index) in showList" :key="index">
        <div class="title">{{ item.onlyCode }}</div>
        <div class="col">
          <div>
            <span>批次号：{{ item.batchNo }}</span>
            <span
              v-for="(itm, index) in tableHeader(item.assetType)"
              :key="index"
              >{{ itm.label }}：
              <template v-if="itm.formatter">{{
                itm.formatter(item)
              }}</template>
              <template v-else>{{ item[itm.prop] }}</template>
            </span>
            <span
              >最小单元：{{
                `${item.measurementUnit || ''}${item.unit}/${item.minPackUnit}`
              }}</span
            >
            <span>包装编码：{{ item.num }}</span>
            <span>入库天数：{{ item.day }}</span>
            <span style="width: 50%"
              >{{ item.manufactureTime ? '生产日期' : '采购日期' }}：{{
                item.manufactureTime || item.procurementTime
              }}</span
            >
            <span style="width: 50%">过期日期：{{ item.expirationTime }}</span>
          </div>
          <el-checkbox
            v-model="item.checked"
            :disabled="!!item.disabled"
            v-if="type != 'detail'"
          ></el-checkbox>
        </div>
      </div>
      <el-empty description="暂无数据" v-if="!tableData.length"></el-empty>
    </div>
    <div
      slot="footer"
      style="text-align: right"
      v-if="type != 'input' && type != 'detail'"
    >
      <el-button type="primary" @click="confirm">确认添加</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { getGoodsSingle } from '@/api/stockManagement/inventoryAllocation'
import AssetsCell from './AssetsCell'
import { tableHeader } from '../../common'
import { deepClone } from '@/utils'
export default {
  components: { AssetsCell },
  inject: {
    parentOpt: { value: 'parentOpt', default: null }
  },
  props: {
    // 新增 or 反显
    type: {
      type: String,
      default: '' //新增
    }
  },
  data () {
    return {
      tableHeader,
      searchVal: '',
      visible: false,
      tableData: [],
      cargoSpace: '',
      row: {},
      callback: null
    }
  },
  computed: {
    checkAll: {
      get () {
        return this.showList.every(item => item.checked)
      },
      set (val) {
        this.showList.forEach(item => {
          item.checked = val
        })
      }
    },
    showList () {
      if (this.searchVal) {
        return this.tableData.filter(({ batchNum, assetName, assetCode }) => {
          return (
            String(batchNum).indexOf(this.searchVal) != -1 ||
            String(onlyCode).indexOf(this.searchVal) != -1
          )
        })
      }
      return this.tableData
    }
  },
  methods: {
    async open (row, cargoSpaceId, callback) {
      this.row = row
      this.callback = callback
      this.visible = true

      const preAssetsList =
        (this.parentOpt && this.parentOpt().preAssetsList) || []
      const assetsList = (this.parentOpt && this.parentOpt().assetsList) || []

      const disabledDetailReqList = [
        ...(preAssetsList.find(i => i.curId == row.curId)?.detailReqList || []),
        ...(assetsList.find(i => i.curId == row.curId)?.detailReqList || [])
      ]
      if (!this.type) {
        const res = await getGoodsSingle({
          assetCode: row.assetCode,
          assetType: row.assetType,
          cargoSpaceId: cargoSpaceId
        })
        if (res?.success) {
          this.tableData = res.data
            .map(i => {
              i.checked = false
              i.batchNo = i.batchNum
              if (
                this.row.detailReqList?.length &&
                this.row.detailReqList.find(itm => itm.id == i.id)
              ) {
                i.checked = true
              }

              if (disabledDetailReqList.find(p => p.onlyCode == i.onlyCode)) {
                i.checked = false
                i.disabled = true
              }
              return i
            })
            .filter(i => !i.disabled)
        }
      } else {
        // 反显
        const reList =
          this.type == 'output' ? 'curDetailReqList' : 'detailReqList' //反显列表
        this.tableData = deepClone(this.row[reList])
      }
    },
    confirm () {
      let selection = []
      if (this.type === 'output') {
        selection = this.tableData
      } else {
        selection = this.tableData.filter(i => i.checked)
      }
      this.callback && this.callback(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;
  align-items: center;
  margin-bottom: 10px;
  .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;
  }
}
.assets-cell {
  color: #555;
}
.title {
  font-size: 16px;
  text-align: left;
}
::v-deep.col {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
  .el-form-item {
    margin-bottom: 0 !important;
  }
  .el-input {
    width: 100px;
  }
  > div {
    flex: 1;
    background-color: rgba(242, 242, 242, 1);
    margin-right: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 10px 0;
    > span {
      display: inline-block;
      width: 20%;
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }
  .edit {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .cargo-space {
      margin-right: 20px;
    }
    .el-input-number {
      margin-left: 10px;
      width: 100px;
    }
  }
}
</style>
