<template>
  <div class="coil-table">
    <!-- 其他props -->
    <el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.title" :width="column.width" :align="column.align">
        <template slot-scope="scope">
          <!-- 特殊 prop 渲染逻辑 -->
          <template v-if="column.prop === 'enterCoilNo'">
            <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
          </template>
          <template v-else-if="column.prop === 'currentCoilNo'">
            <current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
          </template>
          <template v-else-if="column.prop === 'itemId'">
            <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
          </template>
          <template v-else-if="column.prop === 'status'">
            {{ scope.row.status === 0 ? '在库' : '已出库' }}
          </template>
          <!-- 默认渲染 -->
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="showPagination"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";

export default {
  name: 'CoilTable',
  components: {
    ProductInfo,
    RawMaterialInfo,
    CoilNo,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 1000,
    }
  },
  computed: {
    // 内部实现前端分页逻辑
    tableData() {
      return this.data.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
    },
    // 计算总页数
    totalPage() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    // 计算总条数
    total() {
      return this.data.length
    },
    // 是否展示分页组件
    showPagination() {
      return this.totalPage > 1
    }
  },
  methods: {
    // 分页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
    },
    // 分页当前页改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
    },
  }
}
</script>