<template>
  <el-aside class="sidebar-container" width="190px" :collapsed="isCollapsed" :class="isCollapsed && 'collapsed'">
    <el-scrollbar class="scrollbar-wrapper">
      <BaseMenu v-bind="menuProps" class="sidebar-menu" @select="selectItem"></BaseMenu>
    </el-scrollbar>
    <OperateBtn class="operate" @click="$emit('toggleCollapsed')"> </OperateBtn>
  </el-aside>
</template>

<script>
import { computed } from 'vue'
import BaseMenu from './BaseMenu.vue'
import OperateBtn from './OperateBtn.vue'
import useMenuColorConfig from './useMenuColorConfig'
import useBreakPoint from './useBreakPoint'

export default {
  components: { BaseMenu, OperateBtn },
  props: {
    isCollapsed: {
      type: Boolean,
      default: false
    },
    menuData: {
      type: Array
    },
    isLimitLevel: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: '/'
    },
    matchPath: {
      type: String,
      default: ''
    },
    selectItem: {
      type: Function
    }
  },
  setup(props, { emit }) {
    const { menuColorConfig } = useMenuColorConfig()
    const menuProps = computed(() => {
      const { menuData, isLimitLevel, basePath, matchPath, isCollapsed } = props
      return {
        menuData,
        isLimitLevel,
        basePath,
        matchPath,
        collapse: isCollapsed,
        ...unref(menuColorConfig),
        mainMenu: true,
        uniqueOpened: true
      }
    })
    useBreakPoint('xl', emit)
    return {
      menuProps
    }
  }
}
</script>
<style lang="scss" scoped>
.sidebar-container {
  position: relative;
  background: var(--custom-base-color-background);
  color: var(--custom-base-color-text);
  z-index: 3;
  transition: width 0.2s;
  overflow: hidden;
  height: 100%;
  &.collapsed {
    width: 48px !important;
    overflow: initial;
    .operate {
      position: absolute;
      left: 25px;
      transform: rotate(90deg);
      transition: left 0.1s;
      z-index: -1;
      &:hover {
        left: 28px;
      }
    }
  }
  .scrollbar-wrapper {
    height: 100%;
    :deep(.el-scrollbar__view) {
      height: 100%;
    }
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }
  }
  .operate {
    position: absolute;
    left: 155px;
    top: 50%;
    font-size: 18px;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: left 0.1s;
    &:hover {
      left: 150px;
    }
  }
}
</style>
