<template>
  <div id="classNumBox">
    <el-table
      max-height="600"
      v-loading="loading"
      ref="multipleTable2"
      :data="tableData"
      border
      :header-cell-style="{
        'font-size': '14px',
        'background-color': '#eee',
        padding: '8px',
        color: '#333',
      }"
    >
      <el-table-column
        v-for="(item, index) in tableSet"
        :width="item.width"
        :key="index"
        :label="item.label"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.scope === 'time'">{{
            $methodsTools.onlyForma(scope.row[item.prop])
          }}</span
          ><span v-else>{{ scope.row[item.prop] }}</span></template
        >
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      loading: false,
      tableSet: [
        {
          label: "班级名称",
          prop: "className",
        },
        {
          label: "报名开始时间(班级有效期开始时间)",
          prop: "classStartTime",
          scope: "time",
        },
        {
          label: "报名结束时间(班级有效期结束时间)",
          prop: "classEndTime",
          scope: "time",
        },
      ],
      tableData: [],
      formData: {
        status: "0,1",
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, //一共多少条
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      let data = JSON.parse(JSON.stringify(this.formData));
      data.goodsId = this.$parent.$parent.goodsId;
      this.$api
        .inquireGradegradeList(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.init();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
