<template>
    <div :class="classStr"
         @click="fnClick">
        <span class="y_checkbox_icon">
            <span class="y_checkbox_iconGou"></span>
            <i :style="styleStr"></i>
        </span>
        <span v-if="isSlot" class="y_checkbox_value">
            <slot></slot>
        </span>
        <span v-else-if="tips" class="y_checkbox_value">{{tips}}</span>
    </div>
</template>

<script>
    import findParent from "./mixins/findParent";
    import Vue from "vue";

    const parentName = "yCheckGroup";
    export default {
        name: "yCheckbox",
        computed: {
            isSlot() {
                return this.$slots && this.$slots.default ? this.$slots.default : false;
            },
            isDisable() {
                return (this._parent[parentName] ? this._parent[parentName].disabled : false) || this.disabled || false;
            },
            isRadio() {
                //return (this._parent[parentName] ? this._parent[parentName].radio || false : false) || this.radio;
                return (this._parent[parentName] ? this._parent[parentName].radio || false : false) || this.radio || false;
            },
            styleStr() {
                let background = "";
                if (this.checked && !this.disabled) {
                    background = "background:" + this.color;
                }
                return background;
            },
            classStr() {
                return "y_checkbox " +
                    ((this.checked && !this.isDisable) ? "y_checkbox_checked " : "") +
                    (this.isDisable ? "y_checkbox_disable " : "") +
                    (this.size == 'small' ? "y_checkbox_small " : "") +
                    (this.customClass ? this.customClass : "");
            }
        }
        ,
        data() {
            return {
                checked: "",
                parentLock: false
            };
        }
        ,
        methods: {
            fnClick() {
                if (this.disabled) return;
                if (this.readonly) return;
                this.checked = !!!this.checked;
                this.$emit("click");
            }
            ,
            parentChange() {
                const self = this;
                self.parentLock = true;
                self.checkParent();
                Vue.nextTick(() => {
                    self.parentLock = false;
                });

            }
            ,
            checkParent() {
                if (this._parent && this._parent[parentName]) {
                    let value = this._parent[parentName].result;
                    if (this.isRadio && value !== "") {
                        if (this.value === value) {
                            this.checked = true;
                        } else if (this.checked) {
                            this.checked = false;
                        }
                        return true;
                    } else if (!this.Radio && value.length > 0) {
                        if (value.indexOf(this.value) > -1) {
                            this.checked = true;
                        } else if (value.length > 0 && this.checked) {
                            this.checked = false;
                        }
                        return true;
                    } else {
                        return false;
                    }
                }
                return false;
            }
        }
        ,
        mixins: [findParent(parentName)],
        model:
            {
                prop: "btnChecked",
                event:
                    "update:btnChecked"
            }
        ,
        props: {
            customClass: String,
            //颜色
            color: String,
            btnChecked: Boolean,
            //是否禁用
            disabled: Boolean,
            readonly:Boolean,
            tips:String,
            size:"",
            //组件类型【单选多选】
            type:
                {
                    default:
                        "checkbox"
                }
            ,
            //选中的值
            value: ""
        }
        ,
        watch: {
            "btnChecked"() {
                this.checked = this.btnChecked;
            }
            ,
            checked() {
                this.$emit("update:btnChecked", this.checked);
                if (this._parent && this._parent[parentName] && this._parent[parentName].setValue && !this.parentLock) {
                    this._parent[parentName].setValue(this.value, this.checked ? 1 : 2, this._parentIndex[parentName]);
                }
                this.$emit("change");
            }
        }
        ,
        created() {
            if (!this.checkParent()) {
                this.checked = this.btnChecked;
            }
        }
    };
</script>

<style lang="scss">
    @import "../css/var.scss";
    @import "../css/base.scss";

    .y_checkbox {
        display: inline-block;
        text-align: left;

        &.y_checkbox_small{
            .y_checkbox_icon {
                width: $form_checkbox_small_width;
                height: $form_checkbox_small_height;
            }
            .y_checkbox_iconGou{

                height: $form_checkbox_small_height;
                font-size: $font-size_t5;
                transform: scale(.8);
            }
        }
    }

    .y_checkbox_icon {
        display: inline-block;
        position: relative;
        width: $form_checkbox_width;
        height: $form_checkbox_height;
        font-size: $font_size_t4;
        color: #fff;
        //line-height: $form_checkbox_height;
        text-align: center;
        background: $form_bgColor_disable;
        box-sizing: border-box;
        border-radius: 50%;
        vertical-align: middle;
        transition: all .2s;



        .y_checkbox_iconGou{
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1;
            height: $form_checkbox_height;
            position: relative;
            z-index: 3;
            &:before {
                position: relative;
                z-index: 3;
                font-family: "yesaway_ui";
                content: "\e603";
            }
        }
        i {
            display: block;
            content: " ";
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transition: all .1s;
            transform: scale3d(0, 0, 0);
            background: $color_topic_secondary;
        }
    }

    .y_checkbox_value {
        margin-left: 7px;
        vertical-align: middle;
    }

    .y_checkbox_checked {
        .y_checkbox_icon {
            border: none;

            i {
                transform: scale3d(1, 1, 1);
            }

            &:before {

            }
        }
    }

    .y_checkbox_disable {
        .y_checkbox_icon {
            //border: $form_border_disable;
            background: $form_bgColor_disable;
        }

    }
</style>
