<template>
    <scroll-view>
        <el-menu
            ref="topmenu"
            unique-opened
            mode="horizontal"
            :default-active="activeIndex"
            @select="handleSelect"
            :background-color="styleObj.menuBg"
            :text-color="styleObj.menuText"
            :active-text-color="styleObj.menuTextActive"
        >
            <template v-for="menu in currentMenu">
                <!-- + alias + '/'  -->
                <el-submenu
                    :key="menu.alias"
                    :index="'/platLayout/' + 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 slot="title" class="firstLevelTitle">{{
                            menu.name
                        }}</span>
                    </template>
                    <!-- menu.alias + '/' + -->
                    <el-menu-item
                        :index="'/platLayout/' + 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 slot="title" class="subLevelTitle">{{
                                submMenu.name
                            }}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item
                    v-else
                    :key="menu.alias"
                    :index="'/platLayout/' + 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>
            </template>
        </el-menu>
    </scroll-view>
</template>
<script>
import {mapState} from 'vuex'
import menu from '@/api/menu.js'
import styleObj from '@/assets/css/element-variables.scss'
import ScrollView from './ScrollView.vue'
export default {
    components: {
        ScrollView,
    },
    data() {
        return {
            styleObj: styleObj,
            currentMenu: [],
            activeIndex: '',
            menuAll: [],
        }
    },
    mounted() {
        this.getActiveIndex()
    },
    computed: {
        ...mapState({
            frontMenus: (state) => {
                return state.menu.frontMenus
            },
        }),
    },
    created() {
        this.filterBizMenu(this.frontMenus)
    },
    methods: {
        // 页面刷新过滤出当前菜单
        getActiveIndex(to) {
            this.activeIndex = this.$route.path
        },
        // 筛选出业务菜单
        filterBizMenu(menus) {
            menus.forEach((item) => {
                // 这个别名根据每个系统配置来
                if (item.alias === 'normal') {
                    this.currentMenu = item.children
                    console.log(this.currentMenu)
                } else if (item.children && item.children.length) {
                    this.filterBizMenu(item.children)
                }
            })
        },
        // 点击菜单跳转路由
        handleSelect(path, isJump) {
            let alias
            let _this = this
            if (path && path.indexOf('/platLayout/href') == -1) {
                let i = path.lastIndexOf('/')
                alias = path.slice(i + 1)
            } else {
                alias = path.replace('/platLayout/', '')
            }
            menu.getMenuByAlias(alias, (m) => {
                m && _this.$emit('menuChange', m)
                if (m && m.openType == '2' && isJump) {
                    if (m.alias.indexOf('href/') == -1) {
                        let openPath = '/platLayout/' + m.alias
                        let routeUrl = this.$router.resolve({path: openPath})
                        window.open(routeUrl.href, '_blank')
                    } else {
                        let tempwindow = window.open()
                        tempwindow.location = m.href
                    }
                } else if (m && m.parent) {
                    this.$router.push(path)
                    this.activeIndex = path
                }
            })
        },
    },
}
</script>
<style lang='scss' scoped>
@import '@/assets/css/element-variables.scss';
/deep/ .el-menu {
    border-right: none;
    background-color: $--menu-bg;
    display: flex;
}
/deep/.el-menu.el-menu--horizontal {
    border-bottom: solid 1px $--menu-bg;
}

.el-submenu__title *,
.el-menu-item * {
    vertical-align: baseline;
}
.el-menu--horizontal > .el-menu-item {
    padding: 0 20px !important;
    height: 66PX;
    line-height: 66PX;
    margin: 0;
    border-bottom: 3PX solid transparent;
    span,
    svg {
        font-size: $--navigator-text-size !important;
        color: $--menu-text;
    }
    svg {
        margin-right:4PX;
    }
}

.el-menu--horizontal > .el-menu-item:hover{
    span,
    svg {
        color: $--menu-text-active;
    }
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title{
    padding: 0 20px !important;
    height: 66PX;
    line-height: 66PX;
    border-bottom: 3PX solid transparent;
    .firstLevelTitle {
        font-size: $--navigator-text-size !important;
    }
    svg{
        font-size: $--navigator-text-size !important;
        color: $--menu-text;
        margin-right:4PX;
    }
}
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title{
    border-bottom: 3PX solid $--color-primary!important;
    svg{
        color: $--menu-text-active;
    }
}

/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover{
    .firstLevelTitle,svg {
        color: $--menu-text-active;
    }
}
</style>
<style lang="scss">
@import '@/assets/css/element-variables.scss';
.el-menu--horizontal{
    .el-menu--popup{
        .subLevel{
            height: 48PX;
            line-height: 48PX;
            span,svg{
                font-size: 16PX !important;
                color: $--menu-text;
            }
            svg{
                margin-right:4PX;
            }
        }
        .subLevel:hover,.subLevel.is-active{
            span,svg{
                color: $--menu-text-active;
            }
        }
    }
}
</style>