<template>
<!-- 瀑布流版本布局 + 高度随宽度调整变化 -->
    <el-card class="homeMenuPage" v-resize="setMaxHeight" v-loading="loading">
        <div class="firstMenuContain homeMenuPage-List">
            <div 
                class="firstMenuItem menuItem" 
                v-for="(item,index) in navList"
                :key="index"
            >   
                <div class="firstTitle">
                    <div class="icon"><svg-icon :icon-class="item.meta.icon" style="fill:currentColor; color:#fff;"/></div>
                    <div>{{item.meta.title}}</div>
                </div>
                <ul class="menuInfo">
                    <li 
                        v-for="(item2,index2) in item.children"
                        :key="index2"
                    >
                        <div class="title">
                            {{item2.meta.title}}
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <!-- 有下级菜单 -->
                        <div class="lastList" v-if="item2.children.length > 0">
                            <div 
                                v-for="(item3,index3) in item2.children" 
                                :key="index3"
                                class="item"
                            >
                                <span @click="goPage(item3)">{{item3.meta.title}}</span>
                            </div>
                        </div>
                        <!-- 如果二级为最后一级，统一格式，补充到children中 -->
                        <div class="lastList" v-else>
                            <div class="item">
                                <span @click="goPage(item2)">{{item2.meta.title}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <span class="firstMenuItem break"></span>
            <span class="firstMenuItem break"></span>
            <span class="firstMenuItem break"></span>
        </div>
    </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    directives: { 
        // 页面宽度变化，重新计算总高度
        resize: { // 指令的名称
            bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
                let width = '', height = '';
                function isReize() {
                    const style = document.defaultView.getComputedStyle(el);
                    if (width !== style.width || height !== style.height) {
                        binding.value();  // 关键
                    }
                    width = style.width;
                    height = style.height;
                }
                el.__vueSetInterval__ = setInterval(isReize, 300);
            },
            unbind(el) {
                clearInterval(el.__vueSetInterval__);
            }
        }
     },
    name: 'Dashboard',
    data() {
        return {
            loading:true,
            navList:[],
        }
    },
    watch: {
        permission_routes(val, oldVal) {
            this.initData(val)
        }
    },
    computed: {
        ...mapGetters([
            'permission_routes'
        ])
    },
    mounted(){
        this.initData(this.permission_routes)
    },
    methods:{
        initData(data){
            data.forEach(item => {
                if(!item.hidden && item.path !== '/') {
                    this.navList.push(item)
                }
            })
            this.$nextTick(()=>{
                this.setMaxHeight()
            })
        },
        goPage(item){
            this.$router.push({name: item.name}) 
        },
        setMaxHeight(){
            // todo：用this.$route.path != /dashboard 判断
            console.log("setMaxHeight",this.$route.path)
            if(document.getElementsByClassName("homeMenuPage-List").length <= 0){
                return
            }
            let _items = document.getElementsByClassName("menuItem")
            let _left = [];
            let _right = [];
            let _left_num = 0;
            let _right_num = 0;
            _items.forEach((item,key)=>{
                // 左侧
                if(key % 2 == 0){
                    _left.push(item.offsetHeight)
                    _left_num += Number(item.offsetHeight)
                }
                // 右侧
                else{
                    _right.push(item.offsetHeight)
                    _right_num += Number(item.offsetHeight)
                }
            })
            let _max =  _left_num > _right_num ? _left_num  : _right_num 
            _max += 20 * _items.length
            document.getElementsByClassName("homeMenuPage-List")[0].style.height = _max + 'px'
            this.loading = false
        }
    }
}
</script>
<style lang="scss" scoped>
$iconSize:26px;
.homeMenuPage{
    height: 100%;
    overflow: auto;
    // padding: 20px 0;
}
.firstMenuContain {
    display: flex;
    flex-flow: column wrap;
    align-content: space-between;
    /* 容器必须有固定高度
    * 且高度大于最高的列高 */
    // height: 2500px;
    .firstMenuItem {
        width: calc(50% - 20px);
        margin-bottom: 20px;

        .firstTitle{
            display: flex;
            font-weight: bold;
            font-size: 18px;
            .icon{
                background: #409eff;
                color: #fff;
                border-radius: 4px;
                width: $iconSize;
                height: $iconSize;
                line-height: $iconSize;
                overflow: hidden;
                text-align: center;
                margin-right: 10px;
            }
        }

        .menuInfo{
            background: #f9fafb;
            margin: 20px 0;
            padding: 5px 0;
            li{
                list-style: none;
                display: flex;
                padding-top: 10px;
                .title{
                    width: 180px;
                    text-align: right;
                    font-weight: bold;
                    flex-shrink: 0;
                    .el-icon-arrow-right{
                        font-weight: bold;
                        font-size: 14px;
                    }
                }
                .lastList{
                    display: flex;
                    flex-wrap: wrap;
                    margin-left: 15px;
                    .item{
                        margin-right: 25px;
                        margin-bottom: 10px;
                        cursor: pointer;

                        &:hover{
                            color: #409eff;
                        }
                    }
                }
            }
        }

        /* 将内容块重排为4列 */
        &:nth-of-type(2n+1) { order: 1; }
        &:nth-of-type(2n)   { order: 2; }

        /* 强制换列 */
        &.break {
            flex-basis: 100%;
            width: 0;
            margin: 0;
            content: "";
            padding: 0;
        }
    }
}
</style>