<template>
    <view class="van-radio custom-class">
        <view v-if="labelPosition === 'left'" :class="'label-class ' + utils.bem('radio__label', [labelPosition, { disabled }])" @tap="onClickLabel">
            <slot />
        </view>
        <view class="van-radio__icon-wrap" :style="'font-size: ' + utils.addUnit(iconSize) + ';'" @tap="onChange">
            <slot v-if="useIconSlot" name="icon" />
            <van-icon
                v-else
                name="success"
                :class="utils.bem('radio__icon', [shape, { disabled, checked: value === name }])"
                :style="
                    'font-size: ' +
                    utils.addUnit(iconSize) +
                    ';' +
                    (checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '')
                "
                custom-class="icon-class"
                :custom-style="'line-height: ' + utils.addUnit(iconSize) + ';font-size: .8em;display: block;'"
            />
        </view>
        <view v-if="labelPosition === 'right'" :class="'label-class ' + utils.bem('radio__label', [labelPosition, { disabled }])" @tap="onClickLabel">
            <slot />
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script>
import { VantComponent } from '../common/component';
export default {
    data() {
        return {};
    },
    field: true,
    '../radio-group/index': {
        name: 'radio-group',
        type: 'ancestor',
        current: 'radio'
    },
    classes: ['icon-class', 'label-class'],
    props: {
        name: null,
        value: null,
        disabled: Boolean,
        useIconSlot: Boolean,
        checkedColor: String,
        labelPosition: {
            type: String,
            default: 'right'
        },
        labelDisabled: Boolean,
        shape: {
            type: String,
            default: 'round'
        },
        iconSize: {
            type: null,
            default: 20
        }
    },
    methods: {
        emitChange(value) {
            const instance = this.parent || this;
            instance.$emit('input', value);
            instance.$emit('change', value);
        },
        onChange() {
            if (!this.disabled) {
                this.emitChange(this.name);
            }
        },
        onClickLabel() {
            const { disabled, labelDisabled, name } = this;
            if (!disabled && !labelDisabled) {
                this.emitChange(name);
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
