<template>
  <Card>
    <span slot="title">考试公告</span>
    <div slot="content">
      <div class="examination_management">
        <div class="main">
          <!-- 表格 -->
          <div class="table">
            <el-table
              style="width: 99.9%;min-height: 400px;"
              stripe
              :header-cell-style="headStyle"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              @row-click="getDetails"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="title" label="标题" width="300">
              </el-table-column>
              <el-table-column prop="publisher" label="来源" width="300">
              </el-table-column>
              <el-table-column prop="publish_time" label="发布时间" show-overflow-tooltip>
              </el-table-column>
            </el-table>
            <div class="btm_tools">
              <el-button size="small" @click="toggleSelection()"
                >取消选择</el-button
              >
              <we-Pagination
                :currentPage="page"
                :pageSize="pageSize"
                :total="total"
                @currentChange="currentChange($event)"
                @pageSizeChange="pageSizeChange($event)"
              >
                ></we-Pagination
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WePagination from "@/components/WePagination";
import {
  getAnnouncementList, //获取公告列表
} from "@/api/home";
import local from "@/utils/local";

export default {
  components: {
    Card,
    WePagination,
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      // 分页数据
      total: 20, // 总数据条数
      pageSize: 8, // 每页条数
      page: 1, // 当前页
    }
  },
  created() {
    this.fetchData();
  },
  methods:{
    // 获取数据
    async fetchData() {
      // 发送请求 获取列表
      let res = await getAnnouncementList({
        type: 2,
        curPage: 0,
        pageSize: 10,
      });
      // 解构数据
      let { code, data } = res;
      
      // 边界判断
      if (!data.res.list.length && this.page !== 1) {
        this.pageNum -= 1;
        this.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.total = data.res.total;
        this.tableData = data.res.list;
      }
    },
    // 取消选择
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    getDetails(row) {
      local.set("ggdetails", row);
      this.$router.push({
        path:"/details",
      });
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body {
  padding: 0;
  .examination_management {
    display: flex;
    .main {
      padding: 10px;
      flex: 1;
      height: 100%;
      .btm_tools {
        margin: 16px 0 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>