<template>
  <div>
    <div class="mrg-b">
      <el-table ref="table" stripe border :max-height="tableMaxHeight" :data="tableData"  @selection-change="handleSelectChange">
        <table-column type="selection" fixed width="45" align="center"></table-column>
        <table-column label="加工单号 " prop="kitNo">
          <template slot-scope="scope">
            <span class="blue" @click.stop="handleOpenDetail(scope.row, scope.row.kitNo)">{{scope.row.kitNo}}</span>
          </template>
        </table-column>
        <table-column label="物流单号 " prop="logisticNo"></table-column>
        <table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{$utils.keyMatcher(scope.row.status, $keys.maintain.status).name}}
          </template>
        </table-column>
        <table-column label="类型">
          <template slot-scope="scope">
            <p>{{ $utils.keyMatcher(scope.row.kitType, $keys.maintain.kitType).name }}</p>
          </template>
        </table-column>
        <table-column label="数量EA" prop="qty"></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="kitLoc"></table-column>
        <table-column label=" 计划加工时间" prop="planTime"></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="handleProcess(scope.row.kitNo)"></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>
export default {
  data () {
    return {

    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    pageSize: Number,
    currentPage: Number,
    total: Number,
    type: String,
  },
  computed: {

  },
  mounted () {

  },
  methods: {
    handleSelectChange (val) {
      this.$emit('selecChange', val)
    },
    handleProcess (kitNo) {
      const url = this.$API.maintain.KitTaskPaList.byKitNo
      const param = { kitNos: JSON.stringify([kitNo]) }
      console.log(param)
      this.$https.post(url, param).then(res => {
        // this.handleQuery()
      })
    },
    handleOpenDetail (data) {
      this.$emit('handleOpenDetail', 'detail', data)
    },
    // 每页显示条数
    handleSizeChange (pageSize) {
      const query = { 'page.limitCount': pageSize, 'page.currentPage': this.currentPage }
      this.$emit('getList', query, this.type)
    },

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

  }

}
</script>
<style lang="scss" scoped>
.mrg-b {
  margin-bottom: 20px;
}
.mrg-l {
  margin-left: 10px;
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
.wrapper div{
  display: inline-block;
  width: 8px;
  height: 30px;
  margin: 0 2px;
  background-color: #8c8c8c
}
.overtime div{
  background-color:#bebebe;
}
</style>
