<template>
  <div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave"
    :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
        :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
        <sidebar-item v-for="(route, index) in hidechildren" :key="route.path  + index" :is-collapse="isCollapse" :active-menu="activeMenu"
          :item="route" :base-path="route.path" :class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
          :style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''" class="secondary-menu"/>
      </el-menu>
    </el-scrollbar>
    <div v-show="isExpand" class="side-expand" @click="toggleSideBar">
      <img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {

  components: { SidebarItem, Logo },
  data() {
    return {
      isExpand: false
    };
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    hidechildren() {
      return this.sidebarRouters.map(item => {
        if (item.children?.length) {
          item.children = item.children.filter(i => {
            if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index") {
              return i;
            }
          });
        }
        return item;
      });
    },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    device() {
      return this.$store.state.app.device;
    },
    bottomMenu() {
      const routeArr = this.$router.options.routes;
      const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed);
      return navFixed.length;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  methods: {
    toggleSideBar() {
      this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
      this.$store.dispatch('app/toggleSideBar');
    },
    sideEnter() {
      if (this.device !== 'mobile') {
        this.isExpand = true;
      }
    },
    sideLeave() {
      if (this.device !== 'mobile') {
        this.isExpand = false;
      }
    },
  },
};
</script>
