/**
 * 顶部header
 */
Vue.component("list-menu", {
    template: `
        <div class="video-list-max">
            <div class="video-list-min">
                <div class="video-list-for" v-for="item in videoListData" @click="onVideoListFor(item.id,item.videoList)">
                    <div class="video-list-title">{{item.project_abbreviation}}</div>
                    <el-collapse-transition>
                        <ul class="video-list-ul" v-show="item.type">
                            <li :class="user.type==true?'active':''" v-for="user in item.videoList" @click.stop="onVideoListLi(user)">
                                <button :class="user.state == 0?'video-state-zx':'video-state-lx'"></button>
                                <span>{{user.title}}</span>
                            </li>
                        </ul>
                    </el-collapse-transition>
                </div>
            </div>
        </div>
    `,
    props: {
        data:{
            type:Array
        }
    },
    data() {
        return {
            videoListData:[]
        }
    },
    mounted(){
        this.init()

    },
    methods: {
        init(){
            this.videoListData = this.data
        },
        onVideoListFor(id,item){
            var data = this.videoListData
            for (let i = 0; i < data.length ; i++) {
                if(data[i].id == id){     //data[i].type == false
                    data[i].type = true
                    if(data[i].videoList && data[i].videoList.length > 0){
                        for (let j = 0; j <data[i].videoList.length ; j++) {
                            if(j == 0){
                                data[i].videoList[j].type = true
                            }else {
                                data[i].videoList[j].type = false
                            }
                        }
                    }
                }else{
                    data[i].type = false
                    if(data[i].videoList && data[i].videoList.length > 0){
                        for (let k = 0; k <data[i].videoList.length ; k++) {
                            data[i].videoList[k].type = false
                        }
                    }

                }
            }
            this.videoListData = data
            if(item){
                this.$emit('project',item[0]);
            }
        },
        onVideoListLi(user){
            var data = this.videoListData
            for (let i = 0; i < data.length ; i++) {
                if(data[i].videoList && data[i].videoList.length > 0){
                    for (let j = 0; j < data[i].videoList.length ; j++) {
                        if(data[i].videoList[j].id == user.id){
                            data[i].videoList[j].type = true
                        }else{
                            data[i].videoList[j].type = false
                        }
                    }
                }
            }
            this.videoListData = data
            this.$emit('equipment',user);
        },
    },
    watch:{
        data:function () {
            this.init()
        }
    }
})