<template>
  <div>
    <div class="mrg-b">
      <!--<drop-filter :columns="wholeLabels" :storeKey="storeKey"  :storeLabels="storeLables"  @doFilter="labels => storeLables = labels"></drop-filter>-->
      <el-table ref="table" stripe border :max-height="tableMaxHeight" :data="tableData" :filteredLabels="storeLables" @selection-change='handleSelectChange'>
        <table-column type="selection" fixed align="center">
        </table-column>
        <table-column label="拣货任务ID" prop="allocId">
          <template slot-scope="scope">
            <span class="blue" @click.stop="handleOpenDetail(scope.row, 'detail')">{{scope.row.allocId}}</span>
          </template>
        </table-column>
        <table-column label="出库单号" prop="soNo">
        </table-column>
        <table-column label="状态">
          <template slot-scope="scope">
            {{ $utils.keyMatcher(scope.row.status, $keys.stockOut.status).name }}
          </template>
        </table-column>
        <table-column label="货主">
          <template slot-scope="scope">
            <p>{{scope.row.ownerCode}}</p>
            <p>{{scope.row.ownerName}}</p>
          </template>
        </table-column>
        <table-column label="商品">
          <template slot-scope="scope">
            <p>{{scope.row.skuCode}}</p>
            <p>{{scope.row.skuName}}</p>
          </template>
        </table-column>
        <table-column label="供应商" prop="supplierName">
        </table-column>
        <table-column label="批次号" prop="lotNum">
        </table-column>
        <table-column label="库位(源/目标)">
          <template slot-scope="scope">
            <p>{{scope.row.locCode}}</p>
            <p>{{scope.row.toLoc}}</p>
          </template>
        </table-column>
        <table-column label="包装单位" prop="uomDesc">
        </table-column>
        <table-column label="拣货数">
          <template slot-scope="scope">
            <p>未拣：{{scope.row.qtyPkUom}}</p>
            <p>未拣EA：{{scope.row.qtyPkEa}}</p>
          </template>
        </table-column>
        <table-column label="拣货重量" :render-header="renderWeightHeader" prop="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="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="查看附件" placement="top">
              <el-badge style="margin-right: 20px;" :value="scope.row.fileNumber">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-tickets"
                  plain
                  circle
                  @click.stop="toFile(scope.row)"
                ></el-button>
              </el-badge>
            </el-tooltip>
            <el-tooltip content="拣货确认" placement="top">
              <el-button v-auth="50200070111" size="mini" plain type="primary" icon="el-icon-info" circle @click="handleOpenDetail(scope.row, 'edit')"></el-button>
            </el-tooltip>
          </template>
        </table-column>
      </el-table>
    </div>
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('framework')
export default {
  data () {
    return {
      // pageSize: 10,
      // currentPage: 1,
      storeKey: 'picking',
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    pageSize: Number,
    currentPage: Number,
  },
  methods: {

    // 当前页码
    handleCurrentChange (currentPage) {
      // this.currentPage = currentPage
      const query = { 'page.limitCount': this.pageSize, 'page.currentPage': currentPage }
      this.$emit('getList', query)
    },

    // 每页显示条数
    handleSizeChange (pageSize) {
      // this.pageSize = pageSize
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentPage }
      this.$emit('getList', query)
    },

    // 打开详情
    handleOpenDetail (row, type) {
      // if (~~row.status === 60) {
      //   this.$message('不符合状态，不能拣货确认')
      //   return false
      // }
      const url = this.$API.stockOut.picking.infoList
      const param = { creator: row.creator, modifier: row.modifier }
      this.$https.post(url, param).then(res => {
        row = { ...row, ...res.data }
        this.$emit('handleOpenDetail', type, row)
      })
    },

    // checkbox勾选,存储id
    handleSelectChange (selection) {
      const selectedIds = selection.map(item => item.soNo).join(',')
      this.$emit('handleSelectChange', selectedIds, selection)
    },

    // 附件管理
    toFile (row) {
      const config = {
        orderNo: row.allocId, // 组件需要的当前选择的业务单号
      }
      this.$upload(config)
    },
  }
}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .blue{
      cursor: pointer;
      color:#0682ea
    }
</style>
