<template>
  <div>
    <div class="mrg-b">
      <!--<drop-filter-->
        <!--:columns="wholeLabels"-->
        <!--:storeKey="storeKey"-->
        <!--:storeLabels="storeLables"-->
        <!--@doFilter="labels => storeLables = labels"-->
      <!--&gt;</drop-filter>-->
      <el-table
        ref="table"
        stripe
        border
        :max-height="tableMaxHeight"
        :data="tableData"
        :filteredLabels="storeLables"
        @selection-change="handleSelectChange"
      >
        <table-column type="selection" fixed width="45" align="center"></table-column>
        <table-column label="加工任务ID" prop="kitTaskId">
          <template slot-scope="scope">
            <span class="blue" @click.stop="handleOpenDetail(scope.row)">{{scope.row.kitTaskId}}</span>
          </template>
        </table-column>
        <table-column label="加工单号 " prop="kitNo"></table-column>
        <table-column label="状态">
          <template slot-scope="scope">
            <p>{{$utils.keyMatcher(scope.row.status, $keys.stockOut.status).name}}</p>
          </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="子件" prop="subSku"></table-column>
        <table-column label="库位(源/目标)" prop="loc"></table-column>
        <table-column label="批次号/跟踪号" prop="lotNumTraceId"></table-column>
        <table-column label="包装单位" prop="uomDesc"></table-column>
        <table-column label="拣货数" prop="qtyPick"></table-column>
         <table-column
          label="操作"
          width="100"
          fixed="right">
              <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                  <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  plain
                  circle
                  @click="handleOperation(scope.row)"></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>
    <ProcessingDetails
    :isProcess="isProcess"
    :currentData="currentData"
    :flag="flag"
    @handleDistribution="handleDistribution"
    @handleProcessclose="handleProcessclose"
    ></ProcessingDetails>
  </div>
</template>
<script>
import ProcessingDetails from './childrenForm/processingDetails'
export default {
  components: {
    ProcessingDetails
  },
  data () {
    return {
      isProcess: false,

      remove: [],
      headData: {},
      goodsData: [],
      currentData: {},
      storeKey: 'libraryGoods',
      flag: 1
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    pageSize: Number,
    currentPage: Number,
  },
  methods: {
    handleDistribution (data) {
      const url = this.$API.maintain.KitTaskPickingList.pickingBy
      const query = { 'page.currentPage': this.currentPage }
      let newData = []
      newData.push(data)
      const param = { kitTasks: JSON.stringify(newData) }
      this.$https.post(url, param).then(res => {
        this.$emit('getList', query)
      })
    },
    // 展示详情
    handleOpenDetail (row) {
      this.isProcess = true
      this.currentData = row
      this.flag = 1
    },
    handleOperation (row) {
      if (row.status !== '40') {
        return this.$message('不是完全分配状态，不能操作')
      }
      this.isProcess = true
      this.currentData = row
      this.flag = 2
    },
    handleProcessclose () {
      this.isProcess = false
    },
    // 每页显示条数
    handleSizeChange (pageSize) {
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentPage }
      this.$emit('getList', query)
    },

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

    // checkbox勾选
    handleSelectChange (selection) {
      const ids = selection
      this.$emit('handleSelectChange', ids)
    },

  }
}
</script>
<style lang="scss" scoped>
.mrg-b {
  margin-bottom: 20px;
}
.mrg-l {
  margin-left: 10px;
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
</style>
