<template>
  <div class="mainView">
    <bread-crumb />
    <div class="tebleBox">
      <el-table
        border
        :data="pageData.tableData"
        highlight-current-row
        @row-click="lookArticle"
      >
        <el-table-column
          align="center"
          prop="id"
          label="信件编号"
          width="220"
          show-overflow-tooltip
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="title"
          label="征集标题"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="letterTime"
          label="写信时间"
          width="220"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="replyTime"
          label="回复时间"
          width="220"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          :formatter="filterData"
          prop="replyStatus"
          label="回复状态"
          width="180"
        />
      </el-table>
      <div class="paginationBox">
        <el-pagination
          background
          layout="sizes,total,jumper,prev, pager, next"
          :page-size="pageData.pagination.size"
          :total="pageData.pagination.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 30, 40, 50]"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import api from "@/api/hdjl.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { onMounted, reactive } from "vue";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";

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

onMounted(() => {
  getTableList();
});

function getTableList() {
  api.getMailboxList(pageData.pagination).then((res) => {
    if (res.code == 200) {
      pageData.tableData = res.data.records;
      pageData.pagination.size = res.data.size;
      pageData.pagination.total = res.data.total;
      pageData.pagination.current = res.data.current;
    }
  });
}

// 查看详情
function lookArticle(row) {
  if (row.replyStatus == 1) {
    router.push({ path: "/hdjl/ldxx/letterContent", query: { id: row.id } });
  } else {
    ElMessage.warning("该条信件还未回复");
  }
}

// 分页
function handleCurrentChange(val) {
  pageData.pagination.current = val;
  getTableList();
}

// 改变页数
function handleSizeChange(val) {
  pageData.pagination.size = val;
  getTableList();
}
// 过滤数据
function filterData(row, column) {
  return row.replyStatus == 0 ? "未回复" : "已回复";
}
</script>
<style scoped></style>
