<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="mx-auto">
    <header class="hero-bg text-white">
      <div class="container mx-auto px-8 py-8">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()">
              太原市互联网联合辟谣平台
            </h1>
            <!-- <p class="text-[14px] opacity-90 cursor-pointer font-bold" @click="goToHome()">
              主办：{{ inject("VITE_APP_TITLE") }}
            </p> -->
            <!-- <p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> -->
          </div>
          <!-- <p class="text-[14px] opacity-90 cursor-pointer font-bold" @click="goToHome()">
            主办：{{ inject("VITE_APP_TITLE") }}
          </p> -->
          <!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> -->
        </div>
         <p class="text-[16px] opacity-90 cursor-pointer font-bold mt-0" @click="goToHome()">
              主办：{{ inject("VITE_APP_TITLE") }}
            </p>
      </div>
      <nav class="bg-white/10 backdrop-blur-sm">
        <div class="container mx-auto px-8">
          <div class="flex justify-between items-center">
            <div v-for="(item, index) in navItems" :key="index"
              class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
              :class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
              <span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
            </div>
            <div class="flex relative w-[240px] mr-[50px]">
              <el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search"
                @keyup.enter="handleSearch">
                <template #append>
                  <el-icon class="mr-1 text-blue-400 hover:text-blue-600 cursor-pointer" style="color: #2E5BF6;"
                    @click="handleSearch">
                    <Search />
                  </el-icon>
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <router-view />
    <Footer></Footer>

    <!-- <footer class="bg-gray-100 py-8">
      <div class="container mx-auto px-8">
        <div class="text-center text-sm text-gray-600">
          <p class="mb-2">联系电话：0351-5236042 技术支持：0351-5236044</p>
          <p class="mb-2">
            互联网新闻信息服务许可证：14120180001
            增值电信业务经营许可证：晋B2-20060016189
          </p>
          <p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
        </div>
      </div>
    </footer> -->
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch, inject } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { useRouter, useRoute } from "vue-router";
import Footer from "@/components/footer.vue";
import { ElMessage } from "element-plus";

import {
  Document,
  UserFilled,
  Lock,
  List,
  Service,
  Bell,
  Collection,
  Search,
} from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home";


// 定义导航项接口
interface NavItem {
  categoryTitle: string;
  categoryId: string;
  id?: string;
  categorySort?: number;
}

// 定义API响应接口
interface ApiResponse {
  data: {
    rows: NavItem[];
  };
}

const activeIndex = ref(0);
const router = useRouter();
const route = useRoute();
const navItems = ref<NavItem[]>([]);
const searchQuery = ref("");

function handleSearch() {
  // 搜索功能逻辑
  console.log("搜索内容:", searchQuery.value);
  // 可以在这里添加路由跳转或API调用等搜索逻辑
  if (searchQuery.value) {
    router.push({
      path: "/py/search",
      query: { searchQuery: searchQuery.value },
    });
  } else {
    ElMessage({
      message: "请输入搜索内容",
      type: "warning",
    });
  }
}

//activeNav 监听
watch(
  () => route.query.categoryId,
  (newVal, oldVal) => {
    setNactiveNav();
  }
);

function setNactiveNav(navItem?: NavItem[]) {
  navItem = navItem || navItems.value;
  navItem.forEach((item: NavItem, index: number) => {
    console.log(item.categoryId);
    if (item.id == route.query.categoryId) {
      activeIndex.value = index;
    }
  });
}

function goToHome() {
  if (window.opener && !window.opener.closed) {
    window.opener.focus(); // 将焦点返回到原始窗口
    window.close(); // 关闭当前新窗口
  }
}

const data = {
  categoryFlag: HLW_LH_PYPT,
};

getTab(data).then((res: ApiResponse) => {
  console.log(res);
  const data = res.data.rows;
  // 用data内的categorySort排序
  data.sort((a: NavItem, b: NavItem) => (a.categorySort || 0) - (b.categorySort || 0));
  data.unshift({ categoryTitle: "首页", categoryId: "999" });

  // 将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
  const filterData = data
    .filter(
      (item: NavItem) =>
        item.categoryTitle !== "轮播图" &&
        item.categoryTitle !== "山西互联网联合辟谣平台"
    )
    .map((item: NavItem) => {
      item.categoryId = item.categoryId.toString();
      return item;
    });
  navItems.value = filterData;
  setNactiveNav(navItems.value);
  if (route.query.activeNav != null) {
    if (route.query.activeNav == "2") {
      activeIndex.value = 1;
    }
    if (route.query.activeNav == "3") {
      activeIndex.value = 2;
    }
  }
});

function navigateTo(index: number, item: NavItem) {
  if (index == 0) {
    router.push({
      path: "/py/pyhome",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
  } else {
    router.push({
      path: "/py/authority",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
  }
  activeIndex.value = index;
}
</script>
<style scoped>
.hero-bg {
  /* background: linear-gradient(135deg, #001f3f, #0047ab); */
  background: url("@/assets/imgs/py-hearder-bg.png");
}

: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;
}

: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;
}

.text-title {
  font-family: 'AlibabaPuHuiTi95';
}
</style>
