import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getFuncText } from '../../ui/src/utils';
import { getConfig, createEvent, globalMixins } from '../../ui';
export default {
    name: 'VxeRadioButton',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        value: [String, Number, Boolean],
        checkedValue: {
            type: [String, Number, Boolean],
            default: undefined
        },
        title: [String, Number],
        content: [String, Number],
        disabled: {
            type: Boolean,
            default: null
        },
        strict: {
            type: Boolean,
            default: () => getConfig().radioButton.strict
        },
        size: {
            type: String,
            default: () => getConfig().radioButton.size || getConfig().size
        },
        /**
         * 已废弃，被 checkedValue 替换
         */
        label: {
            type: [String, Number, Boolean],
            default: null
        }
    },
    inject: {
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        },
        $xeRadioGroup: {
            default: null
        }
    },
    data() {
        const reactData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeIsDisabled() {
            const $xeRadioButton = this;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            const { disabled } = $xeRadioButton;
            if (disabled === null) {
                if ($xeRadioGroup) {
                    const isDisabled = $xeRadioGroup.computeIsDisabled;
                    return isDisabled;
                }
            }
            return disabled;
        },
        computeName() {
            const $xeRadioButton = this;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            return $xeRadioGroup ? $xeRadioGroup.name : null;
        },
        computeStrict() {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            return $xeRadioGroup ? $xeRadioGroup.strict : props.strict;
        },
        computeChecked() {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            const { label, checkedValue } = props;
            const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
            return $xeRadioGroup ? $xeRadioGroup.value === radioValue : props.value === radioValue;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeRadioButton = this;
            $xeRadioButton.$emit(type, createEvent(evnt, { $radioButton: $xeRadioButton }, params));
        },
        emitModel(value) {
            const $xeRadioButton = this;
            const { _events } = $xeRadioButton;
            $xeRadioButton.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeRadioButton.$emit('modelValue', value);
            }
            else {
                $xeRadioButton.$emit('model-value', value);
            }
        },
        handleValue(checkedValue, evnt) {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const $xeForm = $xeRadioButton.$xeForm;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            const formItemInfo = $xeRadioButton.formItemInfo;
            const { content } = props;
            if ($xeRadioGroup) {
                $xeRadioGroup.handleChecked({ label: checkedValue, checkedValue, checkedLabel: content }, evnt);
            }
            else {
                $xeRadioButton.emitModel(checkedValue);
                $xeRadioButton.dispatchEvent('change', { value: checkedValue, label: checkedValue, checkedValue, checkedLabel: content }, evnt);
                // 自动更新校验状态
                if ($xeForm && formItemInfo) {
                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checkedValue);
                }
            }
        },
        changeEvent(evnt) {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const isDisabled = $xeRadioButton.computeIsDisabled;
            if (!isDisabled) {
                const { label, checkedValue } = props;
                const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
                $xeRadioButton.handleValue(radioValue, evnt);
            }
        },
        clickEvent(evnt) {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const $xeRadioGroup = $xeRadioButton.$xeRadioGroup;
            const isDisabled = $xeRadioButton.computeIsDisabled;
            const isStrict = $xeRadioButton.computeStrict;
            if (!isDisabled && !isStrict) {
                const { label, checkedValue } = props;
                const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
                if (radioValue === ($xeRadioGroup ? $xeRadioGroup.value : props.value)) {
                    $xeRadioButton.handleValue(null, evnt);
                }
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeRadioButton = this;
            const props = $xeRadioButton;
            const slots = $xeRadioButton.$scopedSlots;
            const { label, checkedValue } = props;
            const radioValue = XEUtils.isUndefined(checkedValue) ? label : checkedValue;
            const vSize = $xeRadioButton.computeSize;
            const isDisabled = $xeRadioButton.computeIsDisabled;
            const name = $xeRadioButton.computeName;
            const isChecked = $xeRadioButton.computeChecked;
            return h('label', {
                key: radioValue,
                class: ['vxe-radio vxe-radio--button', {
                        [`size--${vSize}`]: vSize,
                        'is--disabled': isDisabled
                    }],
                attrs: {
                    title: props.title
                }
            }, [
                h('input', {
                    class: 'vxe-radio--input',
                    domProps: {
                        checked: isChecked
                    },
                    attrs: {
                        type: 'radio',
                        name,
                        disabled: isDisabled
                    },
                    on: {
                        change: $xeRadioButton.changeEvent,
                        click: $xeRadioButton.clickEvent
                    }
                }),
                h('span', {
                    class: 'vxe-radio--label'
                }, slots.default ? slots.default({}) : getFuncText(props.content))
            ]);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
