<template>
    <div>
        <el-popover placement="bottom" width="400" trigger="click">
            <el-select slot="reference" ref="selectBox" :value="allcheck" multiple collapse-tags placeholder="请选择"
                @visible-change="$refs['selectBox'].blur()">
                <el-option label="1" value="a"></el-option>
            </el-select>
            <div>
                <el-row>
                    <el-col :span="12">
                        <el-checkbox-group v-model="checkValue.category1" class="flex-col"
                            @change="checkChange($event, 'category1')">
                            <el-checkbox v-for="item in listData.category1" :label="item" :key="item"></el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox-group v-model="checkValue.category2" class="flex-col"
                            @change="checkChange($event, 'category2')">
                            <el-checkbox v-for="item in listData.category2" :label="item" :key="item"></el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </div>
        </el-popover>
    </div>
</template>
<script>
export default {
    name: 'SelectPanel',
    props:{
        value:Array
    },
    model:{
        prop:'value',
        event:'change'
    },
    data() {
        return {
            checkValue: {
                category1: [],
                category2: []
            },
            listData: {
                category1: ['1', '2', '3', '4', '5', '6'],
                category2: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
            }
        }
    },

    computed: {
        allcheck: {
            get() {
                return this.value.map(v => v.value)
            },
            set(val){
               this.$emit('change',val)
            }
        }

    },

    mounted() {

    },

    methods: {
        checkChange(value, type) {
            this.checkValue[type] = value;
            console.log(this.checkValue)
            this.allcheck =  (this.checkValue.category1.map(value => ({ label: 'category1', value }))).concat(this.checkValue.category2).map(value => ({ label: 'category2', value }))
            console.log(this.allcheck, 'ALL')
        }
    },

}
</script>
<style lang="less" scoped>
.flex-col {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: baseline;
}
</style>