<template>
    <div id="selectDemo">
        <ul :style="{'overflow-y':nodes.length>6?'scroll':'','margin-top':nodes.length>3?menuT+'px':''}">
            <template v-for="(item,index) in nodesList">
                <li  :key="item.type+index" v-if="!item.hide">
                    <div
                        class="listName tree-menu-item"
                        @click="clickList(item, index)"
                        @mouseover="changeList(item, index)"

                    >
                        <div v-if="item.iconUrl" style="height:100%;margin-right:6px;display: flex; align-items: center; justify-content: center;" >
                            <img style="width:20px;height:20px;"  :src="item.iconUrl" />
                        </div>
                        <div :style="{'justify-content':item.nodes &&item.nodes.length > 0?'space-between':'inherit','display': 'flex','flex': '1'}">
                            <span :class="{'clicked':item.isShowChild}"
                                style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;margin-right: 10px;"
                            >
                                {{item.name}}
                            </span>
                            <div v-if="item.nodes &&item.nodes.length > 0" style="margin-left:6px;height:100%;padding-top:2px;padding-right: 4px;">
                                <img src="@/assets/images/jiaoright.png" />
                            </div>
                        </div>

                    </div>
                    <div class="children"
                    v-if="item.isShowChild && item.nodes && item.nodes.length > 0&&isShowList">
                        <menuList :level="level+1" :index="index" :menuTop="index>1?menuT-(index*23):menuT" :nodes = "item.nodes"></menuList>
                    </div>
                </li>
            </template>

        </ul>
    </div>
</template>
<script>
import menuList from './menuList.vue'
import bus from '@/utils/bus'
export default {
    name: "menuList",
    components: { menuList },
    data () {
        return {
            isShowList: false,
            index:'-1',
            nodesList:[],
            menuT:this.menuTop,
            index:this.indexNum
        }
    },

    props:[
        "nodes",
        "menuTop",
        "level",
        "indexNum"
    ],
    mounted(){
        this.$nextTick(() => {

            this.nodesList = this.nodes
            this.isShowList = false
            if(this.level==2){
                this.menuT = this.menuTop<26?this.menuTop-50:this.menuTop
            }else if(this.level==3){
                this.menuT = this.menuTop<26?this.menuTop+30:this.menuTop
            }
        })

    },
    methods: {
        changeList: function(item,index) {
            this.index = index
            if(this.level==2&&index>2){
                this.index = index
            }
            this.isShowList = true
            if(item.hasOwnProperty("isShowChild")&&this.index!=index){
                item.isShowChild = !item.isShowChild;
                this.index = index
            } else {
                this.index = index
                this.$set(item, 'isShowChild', true);
            }
            if(!item.isShowChild){
                this.childStatus(item);
            }
            if(item.isShowChild){
                for(let i = 0; i < this.nodes.length; i++){
                    if(this.nodes[i].hasOwnProperty("isShowChild") && this.nodes[i].isShowChild && index !== i){
                        this.nodes[i].isShowChild = false;
                        this.childStatus(this.nodes[i]);
                        break;
                    }
                }
            }
            // BUS.$emit("getValue", item);
        },
        clickList(item,index){
            bus.$emit('treeMethod', item);
        },
        //如果子列表的子列表被展开，点击父列表关闭时，子列表的子列表也应该被关闭
        childStatus: function(item){
            if(!item.nodes || item.nodes.length <1){
                return;
            }
            for(let i = 0; i < item.nodes.length; i++){
                // 因为每一级列表只会有一个展开项，因此只需要找到展开项 递归即可
                if(item.nodes[i].isShowChild){
                    item.nodes[i].isShowChild = false;
                    this.childStatus(item.nodes[i]);
                    break;
                }
            }
        }
    },
}
</script>
<style lang="scss"  scoped>
    #selectDemo{
        position: relative;
        ul{
            min-width: 120px;
            max-height: 186px;
            // overflow-y: auto;
            // overflow: auto;
            // background: #FFFFFF;
            // border: 1px solid #DCDCDC;
            // box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.1);
            // width: 10rem;
            box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.3);
            margin: 0;
            padding:0;
            position:absolute;
            z-index: 9;
            // box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            // border:1px solid #DCDCDC;
            border-radius: 2px;
            background: #fff;
            margin-left: 2px;
        }
        ul li{
            position: relative;
            min-width: 120px;
            list-style: none;
            text-align: center;
            line-height:30px;
            margin: 0;
            box-sizing: border-box;
            // padding: 0 0 0 2rem;
            padding: 0px 0px 0px 8px;
            display: flex;
            flex-direction: row;
            font-size: 12px;
            img{
                width:14px;
                height:14px;
            }
        }
        ul li:hover{
            background: #E5F3FF;
        }
        .clicked{
            color:#3C5495;
        }
        .listName{
            display:flex;
            width:100%;
            cursor: pointer;
            align-items: center;
        }
        .children{
            position: absolute;
            right:0px;
            height:0px;
            padding:0px;
        }

    }
</style>
