<template>
    <div class="radioCheck" >
        
            <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1,'bgcolor':item.disabled}" v-for="(item,index) in checkArr" :key="index">
                
                <span>
                    <input type="checkbox" :value="item.value"  class="checkbox-button-input" @click="radioCheckChange($event,item)">
                </span>
                <span>{{item.title}}</span>
                
            </label>
            <!-- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" :disabled='item.disabled'>               
                <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','selectArr'],
    watch:{
        checkArr:{
            handler(n,o){
                // console.log(n,o)
                this.selectValue=[];
                let i=0;
                this.checkArr.forEach((item,index)=>{
                    // console.log(item)
                    if(item.disabled==false){
                        i++;
                        this.selectValue[0]=item.value;
                        // console.log(this.selectValue)
                    }else if(item.disabled==undefined){
                        if(item.checked){
                            this.selectValue.push(item.value)
                        }
                        
                    }
                })
                if(this.selectValue.length==0){
                    this.selectValue=[''];
                }
                if(i==3){
                    this.selectValue[0]='';
                }
                // console.log(this.selectValue)
                this.$emit('getSonValue',this.selectValue)
            },
            deep:true,
            // immediate: true

        },
        
    },
    methods: {
        //单选多选的事件
        radioCheckChange(e,item){
            console.log(e.target,item,!item.disabled);
            
            this.currentSelect=e.target.value;
            if(!item.disabled){

                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 if(this.selectValue.indexOf(e.target.value)>-1){
                        this.selectValue=this.selectValue.filter((item)=>{
                            return item!=e.target.value
                        })  
                    }

                    if(this.selectValue.length==0){
                        this.selectValue=[''];
                    }
                    
                }
            // console.log(this.currentSelect,this.selectValue);
            }
            this.$emit('getSonValue',this.selectValue)
        },
    },
    mounted() {
        // this.selectValue=[]
        // console.log(this.checkArr)
        this.checkArr.forEach((item,index)=>{
            
            if(item.disabled&&item.disabled!=undefined){
                this.selectValue[0]=item.value
            }else{
                this.selectValue=['']
            }
        })
        this.$emit('getSonValue',this.selectValue)
    },
}
</script>

<style lang="scss" scoped>
.radioCheck{        
    border-radius: 5px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    .btn{
        background: transparent;
        padding: 0;
        margin: 0;
        border: none;
    }
    .item{
        min-width: 80px;
        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;
        }

    }
    .bgcolor{
        color:rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        cursor: not-allowed;
    }
    .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: #1890ff;
        background: #fff;
        border-color: #1890ff;
    }
    .item.selection:hover{
        // color: #1890ff;
        color: #40a9ff;
        background: #fff;
        border-color: #40a9ff;
    }
    .item.selection:after{
        border-left: 6px solid #1890ff;
    }
    .item:hover::after{
        // border-color: #40a9ff;
        border-left: 6px solid #40a9ff;
    }
    .bgcolor:hover{
        color:rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        cursor: not-allowed;
    }
    .bgcolor:hover::after{
        // border-color: #40a9ff;
        border-left: 6px solid #e0e0e0;
    }
    .bgcolor.selection:after{
        border-left: 6px solid #e0e0e0;
    }
    .bgcolor.selection{
        color:rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        cursor: not-allowed;
    }
    .bgcolor.selection:hover{
        // color: #1890ff;
        color:rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        cursor: not-allowed;
    }
    .bgcolor.selection:after{
        border-left: 6px solid #e0e0e0;
    }
}
.radioCheck .item:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 1px solid #ccc;
}
.radioCheck .item.selection:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 1px solid #1890ff;
}
.radioCheck .item.selection:nth-child(2) {
    
    border-left: 1px solid #1890ff;
}
.radioCheck .item:first-child:after{
    border-left: 0;
}
.radioCheck .item:last-child {
    border-radius: 0px 5px 5px 0px;
}
</style>