<template>
  <div class="pageBox" v-if="showMoreData == ''">
    <div class="textArea areaBox">
      <div class="titleBox">
        <span class="name">文字解读</span>
        <span class="more" @click="lookMore('text')">更多>></span>
      </div>
      <el-table
        :data="pageData.textData"
        :show-header="false"
        @row-click="columnEvent"
      >
        <el-table-column prop="title" show-overflow-tooltip align="left" />
        <el-table-column prop="publishTime" width="180" align="right" />
      </el-table>
    </div>
    <div class="imgArea areaBox">
      <div class="titleBox">
        <span class="name">图文解读</span>
        <span class="more" @click="lookMore('img')">更多>></span>
      </div>
      <div class="contentList">
        <div
          class="contentBox"
          v-for="item in pageData.imgData"
          :key="item.id"
          @click="columnEvent(item)"
        >
          <el-image :src="item.coverImages" />
          <div class="titleBox">
            <p>
              一图读懂 |
              {{ item.title }}
            </p>
            <span>{{ item.publishTime.substring(0, 10) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else>
    <table-module
      :pageData="tableData"
      @columnEvent="columnEvent"
      @paginationEvent="paginationEvent"
    />
  </div>
</template>
<script setup>
import "@/style/zwgk/zcjd.less";
import api from "@/api/zwgk.js";
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import tableModule from "@/components/tableModule/publicInfo.vue";

const showMoreData = ref("");
const router = useRouter();
const pageData = reactive({
  textData: [],
  imgData: [],
});
const tableData = ref({
  pagination: {
    total: 0,
    size: 20,
    current: 1,
  },
  tableData: [],
  mouduleName: "政府信息公开年报",
});

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

function getTableList() {
  // 文字解读
  api.textInterpretation().then((res) => {
    if (res.code == 200) {
      pageData.textData = res.data.records;
    }
  });
  // 图文解读
  api.imageInterpretation().then((res) => {
    if (res.code == 200) {
      pageData.imgData = res.data.records;
    }
  });
}

// 查看更多
function lookMore(type) {
  showMoreData.value = type;
  let apiFun = "";
  tableData.value.pagination = {
    total: 0,
    size: 20,
    current: 1,
  };
  if (type == "text") {
    apiFun = api.textInterpretation;
    tableData.value.mouduleName = "文字解读";
  } else {
    apiFun = api.imageInterpretation;
    tableData.value.mouduleName = "图文解读";
  }
  apiFun(tableData.pagination).then((res) => {
    tableData.value.pagination.size = res.data.size;
    tableData.value.pagination.total = res.data.total;
    tableData.value.pagination.current = res.data.pages;
    res.data.records.map((item) => {
      item.documentName = item.title;
      item.publishDate = item.publishTime.substring(0, 10);
      tableData.value.tableData.push(item);
    });
  });
}

// 分页
function paginationEvent(val) {
  tableData.value.pagination.current = val;
  getTableList();
}

// 查看详情
function columnEvent(data) {
  //定义一个路径
  let href = router.resolve({
    path: "/articleDetails",
    query: { type: "zcjdgl", id: data.id },
  }).href;
  //打开新的页面 到 href 这个页面
  window.open(href, "_blank");
}
</script>
