<template>
  <div class="mainView">
    <div class="information">
      <el-card>
        <template #header>
          <span class="moduleName">领导信箱</span>
          <el-button
            link
            type="primary"
            @click="jumpModule('/hdjl/ldxx/moreLetters')"
          >
            查看更多</el-button
          >
        </template>
        <el-table
          border
          highlight-current-row
          @row-click="
            (row) => {
              lookArticle(row, 'mailbox');
            }
          "
          :data="pagination.mailboxTable"
        >
          <el-table-column
            prop="id"
            label="信件编号"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="title"
            label="信件标题"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="letterTime"
            label="写信日期"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :formatter="filterData"
            prop="replyStatus"
            label="回复状态"
            width="100"
            show-overflow-tooltip
          />
        </el-table>
      </el-card>
      <el-card>
        <template #header>
          <span class="moduleName"> 民意征集</span>
          <el-button link type="primary" @click="jumpModule('/hdjl/myzj/list')">
            查看更多</el-button
          >
        </template>
        <el-table
          border
          highlight-current-row
          :data="pagination.popularwillTable"
          @row-click="
            (row) => {
              lookArticle(row, 'popularwill');
            }
          "
        >
          <el-table-column
            prop="collectionTitle"
            label="征集标题"
            show-overflow-tooltip
          />
          <el-table-column
            show-overflow-tooltip
            :formatter="filterData"
            align="center"
            prop="startTime"
            label="开始日期"
            width="180"
          />
          <el-table-column
            show-overflow-tooltip
            :formatter="filterData"
            align="center"
            prop="progressStatus"
            label="征集状态"
            width="100"
          />
        </el-table>
      </el-card>
    </div>
    <div class="featureArea">
      <div class="feature" @click="jumpModule('/hdjl/ldxx')">
        <img src="@/assets/logo/wyxx1.png" />
        <span>领导信箱</span>
      </div>
      <div class="feature" @click="jumpModule('/hdjl/xfjb')">
        <img src="@/assets/logo/wyxx2.png" />
        <span>信访举报</span>
      </div>
      <div class="feature" @click="jumpModule('/hdjl/myzj')">
        <img src="@/assets/logo/wyxx4.png" />
        <span>民意征集</span>
      </div>
    </div>
  </div>
</template>
<script setup name="hdjl">
import api from "@/api/hdjl.js";
import "@/style/hdjl/index.less";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const pagination = reactive({
  mailbox: {
    size: 5,
    total: 0,
    current: 1,
  },
  mailboxTable: [],
  popularwill: {
    size: 5,
    total: 0,
    current: 1,
  },
  popularwillTable: [],
});
onMounted(() => {
  getTableList();
});
function getTableList() {
  api.getMailboxList(pagination.mailbox).then((res) => {
    if (res.code == 200) {
      pagination.mailboxTable = res.data.records;
      pagination.mailbox.size = res.data.size;
      pagination.mailbox.total = res.data.total;
      pagination.mailbox.current = res.data.current;
    }
  });
  api.getSitePage(pagination.popularwill).then((res) => {
    if (res.code == 200) {
      pagination.popularwill.size = res.data.size;
      pagination.popularwill.total = res.data.total;
      pagination.popularwillTable = res.data.records;
      pagination.popularwill.current = res.data.current;
    }
  });
}
// 查看详情
function lookArticle(row, type) {
  if (type == "mailbox") {
    if (row.replyStatus == 1) {
      router.push({ path: "/hdjl/ldxx/letterContent", query: { id: row.id } });
    } else {
      ElMessage.warning("该条信件还未回复");
    }
  } else {
    router.push({ path: "/hdjl/myzj/details", query: { id: row.id } });
  }
}

// 过滤数据
function filterData(row, column) {
  if (column.property == "startTime") {
    return row.startTime.substring(0, 10);
  } else if (column.property == "progressStatus") {
    return row.progressStatus == 0
      ? "未开始"
      : row.progressStatus == 1
        ? "征集中"
        : "已结束";
  } else {
    return row.replyStatus == 0 ? "未回复" : "已回复";
  }
}

// 跳转模块功能
function jumpModule(patd) {
  router.push(patd);
}
</script>
