<template>
  <div class="sider-layout-box">
    <div class="sider-layout">
      <AppLogo />
      <div
        class="sider-item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="goToPath(item.url)"
        :class="getActivePageClass(item) ? 'active-page' : ''"
        ><a-popover placement="right">
          <template #content>{{ item.title }} </template>
          <IconFontSymbol
            fontSize="22"
            :icon="item.icon"
            :fillColor="getActivePageClass(item) ? '#1C8DFF' : '#8F96A1'"
          />
        </a-popover>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import AppLogo from './Logo.vue';
  import { useRoute } from 'vue-router';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { ApplicationMenuList } from '/@/router/routes/application';
  const go = useGo();
  const route = useRoute();
  const menuList = ApplicationMenuList;
  function goToPath(url) {
    go(url, false);
  }
  function getActivePageClass(item) {
    if (route.name === item.name || route.path.startsWith(item.path)) {
      return true;
    } else {
      return false;
    }
  }
</script>
<style lang="less" scoped>
  .sider-layout-box {
    width: 50px;
    height: 100%;
    background: #fff;
    border-radius: 0;

    .sider-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .sider-item {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10px 5px;
      }

      .active-page {
        width: 40px;
        height: 40px;
        background: #f1f8ff;
        border-radius: 5px;
      }
    }
  }
</style>
