import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins } from '../../ui';
import VxeRadioComponent from '../../radio';
import VxeRadioButtonComponent from '../../radio-button';
function createReactData() {
    return {};
}
function createInternalData() {
    return {
    // isLoaded: false
    };
}
export default {
    name: 'VxeRadioGroup',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        value: [String, Number, Boolean],
        disabled: {
            type: Boolean,
            default: null
        },
        readonly: {
            type: Boolean,
            default: null
        },
        type: String,
        status: {
            type: String,
            default: () => getConfig().radioGroup.status
        },
        options: Array,
        optionProps: Object,
        strict: {
            type: Boolean,
            default: () => getConfig().radioGroup.strict
        },
        size: {
            type: String,
            default: () => getConfig().radioGroup.size || getConfig().size
        },
        defaultConfig: Object
    },
    inject: {
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        }
    },
    provide() {
        const $xeRadioGroup = this;
        return {
            $xeRadioGroup
        };
    },
    data() {
        const reactData = createReactData();
        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), name: XEUtils.uniqueId('xe_group_'), reactData });
    },
    computed: Object.assign(Object.assign({}, {}), { computeIsReadonly() {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            const $xeForm = $xeRadioGroup.$xeForm;
            const { readonly } = props;
            if (readonly === null) {
                if ($xeForm) {
                    return $xeForm.readonly;
                }
                return false;
            }
            return readonly;
        },
        computeIsDisabled() {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            const $xeForm = $xeRadioGroup.$xeForm;
            const { disabled } = props;
            if (disabled === null) {
                if ($xeForm) {
                    return $xeForm.disabled;
                }
                return false;
            }
            return disabled;
        },
        computePropsOpts() {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            return Object.assign({}, props.optionProps);
        },
        computeDefaultOpts() {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            return Object.assign({}, props.defaultConfig);
        },
        computeLabelField() {
            const $xeRadioGroup = this;
            const propsOpts = $xeRadioGroup.computePropsOpts;
            return propsOpts.label || 'label';
        },
        computeValueField() {
            const $xeRadioGroup = this;
            const propsOpts = $xeRadioGroup.computePropsOpts;
            return propsOpts.value || 'value';
        },
        computeDisabledField() {
            const $xeRadioGroup = this;
            const propsOpts = $xeRadioGroup.computePropsOpts;
            return propsOpts.disabled || 'disabled';
        },
        computeIconField() {
            const $xeRadioGroup = this;
            const propsOpts = $xeRadioGroup.computePropsOpts;
            return propsOpts.icon || 'icon';
        },
        computeTitleField() {
            const $xeRadioGroup = this;
            const propsOpts = $xeRadioGroup.computePropsOpts;
            return propsOpts.title || 'title';
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeRadioGroup = this;
            $xeRadioGroup.$emit(type, createEvent(evnt, { $radioGroup: $xeRadioGroup }, params));
        },
        emitModel(value) {
            const $xeRadioGroup = this;
            const { _events } = $xeRadioGroup;
            $xeRadioGroup.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeRadioGroup.$emit('modelValue', value);
            }
            else {
                $xeRadioGroup.$emit('model-value', value);
            }
        },
        emitDefaultValue(value) {
            const $xeRadioGroup = this;
            $xeRadioGroup.emitModel(value);
            $xeRadioGroup.dispatchEvent('default-change', { value }, null);
        },
        loadData(datas) {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            const internalData = $xeRadioGroup.internalData;
            const { isLoaded } = internalData;
            const defaultOpts = $xeRadioGroup.computeDefaultOpts;
            const valueField = $xeRadioGroup.computeValueField;
            if (!isLoaded) {
                const { selectMode } = defaultOpts;
                if (datas.length > 0 && XEUtils.eqNull(props.value)) {
                    if (selectMode === 'first' || selectMode === 'last') {
                        const selectItem = XEUtils[selectMode](datas);
                        if (selectItem) {
                            $xeRadioGroup.$nextTick(() => {
                                if (XEUtils.eqNull(props.value)) {
                                    $xeRadioGroup.emitDefaultValue(selectItem[valueField]);
                                }
                            });
                        }
                    }
                    internalData.isLoaded = true;
                }
            }
            return $xeRadioGroup.$nextTick();
        },
        handleChecked(params, evnt) {
            const $xeRadioGroup = this;
            const $xeForm = $xeRadioGroup.$xeForm;
            const formItemInfo = $xeRadioGroup.formItemInfo;
            const { checkedValue, checkedLabel } = params;
            const value = checkedValue;
            $xeRadioGroup.emitModel(value);
            $xeRadioGroup.dispatchEvent('change', { value, label: value, checkedValue, checkedLabel }, evnt);
            // 自动更新校验状态
            if ($xeForm && formItemInfo) {
                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeRadioGroup = this;
            const props = $xeRadioGroup;
            const slots = $xeRadioGroup.$scopedSlots;
            const { options, type, status } = props;
            const vSize = $xeRadioGroup.computeSize;
            const defaultSlot = slots.default;
            const valueField = $xeRadioGroup.computeValueField;
            const labelField = $xeRadioGroup.computeLabelField;
            const disabledField = $xeRadioGroup.computeDisabledField;
            const iconField = $xeRadioGroup.computeIconField;
            const titleField = $xeRadioGroup.computeTitleField;
            const btnComp = type === 'button' ? VxeRadioButtonComponent : VxeRadioComponent;
            return h('div', {
                class: ['vxe-radio-group', `type--${type === 'button' ? type : ''}`, {
                        [`theme--${status}`]: status,
                        [`size--${vSize}`]: vSize
                    }]
            }, defaultSlot
                ? defaultSlot({})
                : (options
                    ? options.map(item => {
                        return h(btnComp, {
                            key: item[valueField],
                            props: {
                                checkedValue: item[valueField],
                                content: item[labelField],
                                icon: item[iconField],
                                title: item[titleField],
                                disabled: item[disabledField]
                            }
                        });
                    })
                    : []));
        }
    },
    watch: {
        options(val) {
            const $xeRadioGroup = this;
            $xeRadioGroup.loadData(val);
        }
    },
    created() {
        const $xeRadioGroup = this;
        $xeRadioGroup.internalData = createInternalData();
    },
    mounted() {
        const $xeRadioGroup = this;
        const props = $xeRadioGroup;
        $xeRadioGroup.$nextTick(() => {
            const { options } = props;
            if (options) {
                $xeRadioGroup.loadData(options);
            }
        });
    },
    beforeDestroy() {
        const $xeRadioGroup = this;
        const reactData = $xeRadioGroup.reactData;
        const internalData = $xeRadioGroup.internalData;
        XEUtils.assign(internalData, createInternalData());
        XEUtils.assign(reactData, createReactData());
    },
    render(h) {
        return this.renderVN(h);
    }
};
