<template>
  <div class="featureBox">
    <el-menu :default-active="activeMenu">
      <template v-for="menu in menuList">
        <!-- 只有一级菜单 -->
        <el-menu-item
          v-if="!menu.children"
          :index="menu.path"
          @click="jumpRoute(menu)"
        >
          <img :src="getImgUrl(menu)" :alt="menu.name" />
          <span class="muneName">{{ menu.name }}</span>
        </el-menu-item>
        <!-- 有二级菜单 -->
        <el-sub-menu v-else :index="menu.path">
          <template #title>
            <img :src="getImgUrl(menu)" :alt="menu.name" />
            <span class="muneName">{{ menu.name }}</span>
          </template>
          <el-menu-item-group
            v-for="menuSub in menu.children"
            :key="menuSub.path"
          >
            <el-menu-item :index="menuSub.path" @click="jumpRoute(menuSub)">{{
              menuSub.name
            }}</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { ref, watch, reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const activeMenu = ref("zfxxgkzn");

const menuList = reactive([
  {
    active: true,
    path: "zfxxgkzn",
    icon: "zfxxgkzn",
    name: "政府信息公开指南",
  },
  {
    active: false,
    path: "zfxxgkzd",
    icon: "zfxxgkzd",
    name: "政府信息公开制度",
  },
  {
    active: false,
    path: "zfxxgknb",
    icon: "zfxxgknb",
    name: "政府信息公开年报",
  },
  {
    active: false,
    path: "fdgknr",
    icon: "fdgknr",
    name: "法定公开内容",
    children: [
      {
        path: "fdgknr/lzyj",
        name: "履职依据",
      },
      {
        path: "fdgknr/jgzz",
        name: "机构职能",
      },
      {
        path: "fdgknr/ldzc",
        name: "领导之窗",
      },
      {
        path: "fdgknr/zdgkwj",
        name: "主动公开文件",
      },
      // {
      //   path: "fdgknr/xzcf",
      //   name: "行政处罚",
      // },
      // {
      //   path: "fdgknr/xzxk",
      //   name: "行政许可",
      // },
      {
        path: "fdgknr/ghjh",
        name: "规划计划",
      },
      {
        path: "fdgknr/czys",
        name: "财政预决算",
      },
    ],
  },
  {
    active: false,
    path: "zcwj",
    icon: "zcwj",
    name: "政策文件",
  },
  {
    active: false,
    path: "zcjd",
    icon: "zcjd",
    name: "政策解读",
  },
  {
    active: false,
    path: "xzgfxwj",
    icon: "xzgfxwj",
    name: "行政规范性文件",
  },
  {
    active: false,
    path: "ysqgk",
    icon: "ysqgk",
    name: "依申请公开",
  },
  {
    active: false,
    path: "zfwzgznb",
    icon: "zfwzgznb",
    name: "政府网站工作年报",
  },
]);
// 路由跳转
function jumpRoute(data) {
  activeMenu.value = data.path;
  router.push("/zwgk/" + data.path);
}
// 获取图片地址
function getImgUrl(data) {
  let url = "";
  if (data.active) {
    url = data.icon + "s";
  } else {
    url = data.icon;
  }
  return new URL(`../../../assets/hdjl/${url}.png`, import.meta.url).href;
}
// 监听 选中的菜单对应的图标高亮
watch(
  () => activeMenu.value,
  (newValue) => {
    let hasSlash = newValue.includes("/");
    let menuPath = hasSlash ? "fdgknr" : newValue;
    menuList.forEach((item) => {
      if (menuPath == item.path) {
        item.active = true;
      } else {
        item.active = false;
      }
    });
  },
  { immediate: true }
);
// 监听路由
watch(
  () => router.currentRoute.value.path,
  (newValue) => {
    let path = newValue.replace("/zwgk/", "");
    activeMenu.value = path == "info" ? "zfxxgkzn" : path;
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
@import url(@/style/zwgk/menuStyle.less);
</style>
