import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui';
import { getFuncText } from '../../ui/src/utils';
export default {
    name: 'VxeSwitch',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        value: [String, Number, Boolean],
        disabled: {
            type: Boolean,
            default: null
        },
        readonly: {
            type: Boolean,
            default: null
        },
        size: {
            type: String,
            default: () => getConfig().switch.size || getConfig().size
        },
        openLabel: String,
        closeLabel: String,
        openValue: {
            type: [String, Number, Boolean],
            default: true
        },
        closeValue: {
            type: [String, Number, Boolean],
            default: false
        },
        openIcon: String,
        closeIcon: String,
        openActiveIcon: String,
        closeActiveIcon: String
    },
    inject: {
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        }
    },
    data() {
        const reactData = {
            isActivated: false,
            hasAnimat: false,
            offsetLeft: 0
        };
        const internalData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData,
            internalData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeIsReadonly() {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const $xeForm = $xeSwitch.$xeForm;
            const { readonly } = props;
            if (readonly === null) {
                if ($xeForm) {
                    return $xeForm.readonly;
                }
                return false;
            }
            return readonly;
        },
        computeIsDisabled() {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const $xeForm = $xeSwitch.$xeForm;
            const { disabled } = props;
            if (disabled === null) {
                if ($xeForm) {
                    return $xeForm.disabled;
                }
                return false;
            }
            return disabled;
        },
        computeOnShowLabel() {
            const $xeSwitch = this;
            const props = $xeSwitch;
            return getFuncText(props.openLabel);
        },
        computeOffShowLabel() {
            const $xeSwitch = this;
            const props = $xeSwitch;
            return getFuncText(props.closeLabel);
        },
        computeIsChecked() {
            const $xeSwitch = this;
            const props = $xeSwitch;
            return props.value === props.openValue;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeSwitch = this;
            $xeSwitch.$emit(type, createEvent(evnt, { $switch: $xeSwitch }, params));
        },
        emitModel(value) {
            const $xeSwitch = this;
            const { _events } = $xeSwitch;
            $xeSwitch.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeSwitch.$emit('modelValue', value);
            }
            else {
                $xeSwitch.$emit('model-value', value);
            }
        },
        focus() {
            const $xeSwitch = this;
            const reactData = $xeSwitch.reactData;
            const btnElem = $xeSwitch.$refs.refButton;
            reactData.isActivated = true;
            if (btnElem) {
                btnElem.focus();
            }
            return $xeSwitch.$nextTick();
        },
        blur() {
            const $xeSwitch = this;
            const reactData = $xeSwitch.reactData;
            const btnElem = $xeSwitch.$refs.refButton;
            if (btnElem) {
                btnElem.blur();
            }
            reactData.isActivated = false;
            return $xeSwitch.$nextTick();
        },
        clickEvent(evnt) {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const reactData = $xeSwitch.reactData;
            const internalData = $xeSwitch.internalData;
            const $xeForm = $xeSwitch.$xeForm;
            const formItemInfo = $xeSwitch.formItemInfo;
            const isDisabled = $xeSwitch.computeIsDisabled;
            const isReadonly = $xeSwitch.computeIsReadonly;
            if (!(isDisabled || isReadonly)) {
                const isChecked = $xeSwitch.computeIsChecked;
                clearTimeout(internalData.atTimeout);
                const value = isChecked ? props.closeValue : props.openValue;
                reactData.hasAnimat = true;
                $xeSwitch.emitModel(value);
                $xeSwitch.dispatchEvent('change', { value }, evnt);
                // 自动更新校验状态
                if ($xeForm && formItemInfo) {
                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                }
                internalData.atTimeout = setTimeout(() => {
                    reactData.hasAnimat = false;
                    internalData.atTimeout = undefined;
                }, 400);
            }
        },
        focusEvent(evnt) {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const reactData = $xeSwitch.reactData;
            reactData.isActivated = true;
            $xeSwitch.dispatchEvent('focus', { value: props.value }, evnt);
        },
        blurEvent(evnt) {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const reactData = $xeSwitch.reactData;
            reactData.isActivated = false;
            $xeSwitch.dispatchEvent('blur', { value: props.value }, evnt);
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeSwitch = this;
            const props = $xeSwitch;
            const reactData = $xeSwitch.reactData;
            const { openIcon, closeIcon, openActiveIcon, closeActiveIcon } = props;
            const vSize = $xeSwitch.computeSize;
            const isChecked = $xeSwitch.computeIsChecked;
            const onShowLabel = $xeSwitch.computeOnShowLabel;
            const offShowLabel = $xeSwitch.computeOffShowLabel;
            const isDisabled = $xeSwitch.computeIsDisabled;
            const isReadonly = $xeSwitch.computeIsReadonly;
            if (isReadonly) {
                return h('div', {
                    class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', {
                            [`size--${vSize}`]: vSize,
                            'is--readonly': isReadonly
                        }]
                }, isChecked ? (onShowLabel || getI18n('vxe.switch.onText')) : offShowLabel || getI18n('vxe.switch.offText'));
            }
            return h('div', {
                class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', {
                        [`size--${vSize}`]: vSize,
                        'is--disabled': isDisabled,
                        'is--readonly': isReadonly,
                        'is--animat': reactData.hasAnimat
                    }]
            }, [
                h('button', {
                    ref: 'refButton',
                    class: 'vxe-switch--button',
                    attrs: {
                        type: 'button',
                        disabled: isDisabled || isReadonly
                    },
                    on: {
                        click: $xeSwitch.clickEvent,
                        focus: $xeSwitch.focusEvent,
                        blur: $xeSwitch.blurEvent
                    }
                }, [
                    h('span', {
                        class: 'vxe-switch--label vxe-switch--label-on'
                    }, [
                        openIcon
                            ? h('i', {
                                class: ['vxe-switch--label-icon', openIcon]
                            })
                            : renderEmptyElement($xeSwitch),
                        onShowLabel
                    ]),
                    h('span', {
                        class: 'vxe-switch--label vxe-switch--label-off'
                    }, [
                        closeIcon
                            ? h('i', {
                                class: ['vxe-switch--label-icon', closeIcon]
                            })
                            : renderEmptyElement($xeSwitch),
                        offShowLabel
                    ]),
                    h('span', {
                        class: ['vxe-switch--icon']
                    }, openActiveIcon || closeActiveIcon
                        ? [
                            h('i', {
                                class: isChecked ? openActiveIcon : closeActiveIcon
                            })
                        ]
                        : [])
                ])
            ]);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
