<template>
  <div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" width="80" label="序号" fixed="left">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>

      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="!item.slot"
          :key="index"
          align="center"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
        <el-table-column v-else :key="index" align="center" :label="item.label">
          <template v-slot="props">
            <slot :name="item.slot" v-bind="props"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  props: {
    tableData: { type: Array, default: () => [] },
    listLoading: { type: Boolean, default: false },
    columns: { type: Array, default: () => [] },
    total: { type: Number, default: 0 },
    // api: { type: Function },
    // params: { type: Object, default: undefined },
  },
  data() {
    return {
      // 页面
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  // mounted() {
  //   if (this.api && typeof this.api === "function") {
  //     this.getApi();
  //   }
  // },
  methods: {
    // getApi() {
    //   this.api(this.params).then((res) => {
    //     console.log(res);
    //   });
    // },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
    fetchData(item) {
      // console.log(item);
      this.$emit("fetchData", item);
    },
  },
};
</script>
