<template>
<div class="list">
  <el-row v-if="!isInBlock" class="summary">{{summary}}</el-row>
  <!--<drop-filter :columns="wholeLabels" :storeKey="storeKey" :storeLabels="storeLables" @doFilter="labels => storeLables = labels"></drop-filter>-->
  <el-table
    ref="table"
    stripe
    border
    :max-height="tableMaxHeight"
    :data="list"
    :filteredLabels="storeLables"
    @selection-change="selectionChange"
    @row-click="toCheck"
  >
    <table-column type="selection" fixed align="center"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvLoc'" label="货主编码" prop="ownerCode"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvLoc'" label="货主名称" prop="ownerName"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvLoc' && queryBy.type !== 'queryInvOwner'" label="商品编码" prop="skuCode"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvLoc' && queryBy.type !== 'queryInvOwner'" label="商品名称" prop="skuName"></table-column>
    <table-column v-if="queryBy.type === 'queryInvLotNum' || queryBy.type === 'queryInvLotLocId'" label="批次号" prop="lotNum"></table-column>
    <table-column v-if="queryBy.type === 'queryInvLoc' || queryBy.type === 'queryInvSkuLoc' || queryBy.type === 'queryInvLotLocId'" label="库位" prop="locCode"></table-column>
    <table-column v-if="queryBy.type === 'queryInvLotLocId'" label="跟踪号" prop="traceId"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvOwner' && queryBy.type !== 'queryInvLoc'" label="包装单位" prop="printUom"></table-column>
    <table-column v-if="queryBy.type !== 'queryInvOwner' && queryBy.type !== 'queryInvLoc'" label="包装单位名称" prop="cdprDesc"></table-column>
    <table-column label="库存数" prop="qty"></table-column>
    <!--切换查询条件会出现bug, 加入key属性就好了-->
    <table-column label="库存重量" :render-header="renderWeightHeader" key="weight">
      <template slot-scope="scope">
        {{scope.column.unit === 'KG' ? (+scope.row.weight * 1000).toFixed($consts.numFix.KG) : (+scope.row.weight).toFixed($consts.numFix.TON)}}
      </template>
    </table-column>
    <table-column label="库存可用数" prop="qtyAvailable"></table-column>
    <table-column label="分配数" prop="qtyAlloc"></table-column>
    <table-column label="拣货数" prop="qtyPk"></table-column>
    <table-column label="冻结数" prop="qtyHold"></table-column>
    <table-column label="上架待出数" prop="qtyPaOut"></table-column>
    <table-column label="补货待出数" prop="qtyRpOut"></table-column>
    <table-column label="移动待出数" prop="qtyMvOut"></table-column>
    <table-column label="调整待减数" prop="qtyAdOut"></table-column>
    <table-column label="转移待出数" prop="qtyTfOut"></table-column>
    <table-column label="上架待入数" prop="qtyPaIn"></table-column>
    <table-column label="补货待入数" prop="qtyRpIn"></table-column>
    <table-column label="移动待入数" prop="qtyMvIn"></table-column>
    <table-column label="调整待增数" prop="qtyAdIn"></table-column>
    <table-column label="转移待入数" prop="qtyTfIn"></table-column>
    <table-column label="待质检数" prop="qtyQc"></table-column>
    <template v-if="queryBy.type === 'queryInvLotLocId'">
      <table-column label="商品温层" prop="tempLevel" >
        <template slot-scope="scope">
          <div>{{ $utils.keyMatcher(scope.row.tempLevel, $keys.inventoryQuery.queryByTerms.tempLevel).name }}</div>
        </template>
      </table-column>
      <table-column label="商品组" prop="ebmgNameCn" ></table-column>
    </template>
    <template v-if="queryBy.type === 'queryInvLotNum' || queryBy.type === 'queryInvLotLocId'">
      <table-column label="生产日期" prop="lotAtt01" ></table-column>
      <table-column label="失效日期" prop="lotAtt02" ></table-column>
      <table-column label="入库日期" prop="lotAtt03" ></table-column>
      <table-column label="品质" prop="lotAtt04">
        <template slot-scope="scope">
          <span>{{ $utils.keyMatcher(scope.row.lotAtt04, $keys.common.lotAtt04).name || '-' }}</span>
        </template>
      </table-column>
      <table-column label="批次属性05" prop="lotAtt05" ></table-column>
      <table-column label="批次属性06" prop="lotAtt06" ></table-column>
      <table-column label="批次属性07" prop="lotAtt07" ></table-column>
      <table-column label="批次属性08" prop="lotAtt08" ></table-column>
      <table-column label="批次属性09" prop="lotAtt09" ></table-column>
      <table-column label="批次属性10" prop="lotAtt10" ></table-column>
      <table-column label="批次属性11" prop="lotAtt11" ></table-column>
      <table-column label="批次属性12" prop="lotAtt12" ></table-column>
    </template>
  </el-table>
  <el-pagination
    class="pagination"
    @size-change="sizeChange"
    @current-change="currentChange"
    :current-page="currentNo"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</div>
</template>

<script>
export default {
  props: ['query', 'queryBy', 'needGetList', 'isInBlock'],
  created () {
  },
  mounted () {
    // this.getList()
  },
  watch: {
    queryBy () {
      this.list = [] // 避免页面卡顿数据暂存的问题
      this.storeLables = [] // 防止切换几次后drop-filter中没有全数据labels了
      this.$nextTick(() => {
        // 因为$ref在更新视图后才能访问到
        this.wholeLabels = this.$refs.table.columns.filter(item => item.label).map(item => item.label)
        // 执行自定义表头配置操作, 模仿 mounted 时的操作
        this.$store.commit('framework/changeTableColumns', this.wholeLabels) // 表格的表头
        this.storeLables = this.newColumns
      })
    },
    // 获取数据的时机
    needGetList (val) {
      this.getList()
      this.getSummary()
    },
  },

  data () {
    return {
      currentNo: 1,
      pageSize: 10,
      list: [],
      total: 0,
      storeKey: 'queryByTerms',
      summary: '', // 汇总数据
    }
  },
  methods: {
    // 获取库存列表
    getList () {
      // Object.assign(this.query, query)
      const url = this.$API.inventoryQuery.queryByTerms[this.queryBy.type]
      const param = this.query
      this.$https.post(url, param)
        .then(data => {
          this.list = data.rows
          this.total = data.total
        })
    },
    // 获取汇总数据
    getSummary () {
      const url = this.$API.inventoryQuery.queryByTerms.summary
      const param = this.query
      this.$https.post(url, param)
        .then(data => {
          const sum = data.data
          this.summary = `库存数: ${(+sum.sumQty).toFixed(2)}， 库存数EA: ${(+sum.sumQtyUom).toFixed(2)}， 库存重量(吨): ${(+sum.sumWeight).toFixed(3)}， 库存可用数EA: ${(+sum.sumQtyAvailable).toFixed(2)}`
        })
    },
    // 点击表格行
    toCheck (row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 页码变化
    currentChange (currentNo) {
      this.currentNo = currentNo
      this.query['page.currentPage'] = currentNo
      this.getList()
    },
    // 每页条数变化
    sizeChange (pageSize) {
      this.pageSize = pageSize
      this.query['page.limitCount'] = pageSize
      this.getList()
    },
    // 勾选变化
    selectionChange (selection) {
      this.$emit('selectionChange', selection)
    },
  },
}
</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 20px;
  }
  .summary {
    float: right;
    margin-bottom: 20px;
    color: #606266;
    font-size: 14px;
  }
</style>
