<template>
    <label :class="wrapClasses">
        <span :class="checkboxClasses">
            <span :class="innerClasses"></span>
            <input
                v-if="group"
                v-model="model"
                type="checkbox"
                :class="inputClasses"
                :disabled="disabled"
                :value="label"
                :name="name"
                @change="handleChange">
            <input
                v-else
                type="checkbox"
                :class="inputClasses"
                :disabled="disabled"
                :checked="currentValue"
                :name="name"
                @change="handleChange">
        </span>
        <span v-if="showSlot"><slot>{{ label }}</slot></span>
    </label>
</template>
<script>
    import { findComponentUpward, oneOf } from '../../../utils/assist'
    import Emitter from '../../../mixins/emitter'

    const prefixCls = 'yy-checkbox'
    /**
     * @displayName Checkbox
     */
    export default {
        name: 'YYCheckbox',
        mixins: [Emitter],
        props: {
            /**
             * bind值
             */
            value: {
                type: [String, Number, Boolean],
                default: false
            },
            /**
             * radio大小
             * @values small, large
             */
            size: {
                validator(value) {
                    return oneOf(value, ['small', 'large'])
                }
            },
            /**
             * 禁用radio
             */
            disabled: {
                type: Boolean,
                default: false
            },
            /**
             * 真值，当value === trueValue时选中
             */
            trueValue: {
                type: [String, Number, Boolean],
                default: true
            },
            /**
             * 假值，当value === falseValue时取消选中
             */
            falseValue: {
                type: [String, Number, Boolean],
                default: false
            },
            /**
             * 标签
             */
            label: {
                type: [String, Number, Boolean]
            },
            /**
             * 全选，部分选中时的横杠状态
             */
            indeterminate: {
                type: Boolean,
                default: false
            },
            /**
             * input的name属性
             */
            name: {
                type: String
            }
        },
        data() {
            return {
                model: [],
                currentValue: this.value,
                group: false,
                showSlot: true,
                parent: findComponentUpward(this, 'YYCheckboxGroup')
            }
        },
        computed: {
            wrapClasses() {
                return [
                    `${prefixCls}-wrapper`,
                    {
                        [`${prefixCls}-group-item`]: this.group,
                        [`${prefixCls}-wrapper-checked`]: this.currentValue,
                        [`${prefixCls}-wrapper-disabled`]: this.disabled,
                        [`${prefixCls}-wrapper-${this.size}`]: !!this.size
                    }
                ]
            },
            checkboxClasses() {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-checked`]: this.currentValue,
                        [`${prefixCls}-disabled`]: this.disabled,
                        [`${prefixCls}-indeterminate`]: this.indeterminate
                    }
                ]
            },
            innerClasses() {
                return `${prefixCls}-inner`
            },
            inputClasses() {
                return `${prefixCls}-input`
            }
        },
        watch: {
            value(val) {
                if (val === this.trueValue || val === this.falseValue) {
                    this.updateValue()
                }
            }
        },
        methods: {
            updateValue() {
                this.currentValue = this.value === this.trueValue
            },
            handleChange(event) {
                if (this.disabled) {
                    return false
                }

                const checked = event.target.checked
                this.currentValue = checked

                const value = checked ? this.trueValue : this.falseValue
                this.$emit('input', value)

                if (this.group) {
                    this.parent.handleChange(this.model, event)
                } else {
                    /**
                     * radio值改变事件
                     * @property {value} 当前值
                     * @property {event} 原生事件
                     */
                    this.$emit('on-change', value, event)
                    this.dispatch('YYFormItem', 'on-form-change', value, event)
                }
            }
        },
        mounted() {
            this.parent = findComponentUpward(this, 'YYCheckboxGroup')
            this.group = !!this.parent

            if (this.group) {
                this.parent.updateModel(true)
            } else {
                this.updateValue()
                this.showSlot = this.$slots.default !== undefined
            }
        }
    }
</script>
