import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins, renderEmptyElement } from '@vxe-ui/core';
import VxeButtonComponent from './button';
export default {
    name: 'VxeButtonGroup',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        options: Array,
        mode: String,
        status: String,
        round: Boolean,
        vertical: Boolean,
        circle: Boolean,
        align: String,
        className: [String, Function],
        disabled: Boolean,
        permissionCode: [String, Number],
        size: {
            type: String,
            default: () => getConfig().buttonGroup.size || getConfig().size
        }
    },
    provide() {
        const $xeButtonGroup = this;
        return {
            $xeButtonGroup
        };
    },
    data() {
        const reactData = {};
        return {
            xID: XEUtils.uniqueId(),
            reactData
        };
    },
    computed: Object.assign({}, {}),
    methods: {
        // Method
        dispatchEvent(type, params, evnt) {
            const $xeButtonGroup = this;
            $xeButtonGroup.$emit(type, createEvent(evnt, { $buttonGroup: $xeButtonGroup }, params));
        },
        //
        // Private
        //
        handleClick(params, evnt) {
            const $xeButtonGroup = this;
            const props = $xeButtonGroup;
            const { options } = props;
            const { name } = params;
            const option = options ? options.find(item => item.name === name) : null;
            $xeButtonGroup.dispatchEvent('click', Object.assign(Object.assign({}, params), { option }), evnt);
        },
        contextmenuEvent(evnt) {
            const $xeButtonGroup = this;
            $xeButtonGroup.dispatchEvent('contextmenu', {}, evnt);
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeButtonGroup = this;
            const props = $xeButtonGroup;
            const slots = $xeButtonGroup.$scopedSlots;
            const { className, options, vertical } = props;
            const permissionInfo = $xeButtonGroup.computePermissionInfo;
            const defaultSlot = slots.default;
            if (!permissionInfo.visible) {
                return renderEmptyElement($xeButtonGroup);
            }
            return h('div', {
                class: ['vxe-button-group', className ? (XEUtils.isFunction(className) ? className({ $buttonGroup: $xeButtonGroup }) : className) : '', {
                        'is--vertical': vertical
                    }],
                on: {
                    contextmenu: $xeButtonGroup.contextmenuEvent
                }
            }, defaultSlot
                ? defaultSlot({})
                : (options
                    ? options.map((item, index) => {
                        return h(VxeButtonComponent, {
                            key: index,
                            props: item
                        });
                    })
                    : []));
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
