<template>
  <div class="comp-content">
    <div class="menu-option">
      <div class="collapse-btn" :class="{ active: isCollapse }" @click="toggleCollapseFun">
        <el-icon :size="24">
          <Fold />
        </el-icon>
      </div>
    </div>
    <div class="menu-list">
      <el-menu class="menu" :default-active="activePath" :unique-opened="true" :collapse="isCollapse">
        <template v-for="(menu) in routerData" :key="menu.path">
          <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
            <template #title>
              <el-icon><component :is="menu.icon" /></el-icon>
              <span>{{ $t(`菜单.${menu.title}`) }}</span>
            </template>
            <el-menu-item
              v-for="(subMenu) in menu.children"
              :key="subMenu.path"
              :index="subMenu.path"
              @click="goPageFun(subMenu)"
            >
              {{ $t(`菜单.${subMenu.title}`) }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else-if="!menu.hideInMenu" :index="menu.path" @click="goPageFun(menu)">
            <el-icon><component :is="menu.icon" /></el-icon>
            <span>{{ $t(`菜单.${menu.title}`) }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import routerData from '@/router/routerData';
import { CommonStore } from '@/stores/common';

const router = useRouter();
const store = CommonStore();

const activePath = ref(store.currentPagePath);
const isCollapse = ref(false);

watch(() => store.currentPagePath, (path) => {
  activePath.value = path;
});

const goPageFun = (data: any) => {
  router.push({
    path: data.path,
  });
};

const toggleCollapseFun = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss" scoped>
.comp-content {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  .menu-option {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    height: 60px;
    padding: 0 20px;
    border-right: solid 1px var(--el-border-color-light);
    border-bottom: solid 1px var(--el-border-color-light);
    .collapse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      transition: all 0.3s;
      cursor: pointer;
      &.active {
        transform: rotate(-180deg);
      }
    }
  }
  .menu-list {
    flex: 1;
    width: 100%;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: solid 1px var(--el-border-color-light);
    &::-webkit-scrollbar {
      width: 0;
    }
    .menu:not(.el-menu--collapse) {
      width: 254px;
    }
  }
}
</style>
