<template>
    <div>
        <el-popover placement="bottom-start"  v-model="shwoPop" width="200" trigger="click">
            <el-select slot="reference" ref="selectBox"  suffix-icon="el-close" :value="selectKey" multiple  collapse-tags
                placeholder="请选择" @visible-change="$refs['selectBox'].blur()" @remove-tag="delTag">
                <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()">
                            <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()">
                            <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 {
            shwoPop:false,
            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;
            },
            set(val) {
                this.$emit('change', val)
            }
        },

        selectKey(){
            return this.allcheck.map(v => v.value)
        },


    },

    mounted() {
        this.init()
    },

    methods: {
        //初始化
        
        init(){
            if(this.$refs['selectBox']){
                const iconDom = this.$refs['selectBox'].$el.querySelector('.el-input__suffix .el-input__icon');
                const closeWatch = this.$watch('shwoPop',(val => {
                    const num = val ? 0 : 180;
                    iconDom.style.transform=`rotateZ(${num}deg)`
                }))
                this.$once('hook:beforeDestroy', () => {
                    closeWatch()
                })
            }else{
                console.log('Not find ref of selectBox')
            }
        },

        //删除标签
        delTag(tag){
            this.allcheck = this.allcheck.filter(v =>{
                if(v.value===tag){
                    this.checkValue[v.type]=  this.checkValue[v.type].filter(val => val!==tag);
                }
                return v.value!==tag;
            })
        },
        //监听勾选
        checkChange() {
            this.allcheck = (this.checkValue.category1.map(value => ({ type:'category1', value }))).concat((this.checkValue.category2).map(value => ({ type:'category2', value })))
        }
    },

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