<template>
    <view class="van-checkbox custom-class">
        <view class="van-checkbox__icon-wrap" @tap="toggle">
            <slot v-if="useIconSlot" name="icon" />
            <van-icon
                v-else
                name="success"
                size="0.8em"
                :class="utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }])"
                :style="computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize)"
                custom-class="icon-class"
                custom-style="line-height: 1.25em;"
            />
        </view>
        <view :class="'label-class ' + utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }])" @tap="onClickLabel">
            <slot />
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script module="computed" lang="wxs" src="@/node_modules/@vant/weapp/dist/checkbox/index.wxs"></script>
<script>
import { VantComponent } from '../common/component';
function emit(target, value) {
    target.$emit('input', value);
    target.$emit('change', value);
}
export default {
    data() {
        return {
            parentDisabled: false
        };
    },
    field: true,
    '../checkbox-group/index': {
        name: 'checkbox-group',
        type: 'ancestor',
        current: 'checkbox'
    },
    classes: ['icon-class', 'label-class'],
    props: {
        value: Boolean,
        disabled: Boolean,
        useIconSlot: Boolean,
        checkedColor: String,
        labelPosition: String,
        labelDisabled: Boolean,
        shape: {
            type: String,
            default: 'round'
        },
        iconSize: {
            type: null,
            default: 20
        }
    },
    methods: {
        emitChange(value) {
            if (this.parent) {
                this.setParentValue(this.parent, value);
            } else {
                emit(this, value);
            }
        },
        toggle() {
            const { parentDisabled, disabled, value } = this;
            if (!disabled && !parentDisabled) {
                this.emitChange(!value);
            }
        },
        onClickLabel() {
            const { labelDisabled, parentDisabled, disabled, value } = this;
            if (!disabled && !labelDisabled && !parentDisabled) {
                this.emitChange(!value);
            }
        },
        setParentValue(parent, value) {
            const parentValue = parent.data.value.slice();
            const { name } = this;
            const { max } = parent.data;
            if (value) {
                if (max && parentValue.length >= max) {
                    return;
                }
                if (parentValue.indexOf(name) === -1) {
                    parentValue.push(name);
                    emit(parent, parentValue);
                }
            } else {
                const index = parentValue.indexOf(name);
                if (index !== -1) {
                    parentValue.splice(index, 1);
                    emit(parent, parentValue);
                }
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
