<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'}:''"

                />
            </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>
