<template>
    <label :class="[$style.checkbox,getDisabled&&$style.disabled]">
        <span :class="[$style.wrap,getChecked&&$style.checked,getPartiallySel&&$style.partiallySel]">
            <input
                class="hidden"
                type="checkbox"
                :name="name"
                :value="value.data"
                :checked="getChecked"
                @change="change"
                :disabled="disabled"
            />
            <IconFont :class="$style.icon">&#xe6;</IconFont>
            <p :class="$style.line">-</p>
        </span>
        <template v-if="text">{{text}}</template>
    </label>
</template>

<script>
    import IconFont from "../basic/IconFont";
    export default {
        name: "Checkbox",
        components: {IconFont},
        props:{
            value:{
                type:[Object,Boolean],
                default(){
                    return {
                        data:null,
                        flag:false
                    }
                }
            },
            name:{
                type:String,
                default:''
            },
            partiallySel:{
                type:Boolean
            },
            text:{
                type:String,
                default:''
            },
            disabled:{
                type:Boolean,
                default:false
            },
            centralProcess:{
                type:Array,
                default:null
            }
        },
        computed:{
            getDisabled(){
                if(!this.centralProcess||this.centralProcess.length<=0){
                    return this.disabled||false;
                }
                for(let item of this.centralProcess){
                    if(!item.disabled){
                        return false;
                    }
                }
                return true;
            },
            getChecked(){
                if(this.value.constructor!==Object){
                    return this.value||null;
                }
                if(!this.centralProcess||this.centralProcess.length<=0){
                    return this.value.flag||null;
                }
                let count=0
                for(let item of this.centralProcess){
                    if(!item.disabled&&!item.flag){
                        return false;
                    }
                    if(item.disabled){
                        count++;
                    }
                }
                if(this.centralProcess.length==count){
                    return false;
                }
                return true;
            },
            getPartiallySel(){
                if(!this.centralProcess||this.centralProcess.length<=0){
                    return false;
                }
                var count=0;
                for(let item of this.centralProcess){
                    if(item.flag){
                        count++;
                    }
                }
                if(count<this.centralProcess.length&&count>0){
                    return true;
                }
                return false;
            }
        },
        methods:{
            change(e){
                if(this.value.constructor===Boolean){
                    this.$emit('change',e.target.checked);
                    return;
                }
                if(!this.centralProcess||this.centralProcess.length<=0){
                    this.$emit('change',{
                        ...this.value,
                        flag:e.target.checked
                    })
                    return;
                }
                this.$emit('change',e.target.checked)
            }
        }
    }
</script>

<style module lang="scss">
    @value CheckboxActiveBg from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssLayout.scss';
    .checkbox{
        vertical-align: middle;
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
        padding-right: 0.6em;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &.disabled{
            >.wrap{
                box-shadow: none !important;
                background-color: rgba(0,0,0,0.2) !important;
                cursor: default !important;
                border: none !important;
            }
        }
        >.wrap{
            vertical-align: middle;
            display: inline-block;
            position: relative;
            width: 14PX;
            height: 14PX;
            border-radius: 2PX;
            border: 1PX solid #979797;
            transition-property: border-color,box-shadow,background-color;
            transition-duration: .2s;
            background-color: rgba(255,255,255,1);
            box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2) inset;
            margin-right: 0.5em;
            .icon,.line{
                @extend %AbsoluteCenter;
                z-index: 1;
                color: #FFF;
                opacity: 0;
                line-height: 1em;
            }
            .icon{
                font-size: 10PX;
            }
            .line{
                font-size: 10PX;
            }
            &.partiallySel,&.checked{
                border-color: CheckboxActiveBg;
                background-color: CheckboxActiveBg;
                box-shadow: none;
            }
            &.partiallySel{
                .icon{
                    opacity: 0;
                }
                .line{
                    opacity: 1;
                }
            }
            &.checked{
                .icon{
                    opacity: 1;
                }
                .line{
                    opacity: 0;
                }
            }
            &:not(.checked,.disabled){
                &:hover{
                    $newShadowColor:transparentize(#409eff,0.8);
                    border-color: CheckboxActiveBg;
                    box-shadow: 0px 2px 2px 0px $newShadowColor inset;
                }
            }
        }
    }
</style>