import { defineVxeComponent } from '../../ui/src/comp';
import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui';
import VxeLoadingComponent from '../../loading';
import VxeUIBacktopComponent from '../../backtop';
import XEUtils from 'xe-utils';
function createInternalData() {
    return {};
}
function createReactData() {
    return {};
}
export default {
    name: 'VxeLayoutBody',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        loading: Boolean,
        padding: Boolean,
        showBacktop: {
            type: Boolean,
            default: () => getConfig().layoutBody.showBacktop
        },
        backtopConfig: Object,
        size: {
            type: String,
            default: () => getConfig().layoutBody.size || getConfig().size
        }
    },
    data() {
        const xID = XEUtils.uniqueId();
        const backtopId = `vxe_layout_body_backtop_${xID}`;
        const reactData = createReactData();
        return Object.assign(Object.assign({}, {}), { xID,
            backtopId,
            reactData });
    },
    computed: Object.assign(Object.assign({}, {}), { computeBacktopOpts() {
            const $xeLayoutBody = this;
            const props = $xeLayoutBody;
            const backtopId = $xeLayoutBody.backtopId;
            return Object.assign({}, getConfig().layoutBody.backtopConfig, props.backtopConfig, {
                target: '#' + backtopId
            });
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeLayoutBody = this;
            $xeLayoutBody.$emit(type, createEvent(evnt, { $layoutBody: $xeLayoutBody }, params));
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeLayoutBody = this;
            const props = $xeLayoutBody;
            const slots = $xeLayoutBody.$scopedSlots;
            const backtopId = $xeLayoutBody.backtopId;
            const { loading, padding, showBacktop } = props;
            const backtopOpts = $xeLayoutBody.computeBacktopOpts;
            const vSize = $xeLayoutBody.computeSize;
            const defaultSlot = slots.default;
            const backtopSlot = slots.backtop;
            const backtopTopSlot = slots.backtopTop || slots['backtop-top'];
            const backtopBottomSlot = slots.backtopBottom || slots['backtop-bottom'];
            const backtopScopeSlots = {};
            if (backtopSlot) {
                backtopScopeSlots.default = backtopSlot;
            }
            if (backtopTopSlot) {
                backtopScopeSlots.top = backtopTopSlot;
            }
            if (backtopBottomSlot) {
                backtopScopeSlots.bottom = backtopBottomSlot;
            }
            return h('div', {
                class: ['vxe-layout-body', {
                        [`size--${vSize}`]: vSize,
                        'is--loading': loading,
                        'is--padding': padding
                    }]
            }, [
                h('div', {
                    attrs: {
                        id: showBacktop ? backtopId : ''
                    },
                    class: 'vxe-layout-body--inner'
                }, defaultSlot ? defaultSlot({}) : []),
                /**
                 * 加载中
                 */
                h(VxeLoadingComponent, {
                    class: 'vxe-list-view--loading',
                    props: {
                        value: loading
                    }
                }),
                /**
                 * 回到顶部
                 */
                showBacktop
                    ? h(VxeUIBacktopComponent, {
                        props: backtopOpts,
                        scopedSlots: backtopScopeSlots
                    })
                    : renderEmptyElement($xeLayoutBody)
            ]);
        }
    },
    created() {
        const $xeLayoutBody = this;
        $xeLayoutBody.internalData = createInternalData();
    },
    beforeDestroy() {
        const $xeLayoutBody = this;
        const reactData = $xeLayoutBody.reactData;
        const internalData = $xeLayoutBody.internalData;
        XEUtils.assign(reactData, createReactData());
        XEUtils.assign(internalData, createInternalData());
    },
    render(h) {
        return this.renderVN(h);
    }
};
