<script setup name="elAside">
import { ref, watch } from 'vue'
import sidebar from '@/components/sidebar/index.vue'
import { useRoute } from 'vue-router'
import store from '@/store'
import { storeToRefs } from 'pinia'
const route = useRoute(),
  isCollapse = ref(false),
  active = ref(route.path.split('/')[route.path.split('/').length - 1]),
  { menuArr } = storeToRefs(store.menuStore),
  emits = defineEmits(['collapseFn']),
  clickFn = () => {
    isCollapse.value = !isCollapse.value
    emits('collapseFn', isCollapse.value)
  },
  sidebarMenu = ref([])
watch(
  route,
  (val) => {
    sidebarMenu.value =
      (menuArr.value.find((i) => i.name === val.meta.topMenu) &&
        menuArr.value.find((i) => i.name === val.meta.topMenu).children) ||
      []
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="mainBox">
    <!-- <el-aside class="aside" :width="isCollapse ? '64px' : '200px'"> -->
    <el-scrollbar>
      <sidebar
        :sidebar-menu="sidebarMenu"
        :is-collapse="isCollapse"
        :active="active"
      />
      <div class="collapse">
        <el-icon color="rgba(0, 0, 0, 0.45)">
          <expand
            v-if="isCollapse"
            @click="clickFn"
          />
          <fold
            v-else
            @click="clickFn"
          />
        </el-icon>
      </div>
    </el-scrollbar>
    <!-- </el-aside> -->
  </div>
</template>

<style lang="less" scoped>
.mainBox {
  height: 570px;
  margin: 8px 0 0 16px;
  border-radius: 4px;
  position: relative;
  .el-scrollbar__bar {
    &.is-horizontal {
      display: none;
    }
  }
  :deep(.el-menu) {
    border: none;
    background-color: none;
    .el-sub-menu__title {
      color: #666;
    }
    .el-sub-menu{
      &.is-active{
        .el-sub-menu__title{
          color:var(--el-menu-active-color);
        }
      }
    }
    .el-menu-item {
      color: #666;
      border-right: 2px solid transparent;
      &.is-active {
        color: var(--el-menu-active-color);
        border-right: 2px solid var(--el-menu-active-color);
        background-color: rgba(27, 113, 227, 0.15);
      }
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 570px;
    overflow-y: auto;
  }
  .collapse {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    padding: 0 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
  }
  .main {
    padding: 16px;
  }
}
</style>
