<!--<template>-->
<!--    <el-menu-->
<!--        ref="menu"-->
<!--        :style="menuStyle"-->
<!--        :default-active="activeIndex"-->
<!--        :mode="mode"-->
<!--        :unique-opened="true"-->
<!--        :collapse="collapseComputed"-->
<!--        :collapse-transition = "true"-->
<!--        @select="select"-->
<!--    >-->
<!--        <template :is="getIs(item)"-->
<!--                   v-for="(item,index) in menuData"-->
<!--        >-->
<!--            <sub-menu :model="item" v-if="item.children&&item.children.length"></sub-menu>-->
<!--           <menu-item :model="item" v-else></menu-item>-->
<!--        </template>-->
<!--    </el-menu>-->
<!--</template>-->
<script>

import render from "./render";
import TreeUtil from "../../../util/ds/tree"
export default {
    mixins: [render],
    name: 'IMenu',
    props: {
        size: {
            type: String,
            default: 'default'
        },
        data: {
            type: Array,
            required: true
        },
        theme: {
            type: String,
            required: false,
            default: 'dark'
        },
        mode: {
            type: String,
            required: false,
            default: 'vertical'
        },
        collapsed: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data() {
        return {
            activeIndex: '',
            menuData: []
        }
    },
    methods: {
        /**
         * 选择了某个菜单
         */
        select(menuId) {
            let data = null;
            let nodes = TreeUtil.getLeafNodes(this.menuData);
            for (let i = 0; i < nodes.length; i++) {
                let node = nodes[i];
                if (node.id === menuId) {
                    data = node;
                    break;
                }
            }
            this.$emit("select", data)
        },
        /**
         * 根据原始data 初始化menuData
         */
        initMenuData() {
            function getItems(list, parent) {
                let items = [];
                list.forEach((item_, index) => {
                    let id = parent ? parent.id + '-' + index : ("id" + index);
                    let item = {
                        id,
                        ...item_,
                        parent,
                    };
                    items.push(item)
                    if (item_.children) {
                        item.children = getItems(item_.children, item)
                    }
                })
                return items;
            }

            this.menuData = getItems(this.data || []);
        },
        /**
         * 初始化激活的菜单
         * @param list
         * @returns {boolean}
         */
        initActiveIndex(list = this.menuData) {
            for (let i = 0; i < list.length; i++) {
                let item = list[i];
                if (item.children) {
                    if (this.initActiveIndex(item.children)) {
                        return true;
                    }
                } else if (item[this.activeKey] === this.activeValue) {
                    this.activeIndex = item.id;
                    let parent = item.parent;
                    if (this.mode === 'vertical')
                        while (parent) {
                            parent.type==="group" || this.$refs.menu.open(parent.id);
                            parent = parent.parent;
                        }
                    return true;
                }
            }
            return false;
        },
        /**
         * 设置激活的信息
         * @param key
         * @param value
         */
        setActive(key, value) {
            this.activeKey = key;
            this.activeValue = value;
            this.activeIndex = "";
            this.initActiveIndex();
        }
    },
    watch: {
        collapsed: {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
            }
        },
        data: {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                this.initMenuData();
            }
        }
    },
    computed: {
        collapseComputed() {
            return this.collapsed;
        },
        menuStyle() {
            if (this.mode === 'vertical') {
                return {
                    'height': '100%',
                    'overflow-y': 'auto',
                    'overflow-x': 'hidden'
                }
            }
            return {
                'height': '100%'
            }
        }
    }
}
</script>

<style scoped lang="less">
/deep/ .el-menu{
    //box-shadow: 0px -12px 30px 0px rgba(0, 0, 0, 0.1);
    /deep/.el-submenu [class^=svg-icon],/deep/.el-menu-item [class^=svg-icon] {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
    }
}

/deep/ .el-menu-item{
	overflow: hidden;
}
.content-default {
}

.content-mini {
    /deep/ .el-menu-item, /deep/ .el-submenu__title {
        height: 40px !important;
        line-height: 40px !important;
    }
}

/deep/ .el-submenu__title:hover, .el-menu-item:hover {
    > i,>.svg-icon {
        transform: translate3d(2px, 0, 0);
        transition: transform linear 0.2s;
    }
}
</style>
