<!-- 代码已包含 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="mb-6">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item
            :to="{
              path: '/py/pyhome',
              // query: {
              //   categoryTitle: '首页',
              //   categoryId: '999',
              // },
            }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{
            route.query.categoryTitle
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="flex gap-6">
        <div class="flex-1">
          <div class="bg-white rounded-lg shadow-sm">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
              @click="getToDetail(item)"
            >
              <div
                v-if="item.images != null"
                class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg mr-3"
              >
                <img :src="item.images" class="w-full h-full object-cover" />
              </div>
              <div class="flex-grow">
                <h2
                  class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
                >
                  {{ item.contentTitle }}
                </h2>
                <p class="text-gray-600 text-sm line-clamp-2">
                  {{ item.contentDescription }}
                </p>
                <div class="mt-3 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>
                  <!-- <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Document /></el-icon>
                    {{ item.contentTags }}
                  </span> -->
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }}
                  </span>
                </div>
              </div>
              <!-- <div class="w-24 flex-shrink-0 text-right">
                <el-tag
                  :type="news.category.type"
                  size="small"
                  class="whitespace-nowrap"
                >
                  {{ news.category.name }}
                </el-tag>
              </div> -->
            </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 class="w-80 flex-shrink-0 space-y-3">
          <!-- 权威发布 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-red-500"><Star /></el-icon>
              权威发布
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in list0"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <div
                  v-if="item.images"
                  class="h-32 mb-2 overflow-hidden rounded-lg"
                >
                  <img :src="item.images" class="w-full h-full object-cover" />
                </div>
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 辟谣专区 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-red-500"><Star /></el-icon>
              辟谣专区
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in list1"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <div
                  v-if="item.images"
                  class="h-32 mb-2 overflow-hidden rounded-lg"
                >
                  <img :src="item.images" class="w-full h-full object-cover" />
                </div>
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 专家解读-->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
              专家解读
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in list2"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <div
                  v-if="item.images"
                  class="h-32 mb-2 overflow-hidden rounded-lg"
                >
                  <img :src="item.images" class="w-full h-full object-cover" />
                </div>
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 法律法规 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold mb-4 flex items-center text-black">
              <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
              法律法规
            </h2>
            <div class="space-y-4">
              <div
                v-for="(item, index) in list3"
                :key="index"
                class="group cursor-pointer"
                @click="getToDetail(item)"
              >
                <div
                  v-if="item.images"
                  class="h-32 mb-2 overflow-hidden rounded-lg"
                >
                  <img :src="item.images" class="w-full h-full object-cover" />
                </div>
                <div
                  class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
                >
                  {{ item.contentTitle }}
                </div>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">
                  {{ item.contentDescription }}
                </p>
                <div class="mt-1 flex items-center space-x-4">
                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><Clock /></el-icon>
                    {{ item.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1"><View /></el-icon>
                    {{ item.contentHit }} 阅读
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import {
  Clock,
  Document,
  View,
  Star,
  Location,
  Bell,
  ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import { ca } from "element-plus/es/locales.mjs";
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 props = defineProps({
  title: String,
  pathType: String,
  type0: String,
  type1: String,
  type2: String,
  type3: String,
  title1: String,
  title2: String,
  title3: String,
});

// const breadcrumbItems = ref([
//   { title: "首页", path: "/py/pyhome" },
//   { title: props.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);
};
const list0 = ref([]);
const list = ref([]);
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);

getList(pageSize.value, pageNo.value);
getList0();
getList1();
getList2();
getList3();

watch(
  () => route.query.categoryId,
  (newVal, oldVal) => {
    getList(pageSize.value, pageNo.value);
  }
);

//获取主列表
function getList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    categoryId: route.query.categoryId,
    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);
      }
    });
    list.value = rowsList;
  });
}

//获取测边列表 0
function getList0() {
  const datas = {
    contentDisplay: "0",
    contentType: qwfb,
    pageSize: 3,
    pageNo: 1,
  };
  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);
      }
    });
    list0.value = rowsList;
  });
}

//获取测边列表 1
function getList1() {
  const datas = {
    contentDisplay: "0",
    contentType: props.type1,
    pageSize: 3,
    pageNo: 1,
  };
  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);
      }
    });
    list1.value = rowsList;
  });
}

//获取测边列表 2
function getList2() {
  const datas = {
    contentDisplay: "0",
    contentType: props.type2,
    pageSize: 3,
    pageNo: 1,
  };
  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);
      }
    });
    list2.value = rowsList;
  });
}

//获取测边列表 3
function getList3() {
  const datas = {
    contentDisplay: "0",
    contentType: props.type3,
    pageSize: 2,
    pageNo: 1,
  };
  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);
      }
    });
    list3.value = rowsList;
  });
}

function getToDetail(item: any) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    router.push({
      path: "/py/news/detail",
      query: {
        categoryTitle: route.query.categoryTitle,
        // titlePath: "/home/news",
        categoryId: route.query.categoryId,
        title: props.title,
        pathType: props.pathType,
        type1: props.type1,
        type2: props.type2,
        title1: props.title1,
        title2: props.title2,
        id: item.id,
        page: route.query.page,
      },
    });
  }
}
</script>
<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
