import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getFuncText } from '../../ui/src/utils';
import { getConfig, createEvent, globalMixins, getIcon, renderEmptyElement } from '../../ui';
import { createComponentLog } from '../../ui/src/log';
const { warnLog } = createComponentLog('checkbox');
export default {
    name: 'VxeCheckbox',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        value: [String, Number, Boolean],
        /**
         * 已废弃，被 checkedValue 替换
         * @deprecated
         */
        label: {
            type: [String, Number],
            default: null
        },
        indeterminate: Boolean,
        title: [String, Number],
        checkedValue: {
            type: [String, Number, Boolean],
            default: true
        },
        uncheckedValue: {
            type: [String, Number, Boolean],
            default: false
        },
        content: [String, Number],
        disabled: {
            type: Boolean,
            default: null
        },
        size: {
            type: String,
            default: () => getConfig().checkbox.size || getConfig().size
        }
    },
    inject: {
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        },
        $xeCheckboxGroup: {
            default: null
        }
    },
    data() {
        const reactData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeCheckValue() {
            const $xeCheckbox = this;
            const props = $xeCheckbox;
            const { checkedValue, label } = props;
            return XEUtils.isUndefined(checkedValue) ? label : checkedValue;
        },
        computeIsChecked() {
            const $xeCheckbox = this;
            const props = $xeCheckbox;
            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
            const checkValue = $xeCheckbox.computeCheckValue;
            if ($xeCheckboxGroup) {
                return XEUtils.includes($xeCheckboxGroup.value, checkValue);
            }
            return props.value === props.checkedValue;
        },
        computeIsDisabled() {
            const $xeCheckbox = this;
            const props = $xeCheckbox;
            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
            const { disabled } = props;
            const isChecked = $xeCheckbox.computeIsChecked;
            if (disabled === null) {
                if ($xeCheckboxGroup) {
                    const isGroupDisabled = $xeCheckboxGroup.computeIsDisabled;
                    const isGroupReadonly = $xeCheckboxGroup.computeIsReadonly;
                    const isGroupMaximize = $xeCheckboxGroup.computeIsMaximize;
                    return isGroupDisabled || isGroupReadonly || (isGroupMaximize && !isChecked);
                }
            }
            return disabled;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeCheckbox = this;
            $xeCheckbox.$emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params));
        },
        emitModel(value) {
            const $xeCheckbox = this;
            const { _events } = $xeCheckbox;
            $xeCheckbox.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeCheckbox.$emit('modelValue', value);
            }
            else {
                $xeCheckbox.$emit('model-value', value);
            }
        },
        changeEvent(evnt) {
            const $xeCheckbox = this;
            const props = $xeCheckbox;
            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
            const $xeForm = $xeCheckbox.$xeForm;
            const formItemInfo = $xeCheckbox.formItemInfo;
            const { uncheckedValue } = props;
            const isDisabled = $xeCheckbox.computeIsDisabled;
            const checkValue = $xeCheckbox.computeCheckValue;
            if (!isDisabled) {
                const checked = evnt.target.checked;
                if ($xeCheckboxGroup) {
                    const value = checkValue;
                    const params = { checked, value, label: value };
                    $xeCheckboxGroup.handleChecked(params, evnt);
                }
                else {
                    const value = checked ? checkValue : uncheckedValue;
                    const params = { checked, value, label: value };
                    $xeCheckbox.emitModel(value);
                    $xeCheckbox.dispatchEvent('change', params, evnt);
                    // 自动更新校验状态
                    if ($xeForm && formItemInfo) {
                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                    }
                }
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeCheckbox = this;
            const props = $xeCheckbox;
            const slots = $xeCheckbox.$scopedSlots;
            const $xeCheckboxGroup = $xeCheckbox.$xeCheckboxGroup;
            const { content } = props;
            const vSize = $xeCheckbox.computeSize;
            const isDisabled = $xeCheckbox.computeIsDisabled;
            const isChecked = $xeCheckbox.computeIsChecked;
            const checkValue = $xeCheckbox.computeCheckValue;
            const indeterminate = !isChecked && props.indeterminate;
            const defaultSlot = slots.default;
            if ($xeCheckboxGroup) {
                const isGroupReadonly = $xeCheckboxGroup.computeIsReadonly;
                if (isGroupReadonly) {
                    if (isChecked) {
                        return h('label', {
                            class: ['vxe-checkbox vxe-checkbox--view', {
                                    [`size--${vSize}`]: vSize,
                                    'is--readonly': isGroupReadonly
                                }]
                        }, [
                            h('span', {
                                class: 'vxe-checkbox--label'
                            }, defaultSlot ? defaultSlot({}) : getFuncText(content))
                        ]);
                    }
                    return renderEmptyElement($xeCheckbox);
                }
            }
            return h('label', {
                key: `${checkValue}`,
                class: ['vxe-checkbox vxe-checkbox--default', {
                        [`size--${vSize}`]: vSize,
                        'is--indeterminate': indeterminate,
                        'is--disabled': isDisabled,
                        'is--checked': isChecked
                    }],
                attrs: {
                    title: props.title
                }
            }, [
                h('input', {
                    class: 'vxe-checkbox--input',
                    domProps: {
                        checked: isChecked
                    },
                    attrs: {
                        type: 'checkbox',
                        disabled: isDisabled
                    },
                    on: {
                        change: $xeCheckbox.changeEvent
                    }
                }),
                h('span', {
                    class: ['vxe-checkbox--icon', indeterminate ? getIcon().CHECKBOX_INDETERMINATE : (isChecked ? getIcon().CHECKBOX_CHECKED : (isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED))]
                }),
                h('span', {
                    class: 'vxe-checkbox--label'
                }, defaultSlot ? defaultSlot({}) : getFuncText(content))
            ]);
        }
    },
    mounted() {
        const $xeCheckbox = this;
        const props = $xeCheckbox;
        if (props.label !== null) {
            warnLog('vxe.error.delProp', ['label', 'checked-value']);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
