<template>
  <el-menu
      :collapse="state.isCollapse"
      :collapse-transition="false"
      :default-active="state.defaultActive"
      :unique-opened="getThemeConfig.isUniqueOpened"
      background-color="transparent"
      class="font-medium"
      router
  >
    <template v-for="val in menuLists">
      <!-- 可展开菜单 -->
      <el-sub-menu v-if="val.children && val.children.length > 0" :key="val.path" :index="val.path" class="custom-menu">
        <template #title>
          <SvgIcon :name="val.meta.icon" :style="[
                  val.meta.icon.startsWith('bi') ? {
                    'vertical-align': 'middle',
                    'margin-right': '5px',
                    'width': '24px',
                    'text-align': 'center',
                  } : {}
                ]"/>
          <span>{{ $t(val.meta.title) }}</span>
        </template>
        <SubItem :chil="val.children"/>
      </el-sub-menu>

      <template v-else>
        <div class="menu-hover rounded-md">
          <el-menu-item :key="val.path" :index="val.path" class="">
            <SvgIcon
                :name="val.meta.icon"
                :style="[
                  val.meta.icon.startsWith('bi') ? {
                    'vertical-align': 'middle',
                    'margin-right': '5px',
                    'width': '24px',
                    'text-align': 'center',
                  } : {}
                ]"
            />
            <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)" #title>
              <span>{{ $t(val.meta.title) }}</span>
            </template>
            <template v-else #title>
              <a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
            </template>
          </el-menu-item>
        </div>
      </template>
    </template>
  </el-menu>
</template>

<script lang="ts" name="navMenuVertical" setup>
import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';

// 引入组件
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));

// 定义父组件传过来的值
const props = defineProps({
  // 菜单列表
  menuList: {
    type: Array<RouteRecordRaw>,
    default: () => []
  }
});

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const state = reactive({
  // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
  defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
  isCollapse: false
});

// 获取父级菜单数据
const menuLists = computed(() => {
  return <RouteItems>props.menuList;
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
  return themeConfig.value;
});
// 菜单高亮（详情时，父级高亮）
const setParentHighlight = (currentRoute: RouteToFrom) => {
  const { path, meta } = currentRoute;
  const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
  if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
  else return path;
};
// 打开外部链接
const onALinkClick = (val: RouteItem) => {
  other.handleOpenLink(val);
};
// 页面加载时
onMounted(() => {
  state.defaultActive = setParentHighlight(route);
});
// 路由更新时
onBeforeRouteUpdate((to) => {
  // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
  state.defaultActive = setParentHighlight(to);
  const clientWidth = document.body.clientWidth;
  if (clientWidth < 1000) themeConfig.value.isCollapse = false;
});
// 设置菜单的收起/展开
watch(
    themeConfig.value,
    () => {
      document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
    },
    {
      immediate: true
    }
);
</script>

<style scoped>
.menu-hover:hover {
  background-color: #F2F3F5;
}

:deep(.custom-menu) {
  --el-menu-hover-bg-color: #F2F3F5;
}
</style>
