<template>
    <div class="ajm-container" :class="{'ajm-main-mini': isCollapse}">
        <top />
        <aside class="ajm-left-menu">
            <div class="site-sidebar__inner">
                <el-menu router unique-opened :default-active="currentPath" :collapse="isCollapse" class="site-sidebar__menu"
                         textColor="#fff">
                    <leftMenu :menus="menus" />
                </el-menu>
                <el-tooltip :content="collapseTitle" placement="top" :class="{'left-button': isCollapse}">
                    <el-button @click="setIsCollapse" v-model="isCollapse">
                        <i class="el-icon-ajm-collapse"></i>
                    </el-button>
                </el-tooltip>
            </div>
        </aside>

        <div class="ajm-main">
            <div class="ajm-content">
                <div class="ajm-nav-bar" v-if="hasNav">当前位置：{{positionName}}</div>
                <div class="ajm-nav-content" ref="ajmContent" :class="{'ajm-has-nav': hasNav, 'ajm-no-nav': !hasNav,'ajm-panel-content':isPanel}">
                    <transition name="move" mode="out-in">
                        <router-view></router-view>
                    </transition>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import Top from "./Header";
import leftMenu from "./Left";


export default {
    components: {
        leftMenu,
        Top
    },
    data() {
        return {
            // 用户信息
            userInfo: this.$store.getters.userInfo,
            // 菜单项
            menuItems: this.$store.getters.menus,
            menuList: [], // 菜单列表
            isLeftMenuCollapse: true, //左侧菜单展开
            collapseTitle: "收缩",
            isCollapse: false,
        };
    },
    computed: {
        //实时更新path值
        currentPath() {
            return this.$route.meta.menuPath;
        },
        isPanel(){
            return this.$route.meta && this.$route.meta.isPanel == true
        },
        hasNav() {
            return this.$route.meta && this.$route.meta.hasNav == false ? false : true;
        },
        // 菜单集合
        menus() {
            let menuItems = this.menuItems;
            let menus = [];
            // 菜单项
            if (menuItems && menuItems.length > 0) {
                menus = menus.concat(menuItems);
            }
            this.menuList = menus;
            return menus;
        },
        positionName() {
            if (this.menuList.length <= 0) {
                return;
            }
            let menu = this.findMenuByPath(this.$route.path, this.menuList);
            if (!menu) {
                let meta = this.$route.meta;

                if (!meta) {
                    return "";
                }
                return meta.menuName || "";
            }
            return menu.menuName;
        }
    },
    methods: {
        // 初始化
        init() {
        },
        // 根据路径查询菜单
        findMenuByPath(menuPath, menus) {
            return this.findMenu(menuPath, menus, "menuPath");
        },
        // 根据路径查询菜单
        findMenuByCode(menuCode, menus) {
            return this.findMenu(menuCode, menus, "menuCode");
        },
        // 查询指定菜单
        findMenu(key, menus, attriName) {
            if (!menus || menus.length <= 0) {
                return null;
            }
            let menu = null;

            for (var i = 0; i < menus.length; i++) {
                let menuItem = menus[i];
                if (key == menuItem[attriName]) {
                    return menuItem;
                } else if (menuItem.children && menuItem.children.length > 0) {
                    menuItem = this.findMenu(key, menuItem.children, attriName);
                    if (menuItem) {
                        menu = menuItem;
                        break;
                    }
                }
            }
            return menu;
        },
        setIsCollapse() {
            setTimeout(() => {
                this.isCollapse = !this.isCollapse;
                this.isLeftMenuCollapse = !this.isLeftMenuCollapse;
                this.collapseTitle = this.isLeftMenuCollapse ? "收缩" : "展开";
            }, 1);

//            this.isCollapse == true
//                ? (this.$refs.ajmContent.style.width = "calc(100% - 60px)")
//                : (this.$refs.ajmContent.style.width = "calc(100% - 220px)");
        }
    },
    //初始化
    mounted() {
        this.init();
    }
};
</script>

<style lang="less">
    @import "./css/index.less";
</style>
