<template>
  <el-dialog :visible.sync="visible" title="入库明细" width="70%">
    <div class="info">
      <div>出库单号 {{ info.bizNum }}</div>
      <div>
        <el-input
          v-model="searchVal"
          size="small"
          v-if="dimension == 1"
          :placeholder="`搜索${title}编码/批次号`"
        ></el-input>
        <el-input
          v-else
          size="small"
          v-model="searchVal"
          :placeholder="`搜索${title}编码`"
        ></el-input>
      </div>
    </div>
    <el-table
      :data="showTableData"
      height="60vh"
      class="w100"
      border
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        :label="`${title}编码`"
        prop="onlyCode"
      ></el-table-column>
      <el-table-column label="包装编码" prop="num"></el-table-column>
      <el-table-column label="最小包装单元" prop="" v-if="!isUnpack">
        <template slot-scope="{ row }">{{
          `${row.measurementUnit || ''}${row.unit}/${row.minPackUnit}`
        }}</template>
      </el-table-column>
      <el-table-column
        label="批次号"
        prop="batchNum"
        v-if="dimension == 1"
      ></el-table-column>
      <el-table-column
        label="生产日期"
        prop="manufactureTime"
      ></el-table-column>
      <el-table-column
        label="采购日期"
        prop="procurementTime"
      ></el-table-column>
      <el-table-column label="过期时间" prop="expirationTime"></el-table-column>
      <el-table-column label="货位" prop="" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{
            `${row.warehouseName}-${row.areaName}-${row.shelfCode}-${row.cargoSpaceCode}`
          }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
// import { getWarehouseSceneDetail } from '@/api/stockManagement/stockLedger'
// import dictMixin from '@/mixins/dictMixins'
export default {
  props: {
    assetCode: String,
    title: String,
    isUnpack: Boolean
  },
  // mixins: [dictMixin],
  data () {
    return {
      visible: false,
      tableData: [],
      info: {},
      searchVal: ''
    }
  },
  computed: {
    dimension () {
      return this.$route.query.dimension
    },
    showTableData () {
      return this.tableData.filter(item => {
        if (this.searchVal) {
          return (
            (item.onlyCode && item.onlyCode.indexOf(this.searchVal)) > -1 ||
            (item.batchNum &&
              this.dimension == 1 &&
              item.batchNum.indexOf(this.searchVal) > -1)
          )
        }
        return true
      })
    }
  },
  methods: {
    open ({ bizNum, batchNum }) {
      this.info = { bizNum, batchNum }
      this._getWarehouseSceneDetail(bizNum, batchNum)

      this.visible = true
    },

    async _getWarehouseSceneDetail (bizNum, batchNum) {
      const res = await getWarehouseSceneDetail({
        bizNum,
        batchNum,
        bizStatus: 2,
        inventoryCode: this.assetCode
      })
      if (res?.success) {
        this.tableData = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  font-weight: bold;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
