
<template>
    <label class="checkbox_container" :class="{ 'disabled': disabled }">
        <span class="_checkbox" :class="{'_checkbox--checked': isChecked}">
            <i></i>
            <input type="checkbox" :checked="isChecked" @change="changeHandler($event.target.checked)">
        </span>
        <span class="_label">
            <slot>{{ label }}</slot>
        </span>
    </label>
</template>

<script>
    import mixin from "../mixin";
    export default {
        name: mixin.prefix + "checkbox",
        props:{
            checkedFromModelProp:{
                default: false
            },
            disabled:{
                default: false
            },
            value:{
                default: undefined
            },
            label:{
                default: undefined
            }
        },
        model:{
            prop: 'checkedFromModelProp',
            event:'change'
        },
        data() {
            return {
                isArrayModel: false,
                // 深复制 checkedFromModelProp【仅当checkedFromModelProp是Array时用】
                checkedFromModelProp_INNER: [],
            };
        },
        computed: {
            isChecked(){
                // if( this.disabled ){
                //     return false;
                // }
                return this.isArrayModel? this.checkedFromModelProp_INNER.includes(this.value): this.checkedFromModelProp_INNER
            }
        },
        watch: {
            checkedFromModelProp(){
                if( this.disabled ){
                    return;
                }
                this.cacheCheckedFromMOdelProp();
            }
        },

        created(){
            this.isArrayModel = Array.isArray( this.checkedFromModelProp );
            
            this.cacheCheckedFromMOdelProp();

            if( this.isArrayModel && (this.value === undefined || this.value === '') ){
                throw 'value格式错误'
            }
        },

        methods: {
            
            cacheCheckedFromMOdelProp(){
                this.checkedFromModelProp_INNER = this.isArrayModel ? [...this.checkedFromModelProp]: this.checkedFromModelProp;
            },

            changeHandler(checked){
                if( this.disabled ){
                    return;
                }

                if( this.isArrayModel ){

                    if( checked ){
                        this.checkedFromModelProp_INNER.push(this.value);
                    }else{
                        __breakFor:for(let i=0; i<this.checkedFromModelProp_INNER.length ; i++){
                            if( this.value === this.checkedFromModelProp_INNER[i] ){
                                this.checkedFromModelProp_INNER.splice(i, 1);
                                break __breakFor;
                            }
                        }
                    }

                    this.$emit('change', [...this.checkedFromModelProp_INNER]);

                }else{
                    this.$emit("change", checked);
                }

            }

        },
    };
</script>

<style lang="less" scoped>

    .checkbox_container{
        display: inline-block;
        margin: 0;
        padding: 0;
        position: relative;
        box-sizing: border-box;
        line-height: 1.2;
        input{
            pointer-events: none;
            position: absolute;
            opacity: 0;
            position: absolute;
            left:0;
            top:0;
            width:0;
            height:0;
        }
        ._label{
            display: inline-block;
            vertical-align: middle;
        }
        ._checkbox{
            box-sizing: border-box;
            display: inline-block;
            width: 14px;
            height: 14px;
            border:1px solid  #838383;
            border-radius: 2px;
            vertical-align: middle;
            text-align: center;
            i{
                display: inline-block;
                box-sizing: border-box;
                display:none;
                vertical-align: middle;
                width: 50%;
                height: 80%;
                border: 1px solid #FFF;
                border-left: 0;
                border-top: 0;
                transform: translate(0px, -6px) rotate(45deg);
            }
        }

        ._checkbox--checked{
            background: #ff8200;
            border:none;
            i{
                display: inline-block;
            }
        }
        &.disabled{
            cursor: not-allowed;
            opacity: 0.4;
        }
    }

</style>

