<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
        :data="tableData"
        :filteredLabels="storeLables"
        @selection-change="handleSelectChange"
      >
        <table-column type="selection" width="45" align="center"></table-column>
        <table-column label="质检单号" prop="qcNo">
          <template slot-scope="scope">
            <p class="blue" @click="handleDateil(scope.row)">{{scope.row.qcNo}}</p>
          </template>
        </table-column>
        <table-column label="状态">
          <template slot-scope="scope">
              <p>{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.qcStatus).name }}</p>
              <p>{{ $utils.keyMatcher(scope.row.auditStatus, $keys.stockIn.auditStatus).name }}</p>
          </template>
        </table-column>
        <table-column label="单据号" prop="orderNo"></table-column>
        <table-column label="单据类型" prop="orderType">
          <template slot-scope="scope">
              <p>{{ $utils.keyMatcher(scope.row.orderType, $keys.stockIn.orderType).name }}</p>
          </template>
        </table-column>
        <table-column label="质检阶段" prop="qcPhase">
          <template slot-scope="scope">
              <p>{{ $utils.keyMatcher(scope.row.qcPhase, $keys.stockIn.qcPhase).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="orderTime"></table-column>
        <table-column label="预计质检时间">
          <template slot-scope="scope">
            <p>从：{{scope.row.fmEtq}}</p>
            <p>到：{{scope.row.toEtq}}</p>
          </template>
        </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="handleEdit(scope.$index, 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>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      removeSkuIds: [],
      headData: {},
      goodsData: [],
      storeKey: 'libraryGoods'
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number
  },
  methods: {

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

    // 当前页码
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      const query = { 'page.currentPage': this.currentPage }
      this.$emit('getList', query)
    },
    getData (url, param) {
      return this.$https.post(url, param)
    },
    // 编辑行
    handleEdit (index, row) {
      const headUrl = this.$API.stockIn.Manage.getHead
      const goodsUrl = this.$API.stockIn.Manage.getGoods
      const qcUrl = this.$API.stockIn.Manage.getQc
      const userUrl = this.$API.stockIn.Manage.getUser
      const param = { qcNo: row.qcNo, isAfterQcRegister: 'Y', 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param), this.getData(qcUrl, param)]).then(res => {
        const head = res[0]
        const goods = res[1].rows
        const qc = res[2].rows
        const param = { creator: res[0].creator, modifier: res[0].modifier }
        this.$https.post(userUrl, param).then(res => {
          const user = res.data
          this.$emit('handleOpenEditForm', 'edit', head, goods, qc, user)
        })
        //
      })
    },

    handleDateil (row) {
      const headUrl = this.$API.stockIn.Manage.getHead
      const goodsUrl = this.$API.stockIn.Manage.getGoods
      const qcUrl = this.$API.stockIn.Manage.getQc
      const userUrl = this.$API.stockIn.Manage.getUser
      const param = { qcNo: row.qcNo, isAfterQcRegister: 'Y', 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(goodsUrl, param), this.getData(qcUrl, param)]).then(res => {
        const head = res[0]
        const goods = res[1].rows
        const qc = res[2].rows
        const param = { creator: res[0].creator, modifier: res[0].modifier }
        this.$https.post(userUrl, param).then(res => {
          const user = res.data
          this.$emit('handleOpenDateil', 'detail', head, goods, qc, user)
        })
        //
      })
    },

    // checkbox勾选
    handleSelectChange (selection) {
      const ids = selection.map(item => item.qcNo).join(',')
      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>
