<template>
  <div class="left-menu">
    <el-menu
      v-show="route.path !== ''"
      unique-opened
      text-color="#666"
      active-text-color="#4c84ff"
      class="el-menu-vertical-demo"
      :default-active="route.path"
      :collapse="isCollapse"
      :collapse-transition="false"
      @select="handleSelect"
    >
      <SidebarItem :list="routers" :is-collapse="isCollapse" />
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarItem from './SidebarItem.vue'
import { usePermissionStore } from '@/stores/permission'
import { useUserStore } from '@/stores/user'
import { getRouter } from '@/utils/crypto'
import type { RouterItem } from '@/utils/crypto'

defineProps<{
  isCollapse: boolean
}>()

const route = useRoute()
const router = useRouter()
const permStore = usePermissionStore()
const userStore = useUserStore()

const routers = computed(() => permStore.routers)
const curTheme = computed(() => userStore.curTheme)
const multipleTag = computed(() => permStore.multipleTag)

function handleSelect(path: string) {
  const pathObj = getRouter(routers.value, path)
  const curPathObj = multipleTag.value.find((item: RouterItem) => item.path === path)
  if (route.path !== path) {
    if (!curPathObj && pathObj) {
      permStore.SET_MULTIPLE_TAG([...multipleTag.value, pathObj])
    }
    permStore.SET_CUR_TAG(path)
    router.push({ path })
  }
}
</script>

<style scoped lang="less">
.left-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.el-menu-item:hover),
:deep(.el-menu-item:focus) {
  background: #e4f2ff;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  user-select: none;
  cursor: pointer;
  outline: none;
  caret-color: transparent;
}

:deep(.el-menu--inline .is-active) {
  position: relative;
  background: #e8f1fe;
  font-weight: normal;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: @theme-color;
  }
}
</style>
