<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8 w-[1440px]">
      <bread-crumb :breadcrumbItems="breadcrumbItems" />

      <div class="grid grid-cols-1 gap-8">
        <!-- 分类卡片 -->
        <div class="grid grid-cols-4 gap-6">
          <div
            v-for="(card, index) in newsList"
            :key="index"
            class="bg-white rounded-lg shadow-lg p-6 transition-transform hover:scale-105"
            @click="getToDetail(card)"
          >
            <div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
              <img
                v-if="card.images"
                :src="card.images"
                class="w-full h-full object-cover object-top"
              />
            </div>
            <el-tooltip
              popper-class="tooltip-width"
              effect="dark"
              :content="card.contentTitle"
              placement="top-start"
            >
              <h3 class="text-lg font-semibold mb-2 text-black line-clamp-1">
                {{ card.contentTitle }}
              </h3>
            </el-tooltip>

            <p class="text-gray-600 text-sm line-clamp-1">
              {{ card.contentDescription }}
            </p>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="flex justify-center mt-8">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            background
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, dtsy } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";

const router = useRouter();
const route = useRoute();
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const newsList = ref([]);

const breadcrumbItems = ref([
  { title: "首页", path: "/py/pyhome" },
  { title: "读图识谣" },
]);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
  pageSize.value = pageSize.value;
  pageNo.value = val;
  getList(pageSize.value, pageNo.value);
};

getList(12, 1);

//获取专家解读
function getList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: dtsy,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    newsList.value = rowsList;
  });
}
function getToDetail(item: any) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    router.push({
      path: "/py/news/detail",
      query: {
        title: "读图识谣",
        pathType: "/py/reading",
        title1: "辟谣专区",
        title2: "专家解读",
        type1: "pyzq",
        type2: "zjjd",
        id: item.id,
      },
    });
  }
}
</script>
<style scoped></style>
