<template>
  <div class="mainView">
    <bread-crumb />
    <div class="tebleBox">
      <el-table
        border
        :data="tableData"
        highlight-current-row
        @row-click="lookArticle"
      >
        <el-table-column
          prop="collectionTitle"
          label="征集标题"
          show-overflow-tooltip
        />
        <el-table-column
          show-overflow-tooltip
          :formatter="filterData"
          align="center"
          prop="startTime"
          label="开始日期"
          width="220"
        />
        <el-table-column
          show-overflow-tooltip
          :formatter="filterData"
          align="center"
          prop="progressStatus"
          label="征集状态"
          width="180"
        />
      </el-table>
      <div class="paginationBox">
        <el-pagination
          background
          :total="pageData.total"
          :page-size="pageData.size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="sizes,total, jumper,prev, pager, next"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="myzj">
import "@/style/hdjl/myzj.less";
import api from "@/api/hdjl.js";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";

const tableData = ref([]);
const router = useRouter();
const pageData = reactive({
  total: 0,
  size: 10,
  current: 1,
});
onMounted(() => {
  getPageList();
});

// 获取页面信息
function getPageList() {
  api.getSitePage(pageData).then((res) => {
    if (res.code == 200) {
      pageData.size = res.data.size;
      pageData.total = res.data.total;
      tableData.value = res.data.records;
      pageData.current = res.data.current;
    }
  });
}

// 过滤数据
function filterData(row, column) {
  if (column.property != "progressStatus") {
    return row.startTime.substring(0, 10);
  } else {
    return row.progressStatus == 0
      ? "未开始"
      : row.progressStatus == 1
        ? "征集中"
        : "已结束";
  }
}
// 分页
function handleCurrentChange(val) {
  pageData.current = val;
  getPageList();
}

// 改变页数
function handleSizeChange(val) {
  pageData.size = val;
  getPageList();
}
// 查看文章详情
function lookArticle(row) {
  router.push({ path: "/hdjl/myzj/details", query: { id: row.id } });
}
</script>
<style scoped></style>
