<template>
    <div class="go-simple-menu" ref="simpleMenu">
        <div class="left-layout h100b" :style="exStyle">
            <div class="menu">
                <div class="menu-list">
                    <div class="portalSet" :key="index"
                         v-for="(item,index) of dbMenus">
                        <!--第一层菜单-->
                        <div class="p-menu" :class="item.active?'p-menu-choose':''" @click="clickItem(item,$event)">
                            <i class="simple_menu_icon" v-show="showIcon" :class="item.icon||item.source"></i>
                            <span :title="item.title">{{item.title||item.name}}</span>
                            <span class="menu_span" v-if="showMenuDrop(item)">
                                <Icon class="menu_icon" type="ios-arrow-down"/></span>
                        </div>
                        <!--第二层菜单-->
                        <div class="sub_menu_ul" v-show="item.expand">
                            <div class="sub_menu_item" :class="subItem.active?'p-menu-choose':''" v-if="subItem.showMenu!==false"
                                 v-for="(subItem,index) of item.children" @click="clickSubItem(subItem,item,$event)">
                                <div class="dot"></div>
                                <span class="icon_menu" v-show="showIcon">
                                    <i :class="subItem.icon||subItem.source"></i>
                                </span>
                                <span class="item_title" :title="subItem.title">{{subItem.title||subItem.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-layout h100b" v-if="hasRightPanel" :style="rightExStyle">
            <router-view class="wh100b router-view">

            </router-view>
            <slot></slot>
        </div>
    </div>
</template>


<script>
    import {GoingUtils, AssertUtils} from 'goingutils';

    export default {
        name: "index",
        data() {
            return {
                dbMenus: this.menus
            };
        },
        props: {
            showIcon: {
                type: Boolean,
                default: false
            },
            //当前菜单的链接地址
            curMenuUrl: {
                type: String,
                default: ''
            },
            //是否需要右边的panel
            hasRightPanel: {
                type: Boolean,
                default: true
            },
            //左侧菜单的宽度
            minWidth: {
                type: Number,
                default: 220
            },
            menus: {
                type: Array,
                default: () => []
            }
        },
        computed: {
            //左侧扩展样式
            exStyle() {
                if (this.minWidth !== 220) {
                    return {width: this.minWidth + 'px'};
                }
            },
            //右侧扩展样式
            rightExStyle() {
                if (this.minWidth !== 220) {
                    return {marginLeft: this.minWidth + 'px'};
                }
            }
        },
        mounted() {
            //对数据进行初始化下
            this.dbMenus.forEach((itemDb)=>{
                if(itemDb.active==null){
                    this.$set(itemDb,'active',false);
                }
                if(itemDb.expand==null){
                    this.$set(itemDb,'expand',false);
                }
                if(itemDb.active){
                    itemDb.expand=true;
                }
            });
        },
        methods: {
            //是否显示下拉菜单
            showMenuDrop(item) {
                if (item.children && AssertUtils.isArray(item.children) && item.children.length > 0) {
                    return true;
                } else {
                    return false;
                }
            },
            //激活相应的item
            setItemActive(url) {
                this.dbMenus.forEach(function (itemDb) {
                    if (itemDb.url === url) {
                        itemDb.active = true;
                        itemDb.expand=true;
                    } else {
                        itemDb.active = false;
                        itemDb.expand=false;
                    }
                    //如果是子节点 也需要遍历
                    if (itemDb.children && AssertUtils.isArray(itemDb.children) && itemDb.children.length > 0) {
                        itemDb.children.forEach(function (itemSonDb) {
                            if (itemSonDb.url === url) {
                                itemSonDb.active = true;
                                itemDb.expand=true;
                            } else {
                                itemSonDb.active = false;
                            }
                        });
                    }
                });
            },
            clickSubItem(subItem,item) {
                if (AssertUtils.isNotEmpty(subItem.url)) {
                    if(this.hasRightPanel){
                        GoingUtils.jumpLayoutPage(item.url, this.$router);
                    }
                    //触发item点击事件
                    this.$emit('itemClick', subItem);
                    this.setItemActive(subItem.url);
                }
            },
            //点击左侧菜单
            clickItem(item) {
                //如果存在子节点 则点击展开子节点菜单
                if (!(item.children && AssertUtils.isArray(item.children) && item.children.length > 0)) {
                    if (AssertUtils.isNotEmpty(item.url)&&this.hasRightPanel) {
                        GoingUtils.jumpLayoutPage(item.url, this.$router);
                    }
                    //触发item点击事件
                    this.$emit('itemClick', item);
                }
                this.setItemActive(item.url);
            }
        },
        watch:{
            curMenuUrl(newVal){
                this.setItemActive(newVal);
            }
        }
    };
</script>

