<template>
<div class="list">
  <!--<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 label="冻结ID" prop="holdId">
      <template slot-scope="scope">
        <span class="detail-no" @click.stop="toDetail(scope.row)">{{scope.row.holdId}}</span>
      </template>
    </table-column>
    <table-column label="冻结方式" prop="holdType">
      <template slot-scope="scope">
        <div>{{ $utils.keyMatcher(scope.row.holdType, $keys.inventory.block.holdType).name }}</div>
      </template>
    </table-column>
    <table-column label="货主" prop="ownerName" ></table-column>
    <table-column label="商品" prop="skuName" ></table-column>
    <table-column label="批次号" prop="lotNum" ></table-column>
    <table-column label="库位" prop="locCode" ></table-column>
    <table-column label="跟踪号" prop="traceId" ></table-column>
    <table-column label="冻结原因" prop="reasonCode">
      <template slot-scope="scope">
        <div>{{ $utils.keyMatcher(scope.row.reasonCode, $keys.inventory.block.reasonCode).name }}</div>
      </template>
    </table-column>
    <table-column label="操作" width="100" fixed="right">
      <template slot-scope="scope">
        <el-button
          v-auth="50300120110"
          title="解冻"
          size="mini"
          type="success"
          icon="el-icon-check"
          plain
          circle
          @click.stop="removeHold(scope.row)"
        ></el-button>
        <el-button
          v-auth="50300120111"
          title="查看库存冻结明细"
          size="mini"
          type="info"
          icon="el-icon-info"
          plain
          circle
          @click.stop="toBlockDetail(scope.row)"
        ></el-button>
      </template>
    </table-column>
  </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: ['list', 'total', 'currentNo', 'pageSize'],
  created () {
  },
  mounted () {
  },

  data () {
    return {
      storeKey: 'block',
    }
  },
  methods: {
    // 点击表格行
    toCheck (row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 页码变化
    currentChange (currentNo) {
      const query = { 'page.currentPage': currentNo, 'page.limitCount': this.pageSize }
      this.$emit('getList', query)
    },
    // 每页条数变化
    sizeChange (pageSize) {
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentNo }
      this.$emit('getList', query)
    },
    toDetail (row) {
      this.$emit('toShowCreator', 'detail', row)
    },
    // 勾选变化
    selectionChange (selection) {
      const selectedIds = selection.map(item => item.holdId).join(',')
      this.$emit('selectionChange', selectedIds)
    },
    // 解冻
    removeHold (row) {
      this.$confirm(`确定解冻吗 ?`)
        .then(() => {
          const url = this.$API.inventory.block.removeHold
          const param = {
            holdIds: row.holdId,
          }
          this.$https.post(url, param)
            .then(data => {
              this.$emit('getList')
            })
        })
    },
    // 打开新 tab 菜单
    openNewTab (routeName) {
      const rootMenu = { ...this.$store.state.framework.rootMenu }
      Object.entries(rootMenu).find(item => {
        const name = item[1].immutableName || item[1].route.name
        if (name === routeName) {
          this.$store.commit('framework/addTabControlMenu', {
            index: item[1].index,
            route: item[1].route,
            name: item[1].$el.innerText,
            immutableName: item[1].immutableName, // 原始路由名, 设置即不变
          })
          this.$nextTick(() => {
            this.$store.commit('framework/changeActiveMenu', item[1].index)
          })
        }
        return name === routeName
      })
    },
    // 查看冻结明细, ##逻辑略复杂, 再优化
    toBlockDetail (row) {
      this.openNewTab('queryByTerms')
      this.$router.push({
        name: 'queryByTerms',
        params: {
          queryParams: {
            ownerCode: row.ownerCode,
            skuCode: row.skuCode,
            lotNum: row.lotNum,
            traceId: row.traceId,
            locCode: row.locCode,
          },
          fromBlock: true,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
}
.detail-no {
  color: #0682ea;
  &:hover {
    cursor: pointer;
  }
}
</style>
