import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins } from '../../ui';
import VxeCheckboxComponent from '../../checkbox';
import VxeCheckboxButtonComponent from '../../checkbox-button';
function createReactData() {
    return {};
}
function createInternalData() {
    return {
    // isLoaded: false
    };
}
export default {
    name: 'VxeCheckboxGroup',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        value: Array,
        options: Array,
        optionProps: Object,
        readonly: {
            type: Boolean,
            default: null
        },
        type: String,
        disabled: {
            type: Boolean,
            default: null
        },
        status: {
            type: String,
            default: () => getConfig().checkboxGroup.status
        },
        max: {
            type: [String, Number],
            default: null
        },
        size: {
            type: String,
            default: () => getConfig().checkboxGroup.size || getConfig().size
        },
        defaultConfig: Object
    },
    inject: {
        $xeForm: {
            default: null
        },
        formItemInfo: {
            from: 'xeFormItemInfo',
            default: null
        }
    },
    provide() {
        const $xeCheckboxGroup = this;
        return {
            $xeCheckboxGroup
        };
    },
    data() {
        const reactData = createReactData();
        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
    },
    computed: Object.assign(Object.assign({}, {}), { computeIsReadonly() {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const $xeForm = $xeCheckboxGroup.$xeForm;
            const { readonly } = props;
            if (readonly === null) {
                if ($xeForm) {
                    return $xeForm.readonly;
                }
                return false;
            }
            return readonly;
        },
        computeIsDisabled() {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const $xeForm = $xeCheckboxGroup.$xeForm;
            const { disabled } = props;
            if (disabled === null) {
                if ($xeForm) {
                    return $xeForm.disabled;
                }
                return false;
            }
            return disabled;
        },
        computeIsMaximize() {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const { value, max } = props;
            if (max) {
                return (value ? value.length : 0) >= XEUtils.toNumber(max);
            }
            return false;
        },
        computeDefaultOpts() {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            return Object.assign({}, props.defaultConfig);
        },
        computePropsOpts() {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            return Object.assign({}, props.optionProps);
        },
        computeLabelField() {
            const $xeCheckboxGroup = this;
            const propsOpts = $xeCheckboxGroup.computePropsOpts;
            return propsOpts.label || 'label';
        },
        computeValueField() {
            const $xeCheckboxGroup = this;
            const propsOpts = $xeCheckboxGroup.computePropsOpts;
            return propsOpts.value || 'value';
        },
        computeIconField() {
            const $xeCheckboxGroup = this;
            const propsOpts = $xeCheckboxGroup.computePropsOpts;
            return propsOpts.icon || 'icon';
        },
        computeTitleField() {
            const $xeCheckboxGroup = this;
            const propsOpts = $xeCheckboxGroup.computePropsOpts;
            return propsOpts.title || 'title';
        },
        computeDisabledField() {
            const $xeCheckboxGroup = this;
            const propsOpts = $xeCheckboxGroup.computePropsOpts;
            return propsOpts.disabled || 'disabled';
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeCheckboxGroup = this;
            $xeCheckboxGroup.$emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params));
        },
        emitModel(value) {
            const $xeCheckboxGroup = this;
            const { _events } = $xeCheckboxGroup;
            $xeCheckboxGroup.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeCheckboxGroup.$emit('modelValue', value);
            }
            else {
                $xeCheckboxGroup.$emit('model-value', value);
            }
        },
        emitDefaultValue(value) {
            const $xeCheckboxGroup = this;
            $xeCheckboxGroup.emitModel(value);
            $xeCheckboxGroup.dispatchEvent('default-change', { value }, null);
        },
        loadData(datas) {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const internalData = $xeCheckboxGroup.internalData;
            const { isLoaded } = internalData;
            const defaultOpts = $xeCheckboxGroup.computeDefaultOpts;
            const valueField = $xeCheckboxGroup.computeValueField;
            if (!isLoaded) {
                const { selectMode } = defaultOpts;
                if (datas.length > 0 && XEUtils.eqNull(props.value)) {
                    if (selectMode === 'all') {
                        $xeCheckboxGroup.$nextTick(() => {
                            $xeCheckboxGroup.emitDefaultValue(datas.map(item => item[valueField]));
                        });
                    }
                    else if (selectMode === 'first' || selectMode === 'last') {
                        const selectItem = XEUtils[selectMode](datas);
                        if (selectItem) {
                            $xeCheckboxGroup.$nextTick(() => {
                                if (XEUtils.eqNull(props.value)) {
                                    $xeCheckboxGroup.emitDefaultValue([selectItem[valueField]]);
                                }
                            });
                        }
                    }
                    internalData.isLoaded = true;
                }
            }
            return $xeCheckboxGroup.$nextTick();
        },
        handleChecked(params, evnt) {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const $xeForm = $xeCheckboxGroup.$xeForm;
            const formItemInfo = $xeCheckboxGroup.formItemInfo;
            const { checked, label } = params;
            const checklist = props.value || [];
            const checkIndex = checklist.indexOf(label);
            if (checked) {
                if (checkIndex === -1) {
                    checklist.push(label);
                }
            }
            else {
                checklist.splice(checkIndex, 1);
            }
            $xeCheckboxGroup.emitModel(checklist);
            $xeCheckboxGroup.dispatchEvent('change', Object.assign({}, params, { checklist, value: checklist }), evnt);
            // 自动更新校验状态
            if ($xeForm && formItemInfo) {
                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist);
            }
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeCheckboxGroup = this;
            const props = $xeCheckboxGroup;
            const slots = $xeCheckboxGroup.$scopedSlots;
            const { status, options, type } = props;
            const defaultSlot = slots.default;
            const valueField = $xeCheckboxGroup.computeValueField;
            const labelField = $xeCheckboxGroup.computeLabelField;
            const disabledField = $xeCheckboxGroup.computeDisabledField;
            const iconField = $xeCheckboxGroup.computeIconField;
            const titleField = $xeCheckboxGroup.computeTitleField;
            const isReadonly = $xeCheckboxGroup.computeIsReadonly;
            const isDisabled = $xeCheckboxGroup.computeIsDisabled;
            const btnComp = type === 'button' ? VxeCheckboxButtonComponent : VxeCheckboxComponent;
            return h('div', {
                class: ['vxe-checkbox-group', `type--${type === 'button' ? type : ''}`, {
                        [`theme--${status}`]: status,
                        'is--readonly': isReadonly,
                        'is--disabled': isDisabled
                    }]
            }, 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 $xeCheckboxGroup = this;
            $xeCheckboxGroup.loadData(val);
        }
    },
    created() {
        const $xeCheckboxGroup = this;
        $xeCheckboxGroup.internalData = createInternalData();
    },
    mounted() {
        const $xeCheckboxGroup = this;
        const props = $xeCheckboxGroup;
        $xeCheckboxGroup.$nextTick(() => {
            const { options } = props;
            if (options) {
                $xeCheckboxGroup.loadData(options);
            }
        });
    },
    beforeDestroy() {
        const $xeCheckboxGroup = this;
        const reactData = $xeCheckboxGroup.reactData;
        const internalData = $xeCheckboxGroup.internalData;
        XEUtils.assign(reactData, createReactData());
        XEUtils.assign(internalData, createInternalData());
    },
    render(h) {
        return this.renderVN(h);
    }
};
