import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui';
import { toCssUnit } from '../../ui/src/dom';
import { getSlotVNs } from '../../ui/src/vn';
import VxeLoadingComponent from '../../loading/src/loading';
export default {
    name: 'VxeCard',
    mixins: [
        globalMixins.sizeMixin
    ],
    props: {
        title: String,
        showTitleOverflow: {
            type: Boolean,
            default: () => getConfig().card.showTitleOverflow
        },
        width: [String, Number],
        height: [String, Number],
        border: {
            type: Boolean,
            default: () => getConfig().card.border
        },
        loading: Boolean,
        shadow: {
            type: Boolean,
            default: () => getConfig().card.shadow
        },
        padding: {
            type: Boolean,
            default: () => getConfig().card.padding
        },
        size: {
            type: String,
            default: () => getConfig().card.size || getConfig().size
        }
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = {};
        return {
            xID,
            reactData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeCardStyle() {
            const $xeCard = this;
            const props = $xeCard;
            const { height, width } = props;
            const stys = {};
            if (width) {
                stys.width = toCssUnit(width);
            }
            if (height) {
                stys.height = toCssUnit(height);
            }
            return stys;
        } }),
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeCard = this;
            $xeCard.$emit(type, createEvent(evnt, { $card: $xeCard }, params));
        },
        //
        // Render
        //
        renderVN(h) {
            const $xeCard = this;
            const props = $xeCard;
            const slots = $xeCard.$scopedSlots;
            const { title, border, shadow, padding, loading, showTitleOverflow } = props;
            const defaultSlot = slots.default;
            const headerSlot = slots.header;
            const titleSlot = slots.title;
            const extraSlot = slots.extra;
            const footerSlot = slots.footer;
            const leftSlot = slots.left;
            const rightSlot = slots.right;
            const vSize = $xeCard.computeSize;
            const cardStyle = $xeCard.computeCardStyle;
            return h('div', {
                ref: 'refElem',
                class: ['vxe-card', {
                        [`size--${vSize}`]: vSize,
                        'is--border': border,
                        'is--shadow': shadow,
                        'is--padding': padding
                    }],
                style: cardStyle
            }, [
                title || titleSlot || headerSlot
                    ? h('div', {
                        class: 'vxe-card--header'
                    }, headerSlot
                        ? getSlotVNs(headerSlot({}))
                        : [
                            h('div', {
                                class: ['vxe-card--header-title', {
                                        'is--ellipsis': showTitleOverflow
                                    }]
                            }, titleSlot ? getSlotVNs(titleSlot({})) : `${title || ''}`),
                            extraSlot
                                ? h('div', {
                                    class: 'vxe-card--header-extra'
                                }, getSlotVNs(extraSlot({})))
                                : renderEmptyElement($xeCard)
                        ])
                    : renderEmptyElement($xeCard),
                h('div', {
                    class: 'vxe-card--body'
                }, [
                    leftSlot
                        ? h('div', {
                            class: 'vxe-card--body-left'
                        }, getSlotVNs(leftSlot({})))
                        : renderEmptyElement($xeCard),
                    h('div', {
                        class: 'vxe-card--body-content'
                    }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
                    rightSlot
                        ? h('div', {
                            class: 'vxe-card--body-right'
                        }, getSlotVNs(rightSlot({})))
                        : renderEmptyElement($xeCard)
                ]),
                footerSlot
                    ? h('div', {
                        class: 'vxe-card--footer'
                    }, getSlotVNs(footerSlot({})))
                    : renderEmptyElement($xeCard),
                /**
                 * 加载中
                 */
                h(VxeLoadingComponent, {
                    class: 'vxe-card--loading',
                    props: {
                        value: loading
                    }
                })
            ]);
        }
    },
    render(h) {
        return this.renderVN(h);
    }
};
