<template>
    <div class="ajm-container">
        <top />
        <aside class="ajm-left-menu" style="display: flex">
            <div class="cloud-sidebar" :class="{'cloud-sidebar-mini': isCollapse}">
                <div class="cloud-sidebar-items">
                    <div class="cloud-sidebar-item" v-for="items in systemTypeList">
                        <div class="subNav" v-if="items.systemList && items.systemList.length > 0">
                            <i class="el-icon-caret-bottom"></i><span class="sublist-title">{{items.categoryName}}</span>
                        </div>
                        <ul class="navContent" v-if="items.systemList && items.systemList.length > 0">
                            <li v-for="item in items.systemList" :class="{'active':item.systemCode == systemInfo.systemCode,'normal':item.systemCode != systemInfo.systemCode}">
                                <div class="show-title" style="display: none"><i :class="item.systemIcon || 'el-icon-ajm-menu'"></i>{{item.systemName}}</div>
                                <a :href="item.systemUrl" style="text-decoration: none">
                                    <img class="system-icon" :src="systemIconPath(item.systemIcon)" v-if="item.systemIcon != null && item.systemIcon != ''"/>
                                    <i class="el-icon-ajm-menu" v-else></i>
                                    <span class="sub-title">{{item.systemName}}</span></a>
                            </li>
                        </ul>
                        <div class="subNav" v-else>
                            <div class="show-title" style="display: none"><i :class="item.systemIcon || 'el-icon-ajm-menu'"></i>{{items.categoryName}}</div>
                            <a :href="items.systemUrl" style="text-decoration: none">
                                <img class="system-icon" :src="systemIconPath(item.systemIcon)" v-if="item.systemIcon != null && item.systemIcon != ''"/>
                                <i class="el-icon-ajm-menu" v-else></i><span class="sub-title">{{items.categoryName}}</span>
                            </a>
                        </div>
                    </div>
                </div>
                <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>
            <div class="site-sidebar__inner">
                <div class="site-sidebar-title">{{systemInfo.systemName}}</div>
                <el-menu router unique-opened :default-active="currentPath" class="site-sidebar__menu"
                         textColor="#72767C">
                    <leftMenu :menus="menus" />
                </el-menu>
            </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 AjmConfig from 'ajm-framework/core/utils/ajm-config'
    import leftService from "./services/leftService";

    import Top from "./Header";
    import leftMenu from "./Left";
    import $ from "jquery"

    export default {
        components: {
            leftMenu,
            Top
        },
        data() {
            return {
                // 用户信息
                userInfo: this.$store.getters.userInfo,
                // 菜单项
                menuItems: this.$store.getters.menus,
                menuList: [], // 菜单列表
                isLeftMenuCollapse: true, //左侧菜单展开
                collapseTitle: "收缩",
                isCollapse: true,
                systemTypeList:[],
                systemInfo:this.$store.getters.systemInfo,
            };
        },
        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;
            },
            // 系统图标路径
            systemIconPath(){
                return function(systemIcon){
                    return  AjmConfig.getApiUrl() + AjmConfig.get("BASE_CONTEXT_PATH") +"/api/file/viewFile/"+  systemIcon + '?access_token=' + this.$store.getters.tokenInfo.access_token;;
                }
            }
        },
        methods: {
            // 初始化
            init() {
                this.$nextTick(function () {
                    $(".subNav").click(function(){
                        /*显示*/
                        if($(this).find("i").attr('class')=="el-icon-caret-bottom")
                        {
                            $(this).find("i").removeClass("el-icon-caret-bottom");
                            $(this).find("i").addClass("el-icon-caret-right");
                            $(this).removeClass("sublist-down");
                            $(this).addClass("sublist-up");
                        }
                        /*隐藏*/
                        else
                        {
                            $(this).find("i").removeClass("el-icon-caret-right");
                            $(this).find("i").addClass("el-icon-caret-bottom");
                            $(this).removeClass("sublist-up");
                            $(this).addClass("sublist-down");
                        }
                        // 修改数字控制速度， slideUp(500)控制卷起速度
                        $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
                    })

                    /*左侧鼠标移入提示功能*/
                    $(".cloud-sidebar-item ul li").mouseenter(function(){
                        if($(this).find("span:last-child").css("display")=="none"){
                            $(this).find("div").show();
                        }
                    }).mouseleave(function(){
                        $(this).find("div").hide();
                    })
                })
            },
            //查询所有业务系统
            getSystemList(){
                leftService.getSystemList().then(data =>{
                    this.systemTypeList = data;
                    this.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);
            }
        },
        //初始化
        mounted() {
            this.getSystemList();
        }
    };
</script>

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