<template>
  <div class="topTip">
    <h4 class="title_time">
      2024-03-26&emsp;&emsp;农历二月廿四&emsp;&emsp;♿无障碍浏览
    </h4>
  </div>

  <div class="mainView">
    <div class="header" @mouseenter="coloseMenu">
      <div class="title_te" @click="jumpHome">
        <img class="title" src="../../assets/logo/login.jpg" alt="" />
        <img class="title_ls" src="../../assets/logo/title_ls.png" alt="" />
        <span style="    margin-top: 17%;
    font-size: 26px;
    color: #606266;">{{ '(测试版)' }}</span>
      </div>
      <div class="absolute">
        <input type="text" class="searchData" v-model="searchValue" placeholder="请输入关键词" @keyup.enter="searchFun" />
        <img class="img_j" src="../../assets/logo/fdj.svg" alt="" @click="searchFun" />
      </div>
    </div>

    <div class="menus">
      <ul>
        <li class="menus-box" :class="{ actives: isHovered == item.key }" v-for="item in menuList" :key="item.key"
          @click="jumpPage(item)" @mouseenter="showMenus(item)">
          <img :src="getUrl(item.key)" alt="" />
          {{ item.name }}
        </li>
      </ul>
      <el-collapse-transition>
        <div class="position" v-show="showMenuBox" @mouseleave="coloseMenu">
          <div class="triangle"></div>
          <span v-for="menu in menuList[3].childer" :key="menu.path" @click="jumpPage(menu)">{{ menu.name }}</span>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>
<script setup lang="ts" name="zwgk">
import { useRouter, useRoute } from "vue-router";
import { ref, watch, onMounted } from "vue";
import { login } from "../../api/Important.js";
import useLoginStore from "../../store/user.js";
import { localCache } from "../../utils/cache";
const store = useLoginStore();
const route = useRoute();
const router = useRouter();
const isHovered = ref("1");
const showMenuBox = ref(false);
const searchValue = ref();
onMounted(() => {
  loginDel();
});
const loginDel = async () => {
  const acc = {
    account: "superAdmin",
    password:
      "3c753663e57b750cb855312b268530d9c29c66d5e33930b2d9e8f3003c0710eb2995ef3b15c15f83a1df5e25093a666de1adc6d737ed2f6d3fda3d5a1bfeb95d4fbd139ac4bd9090516aeebcb834daea74360b273c5e6beaae9cfb0f9426bfc854974306af6d",
    device: "PC",
    validCode: "",
    validCodeReqNo: "",
  };
  const { data } = await login(acc);
  store.token = data;
  localCache.setCache("token", data);
};

watch(
  () => route,
  (newVal) => {
    let del = newVal.fullPath;
    //url.includes('/new/')
    switch (true) {
      case del.includes("/home"):
        isHovered.value = "1";
        break;
      case del.includes("/jggk"):
        isHovered.value = "2";
        break;
      case del.includes("/News"):
        isHovered.value = "3";
        break;
      case del.includes("/zwgk"):
        isHovered.value = "4";
        break;
      case del.includes("/hdjl"):
        isHovered.value = "5";
        break;
      default:
        isHovered.value = "0";
        break;
    }
  },
  { immediate: true, deep: true }
);
const menuList = [
  {
    key: "1",
    path: "/",
    name: "首页",
  },
  {
    key: "2",
    path: "/jggk",
    name: "机构概况",
  },
  {
    key: "3",
    path: "/News",
    name: "要闻动态",
  },
  {
    key: "4",
    path: "/zwgk",
    name: "政务公开",
    childer: [
      {
        path: "/zwgk/zfxxgkzn",
        name: "政府信息公开指南",
      },
      {
        path: "/zwgk/zfxxgkzd",
        name: "政府信息公开制度",
      },
      {
        path: "/zwgk/zfxxgknb",
        name: "政府信息公开年报",
      },
      {
        path: "/zwgk/fdgknr",
        name: "法定公开内容",
      },
      {
        path: "/zwgk/zcwj",
        name: "政策文件",
      },
      {
        path: "/zwgk/zcjd",
        name: "政策解读",
      },
      {
        path: "/zwgk/xzgfxwj",
        name: "行政规范性文件",
      },
      {
        path: "/zwgk/ysqgk",
        name: "依申请公开",
      },
      {
        path: "/zwgk/zfwzgznb",
        name: "政府网站工作年报",
      },
    ],
  },
  {
    key: "5",
    path: "/hdjl",
    name: "互动交流",
  },
];

function showMenus(el) {
  showMenuBox.value = false;
  if (el.path == "/zwgk") {
    showMenuBox.value = true;
  }
}
function coloseMenu(el) {
  showMenuBox.value = false;
}

function searchFun() {
  router.push({
    path: "/search",
    query: {
      value: searchValue.value,
    },
  });
}

function jumpPage(item) {
  if (item.key) {
    isHovered.value = item.key;
  }
  router.push(item.path);
}
function jumpHome() {
  router.push({ path: "/home" });
}
function getUrl(name) {
  // return ''
  return new URL(`../../assets/menu/nav${name}.png`, import.meta.url).href;
}
</script>
<style scoped lang="less">
@import url("@/style/header/index.less");
</style>
