<template>
  <div class="side-bar-box">
    <AppLogo />
    <div
      class="sider-item"
      v-for="(item, index) in menuList"
      :key="index"
      @click="goToPath(item.url)"
      :class="getActivePageClass(item) ? 'active-page' : ''"
    >
      <IconFontSymbol
        fontSize="22"
        :icon="getActivePageClass(item) ? item.activeIcon : item.icon"
        :fillColor="getActivePageClass(item) ? '#1C8DFF' : '#8F96A1'"
      />
      <div class="text"> {{ item.title }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import AppLogo from './Logo.vue';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useRoute } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { PlatformMenuList } from '/@/router/routes/application';
  const go = useGo();
  const route = useRoute();

  const menuList = PlatformMenuList;
  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>
  .side-bar-box {
    width: 90px;
    height: 100vh;
    background: #fff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

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

      .text {
        font-weight: 500;
        font-size: 13px;
        color: #8f96a1;
      }
    }

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