<!--
 * @Author       : ldc 951052117@qq.com
 * @Date         : 2023-06-12 15:28:46
 * @LastEditors  : ldc 951052117@qq.com
 * @LastEditTime : 2024-04-16 11:38:29
 * @Description  : 侧边栏
-->
<template>
  <aside :style="{ width: isCollapse ? '64px' : '200px' }">
    <el-menu
      :default-active="activeIndex"
      router
      unique-opened
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#30383e"
      text-color="#ccc"
      active-text-color="#ccc"
    >
      <template v-for="item in asyncRoutes">
        <el-menu-item
          v-if="
            item.children?.length <= 1 && item.meta?.singleShow && !item.meta?.menuHide && item.meta?.type != 'subMenu'
          "
          :index="item.path"
        >
          <img
            class="mr10"
            :src="
              imgSrc == item.path
                ? getAssetsFile(item.meta.imgSrc + '-w.png')
                : getAssetsFile(item.meta.imgSrc + '.png')
            "
          />
          <div class="item-title">{{ item.meta.title }}</div>
        </el-menu-item>
        <el-sub-menu v-else-if="item.meta && !item.meta?.menuHide" :index="item.path">
          <template #title>
            <img
              class="mr10"
              :src="
                imgSrc == item.path
                  ? getAssetsFile(item.meta.imgSrc + '-w.png')
                  : getAssetsFile(item.meta.imgSrc + '.png')
              "
            />
            <span class="item-title">{{ item.meta.title }}</span>
          </template>
          <template v-for="subItem in item.children">
            <el-menu-item
              class="item-title"
              v-if="!subItem.meta?.menuHide && subItem.meta?.type != 'subMenu'"
              :index="subItem.path"
            >
              {{ subItem.meta.title }}
            </el-menu-item>
            <SubMenu v-else-if="subItem.meta?.type == 'subMenu'" :submenuData="subItem"></SubMenu>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </aside>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { DocumentRemove, Menu as IconMenu, Notebook, Setting } from '@element-plus/icons-vue'
import { useMenu } from '@/layout/hook/hook.aside.js'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { storeToRefs } from 'pinia'
import usePub from '@/utils/pub-use.js'
import SubMenu from './subMenu.vue'

const $router = useRouter()
const $route = useRoute()
const userStore = useUserStore()
let { asyncRoutes } = storeToRefs(userStore)
const getAssetsFile = usePub.getAssetsFile
const imgSrc = ref('')
if (!asyncRoutes.value.length) {
  asyncRoutes.value = JSON.parse($utils.decryptByDES.CBC(sessionStorage.getItem('asyncRoutes')))
}

const activeIndex = ref()

watchEffect(() => {
  if (!$route.matched.length) return
  // imgSrc.value = $route.path//选中图标高亮判断
  activeIndex.value = $route.path
  // console.log(activeIndex.value, 'watchEffect')
})
const isCollapse = ref(false)
// hook函数使用
useMenu(isCollapse)
</script>

<style lang="scss" scoped>
aside {
  width: 200px;
  height: 100vh;
  background: #30383e;
  transition: all 0.5;
  overflow-y: auto;
}

.mr10 {
  margin-right: 10px;
}

.el-menu {
  border: none;
  background: #30383e;

  .item-title {
    white-space: normal;
    line-height: 14px;
    font-size: 14px;
  }

  .is-active {
    background-color: darken(#5584ff, 10%);

    :deep(.el-sub-menu__title) {
      color: #fff !important;
      background-color: darken(#1d2429, 10%) !important;
    }
  }
}

.el-menu--inline {
  .el-menu-item {
    &:hover {
      background: darken(#1d2429, 10%);
    }
  }
}
</style>
