<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/lib/wxs/utils.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
component_1.VantComponent({
    field: true,
    relation: {
        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,
            value: 'right'
        },
        labelDisabled: Boolean,
        shape: {
            type: String,
            value: 'round'
        },
        iconSize: {
            type: null,
            value: 20
        }
    },
    methods: {
        emitChange: function (value) {
            var instance = this.parent || this;
            instance.$emit('input', value);
            instance.$emit('change', value);
        },
        onChange: function () {
            if (!this.disabled) {
                this.emitChange(this.name);
            }
        },
        onClickLabel: function () {
            var _a = this;
            var disabled = _a.disabled;
            var labelDisabled = _a.labelDisabled;
            var name = _a.name;
            if (!disabled && !labelDisabled) {
                this.emitChange(name);
            }
        }
    }
});
</script>
<style>
@import './index.css';
</style>
