<!-- 首页 -->
<template>
  <div class="mx-auto bg-gray-200">
    <main class="container mx-auto px-5 py-5 w-[1440px]">
      <div class="rounded-lg p-0 mx-auto mb-5 w-full">
        <h2 class="text-2xl font-bold mb-4 text-black line-clamp-1">
          {{ title }}
        </h2>
        <p class="text-gray-600 mb-4 line-clamp-1">
          {{ description }}
        </p>
        <div class="flex gap-5 mb-5">
          <div class="relative w-2/3 h-[510px] rounded-lg overflow-hidden">
            <swiper :modules="swiperModules" :pagination="{ clickable: true }" :navigation="true"
              :autoplay="{ delay: 3000, disableOnInteraction: false }" class="swiper-container w-full h-full"
              @swiper="onSwiper" @slideChange="onSlideChange">
              <swiper-slide v-for="(slide, index) in list3" :key="index">
                <el-image :src="slide.images" fit="cover" class="w-full h-full object-cover"
                  @click="getToDetail(slide)" />
                <!-- 使用 el-image 组件显示图片，并设置图片填充方式为覆盖 -->
              </swiper-slide>
            </swiper>
          </div>

          <div class="w-1/2 flex flex-col gap-2">
            <el-card v-for="(item, index) in quickLinks" :key="index"
              class="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
              shadow="hover">
              <a :href="item.url" target="_blank"
                class="flex items-center gap-4 p-1 bg-gradient-to-r from-blue-50 to-white rounded-lg">
                <div class="flex items-center gap-0 p-0 bg-gradient-to-r from-blue-50 to-white rounded-lg">
                  <el-icon :size="24" class="text-blue-600">
                    <component :is="item.icon" />
                  </el-icon>
                  <h4 :style="{ whiteSpace: 'pre-line' }"
                    class="font-bold text-base text-[#2f7ef6] flex items-center ml-3">
                    {{ item.title }}
                  </h4>
                </div>
              </a>
            </el-card>
          </div>
        </div>

        <div class="container mx-auto">
          <div class="grid grid-cols-12 gap-5">
            <!-- 辟谣专区 -->
            <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)] col-span-8">
              <div class="flex justify-between items-center mb-4">
                <!-- <h2 class="text-xl font-bold" style="color: #2f7ef6">辟谣专区</h2> -->
                <div class="relative">
                  <h2 class="text-xl font-bold" style="color: #2f7ef6">辟谣专区</h2>
                  <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div>
                </div>
                <el-button v-if="pyList.length > 0" type="primary" class="!rounded-button" text
                  @click="goToTyMoreList(1)">更多 ></el-button>
              </div>
              <div class="space-y-4">
                <div v-for="(item, index) in pyList" :key="index"
                  class="flex items-start space-x-3 pb-4 border-b last:border-b-0 relative" @click="getToDetail(item)">
                  <div v-if="item.images" class="flex-shrink-0 w-[150px] h-[90px]">
                    <img :src="item.images" class="w-full h-full object-cover rounded" />
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center space-x-2 relative">
                      <el-tag size="small" type="danger" class="!rounded-full">辟谣</el-tag>
                      <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                        placement="top-start">
                        <h3 class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                          {{ item.contentTitle }}
                        </h3>
                      </el-tooltip>
                      <div class="absolute right-10 top-0">
                        <!-- transform旋转45度 -->
                        <img :src="yyIcon" class="w-[85px] h-[85px] object-contain transform rotate-[-20deg]"
                          alt="谣言标识" />
                      </div>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 line-clamp-2">
                      {{ item.contentDescription }}
                    </p>

                    <div class="mt-2 flex items-center space-x-4">

                       <span class="text-[12px] text-[#2f7ef6] flex items-center">
                        <el-icon class="mr-1">
                          <View />
                        </el-icon>
                       线索来源：{{ item.contentSource }} 
                      </span>

                      <span class="text-[12px] text-gray-500 flex items-center">
                        <el-icon class="mr-1">
                          <Clock />
                        </el-icon>
                        {{ item.contentDatetime }}
                      </span>

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

                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 权威发布 -->
            <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)] col-span-4">
              <div class="flex justify-between items-center mb-4">
                <div class="relative">
                  <h2 class="text-xl font-bold" style="color: #2f7ef6">权威发布</h2>
                  <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div>
                </div>
                <el-button v-if="qwList.length > 0" type="primary" class="!rounded-button" text
                  @click="goToTyMoreList(4)">更多 ></el-button>
              </div>
              <div class="space-y-4">
                <div v-for="(item, index) in qwList" :key="index"
                  class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="getToDetail(item)">
                  <div v-if="item.images != null" class="flex-shrink-0 w-24 h-16">
                    <img :src="item.images" class="w-full h-full object-cover rounded" />
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center space-x-2">
                      <el-tag size="small" type="primary" class="!rounded-full">权威发布</el-tag>
                      <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                        placement="top-start">
                        <h3 class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                          {{ item.contentTitle }}
                        </h3>
                      </el-tooltip>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 line-clamp-2">
                      {{ 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 class="grid grid-cols-12 gap-5 mt-5">
            <!-- 专家解读 -->
            <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)] col-span-6">
              <div class="flex justify-between items-center mb-4">
                <!-- <h2 class="text-xl font-bold" style="color: #2f7ef6">专家解读</h2> -->
                <div class="relative">
                  <h2 class="text-xl font-bold" style="color: #2f7ef6">专家解读</h2>
                  <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div>
                </div>
                <el-button v-if="zjList.length > 0" type="primary" class="!rounded-button" text
                  @click="goToTyMoreList(0)">更多></el-button>
              </div>
              <div class="space-y-4">
                <div v-for="(item, index) in zjList" :key="index"
                  class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="getToDetail(item)">
                  <div v-if="item.images != null" class="flex-shrink-0 w-24 h-16">
                    <img :src="item.images" class="w-full h-full object-cover rounded" />
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center space-x-2">
                      <el-tag size="small" type="danger" class="!rounded-full">专家解读</el-tag>
                      <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                        placement="top-start">
                        <h3 class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                          {{ item.contentTitle }}
                        </h3>
                      </el-tooltip>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 line-clamp-2">
                      {{ 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 class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)] col-span-6">
              <div class="flex justify-between items-center mb-4">
                <div class="relative">
                  <h2 class="text-xl font-bold" style="color: #2f7ef6">法律法规</h2>
                  <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div>
                </div>
                <el-button v-if="flfgList.length > 0" type="primary" class="!rounded-button" text
                  @click="goToTyMoreList(2)">更多</el-button>
              </div>
              <div class="space-y-4">
                <div v-for="(item, index) in flfgList" :key="index"
                  class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="getToDetail(item)">
                  <div v-if="item.images != null" class="flex-shrink-0 w-24 h-16">
                    <img :src="item.images" class="w-full h-full object-cover rounded" />
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center space-x-2">
                      <el-tag size="small" type="primary" class="!rounded-full">法律法规</el-tag>
                      <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                        placement="top-start">
                        <h3 class="text-base font-medium hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                          {{ item.contentTitle }}
                        </h3>
                      </el-tooltip>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 line-clamp-2">
                      {{ 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 class="grid grid-cols-3 gap-3" v-if="false">
          <el-card v-for="(section, index) in list1" :key="index"
            class="h-full rounded-xl p-0 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
            <template #header>
              <div class="flex justify-between items-center">
                <span class="text-xl font-bold text-primary">{{
                  section.title
                }}</span>
                <el-button type="primary" text @click="goToTyMoreList(index)">更多 ></el-button>
              </div>
            </template>
            <el-scrollbar height="400px">
              <div class="space-y-4">
                <div v-for="(item, index) in section.items" :key="index" class="group cursor-pointer flex items-center"
                  @click="getToDetail(item)">
                  <!-- <span class="bg-gray-400 mr-2 w-1 h-1"></span> -->
                  <!-- <div class="bg-gray-400 mr-2 w-1 h-1"></div> -->
                  <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                    placement="top-start">
                    <div class="text-sm group-hover:text-blue-600 line-clamp-1 text-gray-600 ml-2">
                      {{ item.contentTitle }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex justify-between items-center mb-5">
          <h3 class="text-xl font-bold text-primary">读图识谣</h3>
          <el-button type="primary" text @click="goToTyMoreList(3)">更多 ></el-button>
        </div>
        <div class="relative">
          <swiper :modules="swiperModules" :slidesPerView="4" :spaceBetween="24" :navigation="true"
            :autoplay="{ delay: 3000 }" class="service-swiper">
            <swiper-slide v-for="(item, index) in list2" :key="index">
              <div class="h-full hover:shadow-lg transition-shadow cursor-pointer" @click="getToDetail(item)">
                <div class="w-full mb-4 overflow-hidden rounded-lg h-56">
                  <img v-if="item.images" :src="item.images" class="w-full h-full object-cover object-top" />
                </div>
                <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                  placement="top-start">
                  <h4 class="font-bold mb-1 line-clamp-1 text-black">
                    {{ item.contentTitle }}
                  </h4>
                </el-tooltip>
                <p class="text-[12px] text-gray-600 line-clamp-1">
                  {{ item.contentDescription }}
                </p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import {
  View,
  Clock,
  Document,
  UserFilled,
  Lock,
  List,
  Service,
  Bell,
  Collection,
} from "@element-plus/icons-vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, lhpylbt, dtsy, zjjd, pyzq, flfg, qwfb } from "@/utils/config";
import { useRouter, useRoute } from "vue-router";
import yyIcon from "@/assets/imgs/yy-icon.png";

const title = ref();
const description = ref();
const list1 = ref([
  {
    title: "辟谣专区",
    items: [],
  },
  {
    title: "专家解读",
    items: [],
  },
  {
    title: "法律法规",
    items: [],
  },
]);

const pyList = ref([]);
const qwList = ref([]);
const zjList = ref([]);
const flfgList = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const router = useRouter();
const route = useRoute();
const swiperModules = [Pagination, Navigation, Autoplay];

const onSwiper = (swiper) => {
  const index = swiper.activeIndex;
  title.value = list3.value[index]?.contentTitle;
  description.value = list3.value[index]?.contentDescription;
};
const onSlideChange = (swiper) => {
  console.log(swiper.activeIndex);
  const index = swiper.activeIndex;
  title.value = list3.value[index]?.contentTitle;
  description.value = list3.value[index]?.contentDescription;
};

//专家解读、辟谣专区、法律法规 更多
function goToTyMoreList(index: number) {
  switch (index) {
    case 0: //专家解读
      // router.push({
      //   path: "/py/expert",
      // });
      router.push({
        path: "/py/expert",
        query: {
          categoryTitle: "专家解读",
          categoryId: zjList.value.length > 0 ? zjList.value[0].categoryId : "0",
          activeNav: 0,
        },
      });
      break;
    case 1: //辟谣专区
      router.push({
        path: "/py/rumor",
        query: {
          categoryTitle: "辟谣专区",
          categoryId: pyList.value.length > 0 ? pyList.value[0].categoryId : "0",
          activeNav: 1,
        },
      });
      break;
    case 2: //法律法规
      router.push({
        path: "/py/law",
        query: {
          categoryTitle: "法律法规",
          categoryId: flfgList.value.length > 0 ? flfgList.value[0].categoryId : "0",
          activeNav: 2,
        },
      });
      break;
    case 3: //读图识谣
      router.push({
        path: "/py/reading",
        query: {
          categoryTitle: "读图识谣",
          categoryId: list2.value.length > 0 ? list2.value[0].categoryId : "0",
          activeNav: 3,
        },
      });
      break;
    case 4: //权威发布
      router.push({
        path: "/py/authority",
        query: {
          categoryTitle: "权威发布",
          categoryId: qwList.value.length > 0 ? qwList.value[0].categoryId : "0",
          activeNav: 4,
        },
      });
      break;
  }
}

const quickLinks = [
  {
    icon: Document,
    title: "网络谣言曝光台",
    url: "https://www.piyao.org.cn/yybgt/index.htm",
  },
  {
    icon: UserFilled,
    title: "中央网信办举报中心官网违法和不良信息举报入口",
    url: "https://www.12377.cn",
  },
  {
    icon: Lock,
    title: "辟谣求证入口",
    url: "https://www.piyao.org.cn/2020yqpy",
  },
  {
    icon: List,
    title: "山西省互联网违法和不良信息举报中心举报入口",
    url: "https://www.sxgov.cn/node_280205.htm",
  },
  {
    icon: Service,
    title: "涉企侵权举报专区",
    url: "https://www.sxgov.cn/node_319806.htm",
  },
  {
    icon: Bell,
    title: "涉历史虚无主义有害信息举报专区",
    url: "https://topic.sxgov.cn/node_319310.htm",
  },
  {
    icon: Collection,
    title: "网络谣言和虚假信息举报专区",
    url: "https://topic.sxgov.cn/node_319499.htm",
  },
];

getList(zjjd, 6, 1);
getList(pyzq, 6, 1);
getList(qwfb, 6, 1);
getList(flfg, 6, 1);
getList2(dtsy, 6, 1);
getList3(5, 1); //轮播图

//获取专家解读、辟谣专区、法律法规
function getList(value: string, pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: value,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response) => {
    switch (value) {
      case pyzq:
        pyList.value = response.data.rows;
        pyList.value.forEach((item: any) => {
          if (item.contentImg) {
            item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
          }
        });
        break;
      case qwfb:
        qwList.value = response.data.rows;
        // list1.value[0].items = response.data.rows;
        break;
      case zjjd:
        zjList.value = response.data.rows;
        // list1.value[1].items = response.data.rows;
        break;
      case flfg:
        flfgList.value = response.data.rows;
        // list1.value[2].items = response.data.rows;
        break;
    }
  });
}

//获取读图识谣
function getList2(value: string, pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: value,
    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);
      }
    });
    list2.value = rowsList;
  });
}

//获取首页轮播图
function getList3(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: lhpylbt,
    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);
      }
    });
    list3.value = rowsList;
  });
}

function getToDetail(item: any) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    router.push({
      path: "/py/news/detail",
      query: {
        type: "0",
        id: item.id,
      },
    });
  }
}
</script>
<style>
.tooltip-width {
  max-width: 800px;
  font-size: 14px;
}

.hero-bg {
  background: linear-gradient(135deg, #001f3f, #0047ab);
}

:deep(.el-card) {
  border: 1px solid rgba(0, 31, 63, 0.1);
  transition: all 0.3s ease;
}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

:deep(.el-card.is-hover-shadow:hover) {
  box-shadow: 0 8px 16px rgba(0, 31, 63, 0.12);
  transform: translateY(-2px);
}

:deep(.el-card.is-hover-shadow) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-card:hover) {
  border-color: rgba(0, 31, 63, 0.3);
  box-shadow: 0 12px 28px rgba(0, 31, 63, 0.15);
}

:deep(.el-card__body) {
  padding: 16px;
}

:deep(.el-link.el-link--default:hover) {
  color: #0047ab;
}

:deep(.service-swiper .swiper-button-prev),
:deep(.service-swiper .swiper-button-next) {
  background-color: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #001f3f;
  /* left: 95%; */
}

:deep(.service-swiper .swiper-button-prev:after),
:deep(.service-swiper .swiper-button-next:after) {
  font-size: 16px;
}

:deep(.service-swiper .swiper-button-prev) {
  /* left: -20px; */
}

:deep(.service-swiper .swiper-button-next) {
  /* right: -20px; */
}

:deep(.service-swiper .swiper-button-disabled) {
  opacity: 0;
}
</style>
