<template>
    <div class="aside-menu">
        <el-aside :width="menuShow ? '210px' : '0px'" class="aside-container">
            <el-scrollbar class="editScroll">
                <el-menu
                    ref="sidemenu"
                    unique-opened
                    class="el-menu-vertical"
                    :default-active="activeIndex"
                    @select="handleSelect"
                >
                    <div
                        v-for="menu in currentSubMenu"
                        active-text-color="#000"
                        style="min-width: 210px; max-width: 210px;"
                        :key="menu.alias"
                    >
                        <el-submenu
                            :index="'/frontPlat/' + menu.alias"
                            v-if="menu.children && menu.children.length >= 0"
                            class="firstLevel"
                        >
                            <template slot="title">
                                <svgIcon
                                    icon-style="icon header-icon"
                                    :icon-class="
                                        menu.menuIcon ? menu.menuIcon : ''
                                    "
                                />
                                <span class="firstLevelTitle" style="font-size:16px">{{
                                    menu.name
                                }}</span>
                            </template>
                            <el-menu-item
                                :index="'/frontPlat/' + submMenu.alias"
                                v-for="submMenu in menu.children"
                                :key="submMenu.alias"
                                class="subLevel"
                            >
                                <template slot="title">
                                    <svgIcon
                                        icon-style="icon header-icon"
                                        :icon-class="
                                            submMenu.menuIcon
                                                ? submMenu.menuIcon
                                                : ''
                                        "
                                    />
                                    <span class="subLevelTitle">{{
                                        submMenu.name
                                    }}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            v-else
                            :index="'/frontPlat/' + menu.alias"
                        >
                            <svgIcon
                                icon-style="icon header-icon"
                                :icon-class="menu.menuIcon ? menu.menuIcon : ''"
                            />
                            <span slot="title" class="firstLevelTitle">{{
                                menu.name
                            }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </el-aside>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import menu from '@/api/menu.js'
export default {
    props: {
        menuShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            currentSubMenu: [],
            activeIndex: '',
        }
    },
    watch: {
        // 监听路由，如果为首页等非菜单页面，取消菜单选中项
        $route(to, from) {
            if (to.meta.isHome) {
                this.activeIndex = ''
            }
        },
    },
    computed: {
        ...mapState({
            frontMenus: (state) => {
                // console.log(state.menu.frontMenus, 'dfsdsddf')
                return state.menu.frontMenus
            },
        }),
    },
    mounted() {
        this.activeIndex = this.$route.path
        console.log(this.activeIndex, 'this.activeIndex')
        // const this_ = this
        // setTimeout(function () {
        //     !this_.currentUser &&
        //         this_.$store.dispatch('user/loadCurrentUserDetail')
        // }, 2000)
        // const currentUser = this.$store.state.login.currentUser
        // if ((!this.frontMenus || this.frontMenus.length == 0) && currentUser) {
        //     let this_ = this
        //     this.$store.dispatch('menu/actionFrontMenus').then((data) => {
        //         this.filterSubMenu()
        //     })
        // } else {
        //     this.filterSubMenu()
        // }
        // this.$bus.$on('frontMenuShow', () => {
        //     this.handleMenuCollapse()
        // })
        // this.$bus.$on('roterPush', (path) => {
        //     console.log('监听到了')
        //     this.activeIndex = path
        // })
    },
    created(){
        let arr=JSON.parse(sessionStorage.getItem('currentFrontMenus'))//梁
        this.currentSubMenu=arr[2].children;//梁
    },
    methods: {
        // 菜单的收折
        handleMenuCollapse() {
            this.$emit('update:menuShow', !this.menuShow)
        },
        // 选中菜单跳转 不启用el-menu router模式 否则无法选中 暂未查明原因，改用手动推路由
        handleSelect(path, isJump) {
            console.log(path,isJump,'路由')
            this.$router.push(path)//梁
            // console.log(path, "alias")
            // let alias
            // let _this = this
            // if (path && path.indexOf('/frontPlat/href') == -1) {
            //     // url 菜单
            //     let i = path.lastIndexOf('/')
            //     alias = path.slice(i + 1)
            // } else {
            //     alias = path.replace('/frontPlat/', '')
            // }
            // menu.getMenuByAlias(alias, (m) => {
            //     // debugger
            //     console.log(m,3333)
            //     m && _this.$emit('menuChange', m)
            //     if (m && m.openType == '2' && isJump) {
            //         if (m.alias.indexOf('href/') == -1) {
            //             let openPath = '/frontPlat/' + m.alias
            //             let routeUrl = this.$router.resolve({path: openPath})
            //             // let token = JSON.parse(window.sessionStorage.getItem('currentUser')).token
            //             window.open(routeUrl.href, '_blank')
            //             // window.open(
            //             //   window.context.yhxt + `${routeUrl.href}` + '?token=' + token,
            //             //   '_blank'
            //             // )
            //         } else {
            //             let tempwindow = window.open()
            //             tempwindow.location = m.href
            //         }
            //     } else if (m && m.parent) {
            //         // console.log(path)
            //         this.$router.push(path)
            //         this.activeIndex = path
            //     }
            // })
        },
        // 筛选出选中菜单
        // filterSubMenu() {
        //     this.alias = this.$route.path.split('/')[2].replace('/', '')
        //     if (this.frontMenus) {
        //         let currentMenu = this.frontMenus.filter((item) => item.alias == this.alias)[0]
        //         if(currentMenu){
        //             this.currentSubMenu = currentMenu.children
        //         }
        //         console.log(this.currentSubMenu, 'this.currentSubMenu')
        //         this.$refs.sidemenu.activeIndex = '/frontPlat/' + this.alias
        //     }
        // },
    },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.aside-container {
    height: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.aside-menu {
    height: 100% !important;
    position: relative;
    background-color: #4a6fba;
    box-shadow: 0 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
}

.el-menu-vertical {
    height: 100% !important;
    .header-icon {
        margin-right: 10px;
        font-size: 16px;
        vertical-align: middle;
        margin-top: -1px;
    }
}

::v-deep .el-submenu__title {
    padding: 0 20px !important;
    height: 46px;
    line-height: 46px;
}

::v-deep .el-menu-item {
    padding: 0 20px !important;
    height: 56px;
    line-height: 56px;
    span,svg {
        font-size: 16px !important;
        color: #aec0e2;
    }
}

::v-deep .el-submenu .el-menu-item {
    padding: 0 40px !important;
    height: 46px;
    line-height: 46px;
}

::v-deep .el-menu {
    border-right: none;
    background-color: #4a6fba;
}

::v-deep .el-submenu__title .firstLevelTitle {
    font-size: 16px !important;
    color:#abd2e4 !important;
}
.firstLevel .header-icon {
    font-size: 18px;
    margin-top: -4px;
}
.subLevel .header-icon {
    font-size: 16px;
    margin-top: -4px;
}
.el-submenu__title *,
.el-menu-item * {
    vertical-align: baseline;
}

.aside-container ::v-deep .el-menu-item.is-active,
.aside-container ::v-deep .el-menu-item:hover,
.aside-container ::v-deep .el-menu-item:focus {
    // background-color: #3daeff !important;
    background-color: transparent;
    span,svg {
        color: #00ffea !important;
    }
}
.editScroll {
    height: 100% !important;
    overflow-x: hidden;
}

::v-deep .el-scrollbar__wrap {
    height: calc(100% + 17px) !important;
}
</style>
