<template>
    <div class="checkall" style="z-index: 100">
        <div class="wrap">
            <div class="wrap-title">
                <input type="checkbox" style="margin-right:5px" @change="checkAll($event)" :checked="checkAllStatus"/>所有赛事
            </div>
            <div class="game-content" v-if="game.length >0">
                <div v-for="(item, index) of game" :key="index">
                    <span class="game-item">
                        <div style="align-self:center ">
                            <input id="item.league_id" :checked="item.checked" 
                            type="checkbox" style="margin-right:5px" :value="item.league_id" @change="testChange($event)"/>
                        </div>
                        <span>{{item.league_name}}</span>
                    </span>
                </div>
            </div>
            <div v-else class="no-message">暂无数据</div>
            <div v-if="game.length>0" style="text-align: center;margin: 0 0 10px 0;">
                <el-button size="small" @click="submit" 
                style="background-color:#373737;color:#ffffff;font-weight:bold">提交</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'checkall',
        props: {
            gameData: {
                type: Array,
                default: () => []
            },
            checkData: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                title: '所有联赛',
                test: '1',
                game: [],
                checkList: [],
                checkAllStatus: true // 是否全选
            }
        },
        mounted() {
            this.initAll();
        },
        watch: {
            checkData: {
                handler(val) {
                    if(val) {
                        this.game = JSON.parse(JSON.stringify(val))
                        this.initAll();
                    }
                },
                deep: true
            },
        },
        methods: {
            testChange(event) {
                this.$nextTick(() => {
                    if(event.target.checked) {
                        this.checkList.push(event.target.value)
                    } else {
                        this.checkList = this.checkList.filter(item => item!=event.target.value)
                        this.checkAllStatus = false
                    }
                    if(this.checkList.length == this.game.length) {
                        this.checkAllStatus = true
                    }
                })
            },
            checkAll(event) {
                this.$nextTick(()=> {
                    if(event.target.checked) {
                        this.checkList = [];
                        for(let i=0;i<this.game.length;i++) {
                            this.checkList.push(this.game[i].league_id)
                            this.$set(this.game[i], 'checked', true)
                        }
                        // 对数组去重
                        // this.checkList = Array.from(new Set(this.checkList))
                        this.checkAllStatus = true
                    } else {
                        this.checkList = [];
                        for(let i=0;i<this.game.length;i++) {
                            this.$set(this.game[i], 'checked', false)
                        }
                        this.checkAllStatus = false
                    }
                });
            },
            initAll() { // 默认初始化时全部选中
                this.checkList = []
                for(let i=0;i<this.game.length;i++) {
                    this.checkList.push(this.game[i].league_id)
                    this.$set(this.game[i], 'checked', true)
                }
                this.checkAllStatus = true;
            },
            submit() {
                // 传2个参数，1.选择的列表2.默认收缩
                this.$emit('leagueName', this.checkList, false)
            }
        }
    }
</script>
<style scoped>
    .wrap {
        width: 670px;
        height: 300px;
        border: solid 1px #373737;
        background-color: #ffffff;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .wrap-title {
        height: 40px;
        line-height: 40px;
        background-color: #373737;
        color: #ffffff;
        padding-left: 20px;
    }
    .game-content {
        display: flex;
        flex-flow: wrap;
        box-sizing:border-box;
        width: 670px;
        padding: 10px 20px;
        align-items: center;
    }
    .game-item {
        display: flex;
        width: 200px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .no-message {
        width: 670px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        padding-top: 70px;
    }
</style>