<template>
    <div class="radioCheck" >
        <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" >
            <span>
                <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
            </span>
            <span>{{item.title}}</span>
        </label>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectValue:[''],
            currentSelect:'',
        }
    },
   
    props:['checkArr'],
    methods: {
        //单选多选的事件
        radioCheckChange(e){
            // console.log(e.target);
            this.currentSelect=e.target.value;
            if(e.target.value=='' || this.selectValue.length==0 ){
                this.selectValue=[''];
            }else{
                if(this.selectValue.indexOf('')>-1){
                    let i=this.selectValue.indexOf('');
                    this.selectValue.splice(0,1)
                }
                
                if(this.selectValue.indexOf(e.target.value)==-1){
                    this.selectValue.push(e.target.value)
                }else{
                    let index=this.selectValue.indexOf(e.target.value);
                    if(index==0){
                        this.selectValue=[...this.selectValue.splice(1)]
                    }else{
                        this.selectValue=[...this.selectValue.splice(0,index),...this.selectValue.splice(index)]
                    }
                }

                if(this.selectValue.length==0){
                    this.selectValue=[''];
                }
                
            }
            // console.log(this.currentSelect,this.selectValue);
            this.$emit('getSonValue',this.selectValue)
        },
    },
    mounted() {
        
    },
}
</script>

<style lang="scss" scoped>
.radioCheck{        
    border-radius: 5px;
    height: 32px;
    .item{
        min-width: 60px;
        padding: 0px 15px;
        text-align: center;
        display: inline-block;
        border: 1px solid #ccc;
        border-left: 0;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        .checkbox-button-input{
            width: 0;
            height: 0;
            opacity: 0;
        }

    }
    .item::after{
        content: "";
        position: absolute;
        right: 1px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid;
        border-left-color: #e0e0e0;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        border-radius: 2px;
    }
    .item:hover{
        color: #1890ff;
    }
    .selection{
        color: #fff;
        background: #1890ff;
    }
    .item.selection:hover{
        // color: #1890ff;
        color: #fff;
        background: #40a9ff;
        border-color: #40a9ff;
    }
    .item.selection:after{
        border-left: 6px solid #1890ff;
    }
    .item:hover::after{
        // border-color: #40a9ff;
        border-left: 6px solid #40a9ff;
    }

}
.radioCheck .item:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 1px solid #ccc;
}
.radioCheck .item:first-child:after{
    border-left: 0;
}
.radioCheck .item:last-child {
    border-radius: 0px 5px 5px 0px;
}
</style>