<template>
    <div class="aside-container">
        <el-collapse-transition>
            <el-aside
                :width="menuShow ? '210px' : '0px'"
                style="
                    overflow-x: hidden;
                    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
                "
            >
                <el-scrollbar class="editScroll">
                    <div style="min-width: 210px; max-width: 210px">
                        <el-collapse
                            v-model="collapseItemActive"
                            accordion
                            ref="elCollapse"
                        >
                            <el-collapse-item
                                :title="menu.name"
                                v-for="(menu, index) in menus"
                                :class="{
                                    'last-collapse-item':
                                        index + 1 == menus.length,
                                }"
                                :key="menu.id"
                                :name="menu.alias"
                            >
                                <template slot="title"
                                    ><!--menuIcon-->
                                    <svgIcon
                                        icon-style="icon header-icon"
                                        :icon-class="menu.menuIcon"
                                    />
                                    <span v-show="menuShow">
                                        {{ menu.name }}
                                    </span>
                                </template>

                                <el-menu
                                    ref="elMenu"
                                    :default-active="menuItemActive"
                                    class="menu-vertical"
                                    :collapse="false"
                                    :router="true"
                                    @select="(path)=>handleSelect(path, true)"
                                >
                                    <el-menu-item
                                        v-for="item in menu.children"
                                        :key="item.alias"
                                        :class="{
                                            'is-active':
                                                item.alias ==
                                                menuItemActive,
                                        }"
                                        :index="'/sysplat/' + item.alias"
                                    >
                                        <span slot="title">
                                            <svgIcon
                                                icon-style="icon header-icon"
                                                :icon-class="item.menuIcon"
                                                />{{ item.name }}
                                        </span>
                                    </el-menu-item>
                                </el-menu>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-scrollbar>
            </el-aside>
        </el-collapse-transition>
    </div>
</template>

<script>
import menu from '@/api/menu.js'
import utils from '@/hotent-ui-util.js'
import {mapState} from 'vuex'

export default {
    props: {
        menuShow: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        ...mapState({
            menus: (state) => {
                return state.menu.menus
            },
        }),
    },
    watch: {
        collapseItemActive(n, o) {
            this.oldCollapseItemActive = o
        },
        $route(to, from) {
            if (to.meta.isHome) {
                this.collapseItemActive = ''
                this.menuItemActive = ''
            }
        },
    },

    data() {
        return {
            collapseItemActive: '',
            menuItemActive: '',
            oldCollapseItemActive: '',
            isLeftBtnValue: false,
        }
    },
    created() {
        this.$router.afterEach((_) => {
            this.syncUrlToMenu()
        })
        // 默认进入到首页，不选中菜单
        // if (this.menus[0] && this.menus[0].children[0]) {
        //     this.collapseItemActive = this.menus[0].alias
        //     this.menuItemActive = this.menus[0].children[0].alias
        // }
    },
    mounted() {
        const this_ = this
        setTimeout(function () {
            !this_.currentUser &&
                this_.$store.dispatch('user/loadCurrentUserDetail')
        }, 2000)
        const currentUser = this.$store.state.login.currentUser
        if ((!this.menus || this.menus.length == 0) && currentUser) {
            let this_ = this
            this.$store.dispatch('menu/actionMenus').then((data) => {
                if (this.isHasCurrentUrlRight()) {
                    this.syncUrlToMenu()
                } else {
                    // this_.$router.push('home')
                }
            })
        } else {
            this.syncUrlToMenu()
        }
    },
    methods: {
        handleMenuCollapse() {
            this.$emit('update:menuShow', !this.menuShow)
            if (this.menuShow == true) {
                this.collapseItemActive = ''
            } else {
                this.collapseItemActive = this.oldCollapseItemActive
            }
            //控制向左按钮的值
            this.isLeftBtnValue = !this.isLeftBtnValue
        },
        // 同步当前url地址到目录菜单中，选中对应的目录菜单
        syncUrlToMenu() {
            let routePath = this.$route.path
            if (routePath) {
                if (!this.$route.meta.isHome) {
                    this.handleSelect(routePath, false)
                }
            }
        },
        // 判断是否拥有当前url地址的权限
        isHasCurrentUrlRight: function () {
            let routePath = this.$route.path
            if (routePath) {
                let hasRight = false
                if (!this.menus || this.menus.length < 1) {
                    return hasRight
                }
                let tempMenu = JSON.parse(JSON.stringify(this.menus))
                let listMenu = utils.nest2tile(tempMenu, '', true)
                let ruterArr = routePath.split('/')
                let lastRuter = ruterArr[ruterArr.length - 1]
                listMenu.forEach((menu) => {
                    if (lastRuter.indexOf(menu.alias) > -1) {
                        hasRight = true
                        return
                    }
                })
                return hasRight
            }
        },
        handleSelect(path, isJump) {
            if (alias != 'tenant') {
                this.$store.dispatch('tenant/actionTenantId', null)
            }
            let alias
            let _this = this
            if (path && path.indexOf('/sysplat/href')==-1) {
                let i = path.lastIndexOf('/')
                alias = path.slice(i + 1)
            }else{
                alias = path.replace('/sysplat/', '');
            }
            menu.getMenuByAlias(alias, (m) => {
                m && _this.$emit('menuChange', m)
                if (m && m.parent) {
                    _this.collapseItemActive = m.parent.alias
                    _this.menuItemActive = m.alias
                }
                if(m && m.openType == '2' && isJump){
                    if(m.alias.indexOf("href/") == -1){
                        let routeUrl = this.$router.resolve({ path });
                        window.open(routeUrl.href, '_blank');
                    }else{
                        let tempwindow = window.open();
                        tempwindow.location = m.href
                    }
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.aside-container {
    position: relative;
}

.aside-container:hover .leftBtn {
    display: block;
}

.el-aside {
    // margin-top: 3px;
    position: relative;
    overflow: auto;
    height: 100%;
    /*background-color: #4a4c4f;*/
    /*background-color: #474449;*/
    background-color: #fff;
    box-shadow: 0 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
}

.menu-header {
    height: 39px;
    padding: 0 10px;
    /*border-bottom: 1px solid #d9d9d9;*/
    color: #252b3a;
    // color:#292e4c;
    display: flex;
    justify-content: left;
    align-items: center;
    box-sizing: border-box;
    position: relative;
}

.menu-header::before {
    content: '';
    width: 100%;
    height: 0.5px;
    background-color: #eeeeee;
    position: absolute;
    bottom: 0;
    left: 0;
}

.menu-header span {
    font-size: 12px;
    font-family: Roboto, Microsoft YaHei, Sans-serif;
    margin-left: 10px;
    letter-spacing: 2px;
    font-weight: bold;
    /*line-height: 45px;*/
}

.menu-header i {
    font-size: 20px;
    cursor: pointer;
}

.menu-header i:hover {
    color: $--color-primary;
}

.border-line {
    background-color: #d9d9d9;
    width: calc(100% - 10px);
    height: 1px;
    margin: auto;
}

.menu-vertical:not(.el-menu--collapse) {
    background: transparent;
    border-right-width: 0;
}

.el-collapse {
    border-top-width: 0;
    border-bottom-width: 0;
}

>>> .el-menu-item {
    height: 46px;
    font-family: MicrosoftYaHei;
    line-height: 46px;
    color: #333;
    // color: #fff;
    font-size: 14px;
    padding-left: 40px !important;
    span {
        font-size: 14px;
    }
    .header-icon {
        margin-right: 10px;
        font-size: 16px;
    }
}

li.el-menu-item.is-active {
    //background: $--color-primary;
    /*color: #409eff;*/
    // font-weight: bold;
    margin-right: -1px;
    color: #fff !important;
    background-color: $--color-primary;
    // background-color: #434a50;
    //background-color: #347dff !important;
    /*background-color: #545257;*/
    /*-webkit-box-shadow: inset 5px 0 0 0 #409eff;*/
    /*box-shadow: inset 5px 0 0 0 #409eff;*/
}

// .is-active + .el-collapse-item >>> .el-collapse-item__header {
//   // border-top: 1px solid #dedede;
// }
.el-collapse-item >>> .el-collapse-item__header {
    border-bottom: none;
    margin: auto 20px;
    .header-icon {
        margin-right: 10px;
        font-size: 18px;
    }
}

.el-menu-item:hover,
.el-menu-item:focus {
    // background-color: $--color-secondary;
    /*background-color: #f2f5fc;*/
    color: $--color-primary;
    background-color: transparent;
}

// .el-menu-item:focus {
// }

.last-collapse-item >>> .el-collapse-item__header {
    border-bottom-width: 0;
}

>>> .el-collapse-item__header {
    background-color: transparent;
    margin: 0 25px;
    font-size: 14px !important;
    height: 46px;
    color: #333;
    border-bottom-color: #dedede;
    span {
        font-size: 14px !important;
    }
}

>>> .el-collapse-item__header:hover {
    color: $--color-primary;
}

>>> .el-collapse-item__wrap {
    background-color: transparent;
    border-bottom-width: 0;
}

>>> .el-collapse-item__content {
    padding-bottom: 10px;
}

>>> .el-collapse-item__arrow {
    margin-right: 0;
    font-size: 12px;
    /*font-weight: bold;*/
}

.pre-span,
.tail-span {
    height: 12px;
    width: 12px;
    display: inline-block;
    border-radius: 2px;
    transform: rotate(45deg);
}

.pre-span {
    background: $--color-primary;
    margin-right: -5px;
}

.tail-span {
    background: #eb9a8d;
    margin-right: 10px;
}

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