<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 轮播图 -->
    <div class="container mx-auto px-4 pt-5 w-[1440px]">
      <swiper :modules="swiperModules" :slides-per-view="1" :loop="true" :pagination="{ clickable: true }"
        :autoplay="{ delay: 3000 }" class="h-[390px] rounded-lg overflow-hidden">
        <swiper-slide v-for="(slide, index) in slides" :key="index">
          <div class="relative w-full h-full">
            <img :src="slide.images" class="w-full h-full object-cover" @click="goToDetail(slide)" />
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
              <h3 class="text-white text-xl font-medium">
                {{ slide.contentTitle }}
              </h3>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 快捷入口 -->
    <div class="container mx-auto px-4 mt-5 w-[1440px]">
      <div class="grid grid-cols-3 gap-5">
        <div v-for="(entry, index) in quickEntries" :key="index"
          class="relative h-[160px] rounded-xl overflow-hidden group cursor-pointer transform transition-all duration-300 hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-xl"
          @click="handleClick(index, entry)">
          <img :src="entry.bg" :alt="entry.title"
            class="w-full h-full object-cover transition-all duration-300 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-br group-hover:backdrop-blur-[1px] transition-all">
            <div class="h-full flex flex-col text-white"
              :class="index == 0 ? 'items-start justify-center pl-8' : 'items-center justify-center'">
              <!-- <el-icon class="text-5xl mb-4 transform transition-transform duration-300 group-hover:scale-110">
                <component :is="entry.icon" />
              </el-icon> -->
              <span v-if="index == 0" class="text-4xl font-semibold px-6">{{
                entry.title
              }}</span>
              <span v-else-if="index == 1" class="text-4xl font-semibold text-center px-6">{{
                entry.title
              }}</span>
              <span v-else-if="index == 2" class="text-4xl font-semibold text-center px-6">{{
                entry.title
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新闻内容区 -->
    <div class="container mx-auto px-4 mt-5 grid grid-cols-3 gap-5 w-[1440px]">
      <!-- 最新新闻 -->
      <div class="col-span-2 bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
        <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="tyNews.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 tyNews" :key="index"
            class="flex items-start space-x-4 pb-1 border-b last:border-0" @click="goToDetail(item)">
            <img v-if="item.images != null" :src="item.images" class="w-32 h-24 object-cover rounded" />

            <div>
              <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle" placement="top-start">
                <h3 class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                  {{ item.contentTitle }}
                </h3>
              </el-tooltip>

              <p class="text-gray-600 text-sm 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="space-y-6">
        <!-- 热门新闻 -->
        <div class="bg-white rounded-lg p-5 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
          <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>
            <!-- <h2 class="text-xl font-bold" style="color: #2f7ef6">热门新闻</h2> -->
            <el-button v-if="hotNews.length > 0" type="primary" class="!rounded-button" text
              @click="goToTyMoreList(2)">更多</el-button>
          </div>
          <div class="space-y-1">
            <div v-for="(hot, index) in hotNews" :key="index" class="border-b last:border-0 pb-4"
              @click="goToDetail(hot)">
              <div>
                <el-tooltip popper-class="tooltip-width" effect="dark" :content="hot.contentTitle"
                  placement="top-start">
                  <h3 class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                    {{ hot.contentTitle }}
                  </h3>
                </el-tooltip>

                <p class="text-gray-600 text-sm line-clamp-2">
                  {{ hot.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>
                    {{ hot.contentDatetime }}
                  </span>

                  <span class="text-sm text-gray-500 flex items-center">
                    <el-icon class="mr-1">
                      <View />
                    </el-icon>
                    {{ hot.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)]" v-if="0">
          <h2 class="text-xl font-bold mb-4 text-black">视频新闻</h2>
          <div class="space-y-4">
            <div v-for="(video, index) in videoNews" :key="index" class="group cursor-pointer">
              <div class="relative">
                <img :src="video.cover" :alt="video.title" class="w-full h-32 object-cover rounded" />
                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/50 flex items-center justify-center">
                  <el-icon class="text-white text-4xl">
                    <VideoPlay />
                  </el-icon>
                </div>
              </div>
              <h3 class="mt-2 text-base font-medium group-hover:text-blue-600 text-black line-clamp-2">
                {{ video.title }}
              </h3>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 权威发布与辟谣专区 -->
    <div class="container mx-auto px-4 mt-5 w-[1440px]">
      <div class="grid grid-cols-2 gap-5">
        <!-- 权威发布 -->
        <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
          <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="authoritativeNews.length > 0" type="primary" class="!rounded-button" text
              @click="goToTyMoreList(3)">更多</el-button>
          </div>
          <div class="space-y-4">
            <div v-for="(item, index) in authoritativeNews" :key="index"
              class="flex items-center space-x-3 pb-3 border-b last:border-b-0" @click="goToDetail(item)">
              <!-- <el-icon class="text-blue-600 text-xl"><Document /></el-icon> -->
              <div>
                <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
                  placement="top-start">
                  <h3 class="text-lg font-medium mb-2 hover:text-blue-600 cursor-pointer text-black line-clamp-1">
                    {{ item.contentTitle }}
                  </h3>
                </el-tooltip>

                <p class="text-gray-600 text-sm 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)]">
          <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="rumourNews.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 rumourNews" :key="index"
              class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="goToDetail(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>
    </div>
    <!-- 友情链接 -->
    <div class="container mx-auto px-4 pt-5 pb-5 w-[1440px]">
      <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
        <!-- <h2 class="text-xl font-bold mb-4" style="color: #2f7ef6">友情链接</h2> -->
        <div class="relative mb-4">
          <div class="title report-orgs"><span>友情链接</span></div>
          <!-- <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>
        <div class="grid grid-cols-6 gap-3">
          <a v-for="(link, index) in friendLinks" :key="index" :href="link.webLinkUrl" target="_blank"
            class="text-gray-900 hover:text-white hover:bg-[#2f7ef6] text-center bg-white p-2 rounded-md shadow-[0_0_10px_rgba(5,157,254,0.22)] hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-xl">
            {{ link.name }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// @ts-ignore
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router";
import {
  VideoPlay,
  Message,
  Share,
  Link,
  Search,
  Clock,
  Document,
  View,
  Star,
  Location,
  Bell,
  ArrowRight,
} from "@element-plus/icons-vue";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/navigation";
// @ts-ignore
import { getLink } from "@/api/home/home";
// @ts-ignore
import { getNewsList } from "@/api/home/news/list";

// @ts-ignore
import {
  baseImageUrl,
  rdxw,
  sxxw,
  tzgg,
  tyxw,
  yjjblbt,
  pyzq,
  qwfb,
} from "@/utils/config";
import jbzqBg from "@/assets/imgs/jbzq-bg.png";
import pyptBg from "@/assets/imgs/pypt-bg.png";
import wmyhsBg from "@/assets/imgs/wmyhs-bg.png";

// Define interfaces for data structures
interface NewsItem {
  id: string | number;
  categoryId: string | number;
  categoryTitle?: string;
  contentTitle: string;
  contentDescription: string;
  contentDatetime: string;
  contentHit: number;
  contentImg?: string;
  contentOutLink?: string;
  images?: string;
}

interface LinkItem {
  id: string | number;
  webLinkUrl: string;
  name: string;
}

interface QuickEntry {
  title: string;
  icon: string;
  bg: string;
}


const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const searchQuery = ref("");
const activeNav = ref(0);
const handleClick = (index: number, entry: QuickEntry) => {
  switch (index) {
    case 0:
      router.push({ path: "/home/jb" });
      break;
    case 1:
      const wmHomePageUrl = router.resolve({ name: "wm" }).href;
      window.open(wmHomePageUrl, "_blank");
      break;
    case 2:
      const pyHomePageUrl = router.resolve({ name: "PyHome" }).href;
      window.open(pyHomePageUrl, "_blank");
      break;
  }
  // 处理点击事件
};
const tyNews = ref<NewsItem[]>([]);
const hotNews = ref<NewsItem[]>([]);
const authoritativeNews = ref<NewsItem[]>([]);
const rumourNews = ref<NewsItem[]>([]);

getTyNewsList(5, 1);

//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: tyxw,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    tyNews.value = rowsList;
  });
}

function goToDetail(item: NewsItem) {
  if (item.contentOutLink) {
    window.open(item.contentOutLink, "_blank");
  } else {
    router.push({
      path: "/home/news/detail",
      query: {
        type: 0,
        id: item.id,
      },
    });
  }
}
//太原更多
function goToTyMoreList(index: number) {
  switch (index) {
    case 1: //太原新闻-更多
      router.push({
        path: "/home/news",
        query: {
          categoryTitle: "太原新闻",
          // categoryId: tyNews.value.length > 0 ? tyNews.value[0].categoryId : "0",
          // activeNav: 0,
        },
      });
      break;
    case 2: //热门新闻-更多
      router.push({
        path: "/home/news",
        query: {
          categoryTitle: "热门新闻",
          // categoryId: hotNews.value.length > 0 ? hotNews.value[0].categoryId : "0",
          // activeNav: 1,
        },
      });
      break;
    case 3: //权威发布-更多
      // 打开新标签
      let routeData1 = router.resolve({
        path: "/py/authority",
        query: {
          categoryTitle: "权威发布",
          categoryId: authoritativeNews.value.length > 0 ? authoritativeNews.value[0].categoryId : "0",
          activeNav: 2,
        },
      });
      window.open(routeData1.href, "_blank");
      break;
    case 4: //辟谣专区-更多
      // 打开新标签
      let routeData2 = router.resolve({
        path: "/py/rumor",
        query: {
          categoryTitle: "辟谣专区",
          categoryId: rumourNews.value.length > 0 ? rumourNews.value[0].categoryId : "0",
          activeNav: 3,
        },
      });
      window.open(routeData2.href, "_blank");
      break;
  }
}

getHotsNewsList(5, 1);

//获取新闻热点
function getHotsNewsList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: rdxw,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    hotNews.value = rowsList;
  });
}

getQwList(5, 1);

//获取权威发布
function getQwList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: qwfb,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    authoritativeNews.value = rowsList;
  });
}

getPyList(5, 1);

//获取辟谣专区
function getPyList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: pyzq,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    rumourNews.value = rowsList;
  });
}

getLbtList(5, 1);

//获取首页轮播图
function getLbtList(pageSize: number, pageNo: number) {
  const datas = {
    contentDisplay: "0",
    contentType: yjjblbt,
    pageSize: pageSize,
    pageNo: pageNo,
  };
  getNewsList(datas).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    rowsList.forEach((item: any) => {
      if (item.contentImg) {
        item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
      }
    });
    slides.value = rowsList;
  });
}

getLinkLists();

//获取首页轮播图
function getLinkLists() {
  const page = {
    pageNo: 1,
    pageSize: 10000,
  };
  getLink(page).then((response: any) => {
    const data = response.data;
    const rowsList = data.rows;
    friendLinks.value = rowsList;
  });
}
const friendLinks = ref<LinkItem[]>([]);
const slides = ref<NewsItem[]>([]);

const quickEntries: QuickEntry[] = [
  {
    // title: "太原市互联网违法和不良信息举报平台",
    title: "举报专区",
    icon: "Share",
    // bg: "https://ai-public.mastergo.com/ai/img_res/e3d550fe8d11531c42a774641cf3790a.jpg",
    bg: jbzqBg,
  },
  {
    // title: "太原市互联网联合辟谣平台",
    title: "辟谣平台",
    icon: "Message",
    // bg: "https://ai-public.mastergo.com/ai/img_res/36f741de94394af113bc0d3c823df49a.jpg",
    bg: pyptBg,
  },
  {
    // title: "网民有话说",
    title: "网民有话说",
    icon: "Link",
    // bg: "https://ai-public.mastergo.com/ai/img_res/c907287d38d89eb460120dc7cf6b2d17.jpg",
    bg: wmyhsBg
  },

];
</script>
<style>
.tooltip-width {
  max-width: 800px;
  font-size: 14px;
}

.swiper {
  --swiper-theme-color: #ffffff;
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.title.report-orgs {
  background: repeat-x center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='20'%3E%3Cpath fill-rule='evenodd' fill='%2398BDFC' d='M9.776 19.672V.231h1.505v19.441H9.776zM5.224.231h1.505v19.441H5.224V.231zm-4.552 0h1.506v19.441H.672V.231z'/%3E%3C/svg%3E");
  /* border-top: 1px solid #A4C6FF; */
  color: #2F79F6;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  /* padding: 28px 0; */
}

.title.report-orgs span {
  background: #FFF;
  padding: 0 12px;
}
</style>
