<template>
  <div class="bg-container">
    <!-- 顶部横幅 -->
    <header class="shadow">
      <div class="container mx-auto flex items-center" style="height:180px;width: 1440px;">
        <img src="@/assets/logo1.png" alt="国徽" class="h-[100px] mr-6" />
        <div>
          <div class="text-title text-[45px] text-white mb-[-15px]">
            太原市互联网应急指挥和举报中心
          </div>
          <div class="text-title text-[45px] text-white">
            (太原市互联网宣传研究中心)
          </div>
        </div>
      </div>
    </header>
    <!-- 主导航 -->
    <nav class="text-white">
      <div class="container mx-auto px-[30px]">
        <div class="flex items-center justify-between h-[65px]">
          <!-- 主导航菜单 -->
          <ul class="flex justify-between w-full max-w-[calc(100%-320px)] h-14">
            <li v-for="(item, index) in navItems" :key="index"
              class="flex-1 flex items-center justify-center cursor-pointer px-4 relative transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
              @click="navigateTo(index, item)">
              <span class="text-white font-bold text-[20px]">{{ item.categoryTitle }}</span>
              <!-- 点击在对应的选中下划线 -->
              <div
                class="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[30px] h-[3px] bg-white transition-all duration-300 rounded-[10px]"
                :class="{ 'opacity-100': activeNav === index, 'opacity-0': activeNav !== index }">
              </div>
            </li>
          </ul>
          <!-- 搜索框 -->
          <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>

    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue";
// @ts-ignore
import { getTab } from "@/api/home/home";
// @ts-ignore
import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
const router = useRouter();
const route = useRoute();
const searchQuery = ref("");
const activeNav = ref(0);
const navItems = ref();

//activeNav 监听
watch(
  () => route.query.categoryId,
  (newVal, oldVal) => {
    if (route.query.activeNav != null) {
      if (route.query.activeNav == "0") {
        activeNav.value = 2;
      }
      if (route.query.activeNav == "1") {
        activeNav.value = 1;
      }
    }
    setNactiveNav();
  }
);

function setNactiveNav(navItem?: any) {
  navItem = navItem || navItems.value;
  navItem.forEach((item: any, index: number) => {
    if (item.id == route.query.categoryId) {
      activeNav.value = index;
    }
  });
}

function navigateTo(index: number, item: any) {
  // const routes = [
  //   { path: "/home/home", query: { id: item.id } },
  //   { path: "/home/news", query: { id: item.id } },
  //   { path: "/home/tynews", query: { id: item.id } },
  //   { path: "/home/sxnews", query: { id: item.id } },
  //   { path: "/home/announcements", query: { id: item.id } },
  // ];
  // if (index == 0) {
  //   router.push({
  //     path: "/home/home",
  //     query: { categoryId: item.id, categoryTitle: item.categoryTitle },
  //   });
  // } else {
  //   router.push({
  //     path: "/home/news",
  //     query: { categoryId: item.id, categoryTitle: item.categoryTitle },
  //   });
  // }

  if (index == 0) {
    router.push({
      path: "/home/home",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
  } else if (index == 1) {
    // 通知公告
    router.push({
      path: "/home/news",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
  } else if (index == 2) {
    //举报专区
    router.push({
      path: "/home/jb",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
  } else if (index == 3) {
    //辟谣平台 -router跳转新标签页/py/pyhome
    const routeUrl = router.resolve({
      path: "/py/pyhome",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
    window.open(routeUrl.href, '_blank');
  } else if (index == 4) {
    const routeUrl = router.resolve({
      path: "/wm/wmhome",
      query: { categoryId: item.id, categoryTitle: item.categoryTitle },
    });
    window.open(routeUrl.href, '_blank');
  }

  activeNav.value = index;
}

const data = {
  categoryFlag: HLW_YJZH_JBZX,
};

getTab(data).then((res: any) => {
  console.log(res);
  const data: any[] = res.data.rows;
  // //用data内的categorySort排序
  data.sort((a, b) => a.categorySort - b.categorySort);
  //将data内id等于“1876561611942682626”的数据过滤不在navItems.value中显示（轮播图和后台设置的不显示标签的新闻分类）
  data.unshift({ categoryTitle: "首页", categoryId: "999" });
  const filterData = data.filter((item) => item.categoryDisplay !== "disable");
  navItems.value = filterData;
  setNactiveNav(navItems.value);
});

function handleSearch() {
  if (searchQuery.value) {
    router.push({
      path: "/home/search",
      query: { searchQuery: searchQuery.value },
    });
  } else {
    ElMessage({
      message: "请输入搜索内容",
      type: "warning",
    });
  }
}
</script>
<style scoped>
.text-title {
  font-family: 'AlibabaPuHuiTi95';
}

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

.bg-container {
  background: url('@/assets/imgs/bg_header.jpg');
}
</style>
