import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { VxeUI, getConfig, getI18n, getIcon, createEvent, globalEvents, globalMixins, renderEmptyElement, GLOBAL_EVENT_KEYS } from '../../ui';
import { getDomNode, getEventTargetNode, toCssUnit } from '../../ui/src/dom';
import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils';
import VxeButtonComponent from '../../button';
import VxeLoadingComponent from '../../loading';
import { getSlotVNs } from '../../ui/src/vn';
import { createComponentLog } from '../../ui/src/log';
const { warnLog, errLog } = createComponentLog('modal');
export const allActiveModals = [];
const msgQueue = [];
const notifyQueue = [];
const lockScrollAttrKey = 'data-vxe-lock-scroll';
const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
export default {
    name: 'VxeModal',
    mixins: [
        globalMixins.sizeMixin,
        globalMixins.permissionMixin
    ],
    props: {
        value: Boolean,
        id: String,
        type: {
            type: String,
            default: 'modal'
        },
        loading: {
            type: Boolean,
            default: null
        },
        status: String,
        iconStatus: String,
        className: String,
        top: {
            type: [Number, String],
            default: () => getConfig().modal.top
        },
        position: [String, Object],
        title: String,
        duration: {
            type: [Number, String],
            default: () => getConfig().modal.duration
        },
        content: [Number, String],
        useHtml: {
            type: Boolean,
            default: () => getConfig().modal.useHtml
        },
        showCancelButton: {
            type: Boolean,
            default: null
        },
        cancelButtonText: {
            type: String,
            default: () => getConfig().modal.cancelButtonText
        },
        showConfirmButton: {
            type: Boolean,
            default: () => getConfig().modal.showConfirmButton
        },
        confirmButtonText: {
            type: String,
            default: () => getConfig().modal.confirmButtonText
        },
        lockView: {
            type: Boolean,
            default: () => getConfig().modal.lockView
        },
        lockScroll: Boolean,
        mask: {
            type: Boolean,
            default: () => getConfig().modal.mask
        },
        maskClosable: {
            type: Boolean,
            default: () => getConfig().modal.maskClosable
        },
        escClosable: {
            type: Boolean,
            default: () => getConfig().modal.escClosable
        },
        cancelClosable: {
            type: Boolean,
            default: () => getConfig().modal.cancelClosable
        },
        confirmClosable: {
            type: Boolean,
            default: () => getConfig().modal.confirmClosable
        },
        resize: Boolean,
        showHeader: {
            type: Boolean,
            default: () => getConfig().modal.showHeader
        },
        showFooter: {
            type: Boolean,
            default: () => getConfig().modal.showFooter
        },
        preload: Boolean,
        showZoom: Boolean,
        zoomConfig: Object,
        showMaximize: {
            type: Boolean,
            default: () => handleBooleanDefaultValue(getConfig().modal.showMaximize)
        },
        showMinimize: {
            type: Boolean,
            default: () => handleBooleanDefaultValue(getConfig().modal.showMinimize)
        },
        showClose: {
            type: Boolean,
            default: () => getConfig().modal.showClose
        },
        dblclickZoom: {
            type: Boolean,
            default: () => getConfig().modal.dblclickZoom
        },
        width: {
            type: [Number, String],
            default: () => getConfig().modal.width
        },
        height: {
            type: [Number, String],
            default: () => getConfig().modal.height
        },
        minWidth: {
            type: [Number, String],
            default: () => getConfig().modal.minWidth
        },
        minHeight: {
            type: [Number, String],
            default: () => getConfig().modal.minHeight
        },
        zIndex: Number,
        marginSize: {
            type: [Number, String],
            default: () => getConfig().modal.marginSize
        },
        fullscreen: Boolean,
        draggable: {
            type: Boolean,
            default: () => getConfig().modal.draggable
        },
        remember: {
            type: Boolean,
            default: () => getConfig().modal.remember
        },
        destroyOnClose: {
            type: Boolean,
            default: () => getConfig().modal.destroyOnClose
        },
        showTitleOverflow: {
            type: Boolean,
            default: () => getConfig().modal.showTitleOverflow
        },
        transfer: {
            type: Boolean,
            default: () => getConfig().modal.transfer
        },
        storage: {
            type: Boolean,
            default: () => getConfig().modal.storage
        },
        storageKey: {
            type: String,
            default: () => getConfig().modal.storageKey
        },
        padding: {
            type: Boolean,
            default: () => getConfig().modal.padding
        },
        size: {
            type: String,
            default: () => getConfig().modal.size || getConfig().size
        },
        beforeHideMethod: Function,
        slots: Object,
        /**
         * 已废弃
         * @deprecated
         */
        message: [Number, String],
        /**
         * 已废弃
         * @deprecated
         */
        animat: {
            type: Boolean,
            default: () => getConfig().modal.animat
        }
    },
    inject: {
        $xeParentModal: {
            from: '$xeModal',
            default: null
        },
        $xeDrawer: {
            default: null
        },
        $xeTable: {
            default: null
        },
        $xeForm: {
            default: null
        }
    },
    provide() {
        const $xeModal = this;
        return {
            $xeModal
        };
    },
    data() {
        const xID = XEUtils.uniqueId();
        const reactData = {
            initialized: false,
            visible: false,
            contentVisible: false,
            modalTop: 0,
            modalZindex: 0,
            prevZoomStatus: '',
            zoomStatus: '',
            revertLocat: null,
            prevLocat: null,
            firstOpen: true,
            resizeFlag: 1
        };
        const internalData = {
            msgTimeout: undefined
        };
        return {
            xID,
            reactData,
            internalData
        };
    },
    computed: Object.assign(Object.assign({}, {}), { computeBtnTransfer() {
            const $xeSelect = this;
            const props = $xeSelect;
            const $xeTable = $xeSelect.$xeTable;
            const $xeParentModal = $xeSelect.$xeParentModal;
            const $xeDrawer = $xeSelect.$xeDrawer;
            const $xeForm = $xeSelect.$xeForm;
            const { transfer } = props;
            if (transfer === null) {
                const globalTransfer = getConfig().select.transfer;
                if (XEUtils.isBoolean(globalTransfer)) {
                    return globalTransfer;
                }
                if ($xeTable || $xeParentModal || $xeDrawer || $xeForm) {
                    return true;
                }
            }
            return transfer;
        },
        computeIsMsg() {
            const $xeModal = this;
            const props = $xeModal;
            return props.type === 'message' || props.type === 'notification';
        },
        computeIsMinimizeStatus() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            return reactData.zoomStatus === 'minimize';
        },
        computeIsMaximizeStatus() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            return reactData.zoomStatus === 'maximize';
        },
        computeZoomOpts() {
            const $xeModal = this;
            const props = $xeModal;
            return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
        } }),
    watch: {
        width() {
            const $xeModal = this;
            $xeModal.recalculate();
        },
        height() {
            const $xeModal = this;
            $xeModal.recalculate();
        },
        value(val) {
            const $xeModal = this;
            if (val) {
                $xeModal.openModal();
            }
            else {
                $xeModal.closeModal('model');
            }
        }
    },
    methods: {
        //
        // Method
        //
        dispatchEvent(type, params, evnt) {
            const $xeModal = this;
            $xeModal.$emit(type, createEvent(evnt, { $modal: $xeModal }, params));
        },
        emitModel(value) {
            const $xeModal = this;
            const { _events } = $xeModal;
            $xeModal.$emit('input', value);
            if (_events && _events.modelValue) {
                $xeModal.$emit('modelValue', value);
            }
            else {
                $xeModal.$emit('model-value', value);
            }
        },
        callSlot(slotFunc, params, h) {
            const $xeModal = this;
            const slots = $xeModal.$scopedSlots;
            if (slotFunc) {
                if (XEUtils.isString(slotFunc)) {
                    slotFunc = slots[slotFunc] || null;
                }
                if (XEUtils.isFunction(slotFunc)) {
                    return getSlotVNs(slotFunc.call($xeModal, params, h));
                }
            }
            return [];
        },
        open() {
            const $xeModal = this;
            return $xeModal.openModal();
        },
        close() {
            const $xeModal = this;
            return $xeModal.closeModal('close');
        },
        getBox() {
            const $xeModal = this;
            const boxElem = $xeModal.$refs.refModalBox;
            return boxElem;
        },
        getPosition() {
            const $xeModal = this;
            const isMsg = $xeModal.computeIsMsg;
            if (!isMsg) {
                const boxElem = $xeModal.getBox();
                if (boxElem) {
                    return {
                        top: boxElem.offsetTop,
                        left: boxElem.offsetLeft
                    };
                }
            }
            return null;
        },
        setPosition(top, left) {
            const $xeModal = this;
            const isMsg = $xeModal.computeIsMsg;
            if (!isMsg) {
                const boxElem = $xeModal.getBox();
                if (boxElem) {
                    if (XEUtils.isNumber(top)) {
                        boxElem.style.top = `${top}px`;
                    }
                    if (XEUtils.isNumber(left)) {
                        boxElem.style.left = `${left}px`;
                    }
                }
            }
            return $xeModal.$nextTick();
        },
        isMinimized() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            return reactData.zoomStatus === 'minimize';
        },
        isMaximized() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            return reactData.zoomStatus === 'maximize';
        },
        zoom() {
            const $xeModal = this;
            return $xeModal.handleZoom();
        },
        minimize() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            if (!reactData.visible) {
                return Promise.resolve({
                    status: false
                });
            }
            return $xeModal.handleMinimize();
        },
        maximize() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            if (!reactData.visible) {
                return Promise.resolve({
                    status: false
                });
            }
            return $xeModal.handleMaximize();
        },
        revert() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            if (!reactData.visible) {
                return Promise.resolve({
                    status: false
                });
            }
            return $xeModal.handleRevert();
        },
        recalculate() {
            const $xeModal = this;
            const props = $xeModal;
            const { width, height, minWidth, minHeight } = props;
            const isMsg = $xeModal.computeIsMsg;
            const isMinimizeStatus = $xeModal.computeIsMinimizeStatus;
            const boxElem = $xeModal.getBox();
            if (boxElem) {
                boxElem.style.width = width ? toCssUnit(width) : '';
                boxElem.style.height = height ? toCssUnit(height) : '';
                boxElem.style.minWidth = !isMsg && !isMinimizeStatus && minWidth ? toCssUnit(minWidth) : '';
                boxElem.style.minHeight = !isMsg && !isMinimizeStatus && minHeight ? toCssUnit(minHeight) : '';
            }
            return $xeModal.$nextTick();
        },
        updateZindex() {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { zIndex } = props;
            const { modalZindex } = reactData;
            if (zIndex) {
                reactData.modalZindex = zIndex;
            }
            else {
                const isMsg = $xeModal.computeIsMsg;
                if (isMsg) {
                    if (modalZindex < getSubLastZIndex()) {
                        reactData.modalZindex = nextSubZIndex();
                    }
                }
                else {
                    if (modalZindex < getLastZIndex()) {
                        reactData.modalZindex = nextZIndex();
                    }
                }
            }
        },
        updatePosition() {
            const $xeModal = this;
            const props = $xeModal;
            return $xeModal.$nextTick().then(() => {
                const { position } = props;
                const marginSize = XEUtils.toNumber(props.marginSize);
                const boxElem = $xeModal.getBox();
                if (!boxElem) {
                    return;
                }
                const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
                const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
                const isPosCenter = position === 'center';
                const { top, left } = XEUtils.isString(position) ? { top: position, left: position } : Object.assign({}, position);
                const topCenter = isPosCenter || top === 'center';
                const leftCenter = isPosCenter || left === 'center';
                let posTop = '';
                let posLeft = '';
                if (left && !leftCenter) {
                    posLeft = toCssUnit(left);
                }
                else {
                    posLeft = `${Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2)}px`;
                }
                if (top && !topCenter) {
                    posTop = toCssUnit(top);
                }
                else {
                    posTop = `${Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2)}px`;
                }
                boxElem.style.top = posTop;
                boxElem.style.left = posLeft;
            });
        },
        updateStyle() {
            const $xeModal = this;
            const props = $xeModal;
            $xeModal.$nextTick(() => {
                const { type } = props;
                const queueList = type === 'notification' ? notifyQueue : msgQueue;
                let offsetTop = 0;
                queueList.forEach(comp => {
                    const boxElem = comp.getBox();
                    if (boxElem) {
                        offsetTop += XEUtils.toNumber(comp.top);
                        comp.reactData.modalTop = offsetTop;
                        offsetTop += boxElem.clientHeight;
                    }
                });
            });
        },
        removeActiveQueue() {
            const $xeModal = this;
            if (allActiveModals.indexOf($xeModal) > -1) {
                XEUtils.remove(allActiveModals, item => item === $xeModal);
            }
        },
        removeMsgQueue() {
            const $xeModal = this;
            const props = $xeModal;
            const { type } = props;
            const queueList = type === 'notification' ? notifyQueue : msgQueue;
            if (queueList.indexOf($xeModal) > -1) {
                XEUtils.remove(queueList, comp => comp === $xeModal);
            }
            $xeModal.updateStyle();
        },
        closeModal(type) {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { remember } = props;
            const { visible } = reactData;
            const isMsg = $xeModal.computeIsMsg;
            const beforeHideFn = props.beforeHideMethod || getConfig().modal.beforeHideMethod;
            const params = { type };
            if (visible) {
                Promise.resolve(beforeHideFn ? beforeHideFn(params) : null).then((rest) => {
                    if (!XEUtils.isError(rest)) {
                        if (isMsg) {
                            $xeModal.removeMsgQueue();
                        }
                        reactData.contentVisible = false;
                        if (!remember) {
                            $xeModal.handleRevert();
                        }
                        $xeModal.removeActiveQueue();
                        $xeModal.dispatchEvent('before-hide', params, null);
                        setTimeout(() => {
                            reactData.visible = false;
                            $xeModal.emitModel(false);
                            $xeModal.dispatchEvent('hide', params, null);
                        }, 200);
                        $xeModal.removeBodyLockScroll();
                    }
                }).catch(e => e);
            }
            return $xeModal.$nextTick();
        },
        closeEvent(evnt) {
            const $xeModal = this;
            const type = 'close';
            $xeModal.dispatchEvent(type, { type }, evnt);
            $xeModal.closeModal(type);
        },
        confirmEvent(evnt) {
            const $xeModal = this;
            const props = $xeModal;
            const { confirmClosable } = props;
            const type = 'confirm';
            $xeModal.dispatchEvent(type, { type }, evnt);
            if (confirmClosable) {
                $xeModal.closeModal(type);
            }
        },
        cancelEvent(evnt) {
            const $xeModal = this;
            const props = $xeModal;
            const { cancelClosable } = props;
            const type = 'cancel';
            $xeModal.dispatchEvent(type, { type }, evnt);
            if (cancelClosable) {
                $xeModal.closeModal(type);
            }
        },
        getStorageMap(key) {
            const version = getConfig().version;
            const rest = XEUtils.toStringJSON(localStorage.getItem(key) || '');
            return rest && rest._v === version ? rest : { _v: version };
        },
        hasPosStorage() {
            const $xeModal = this;
            const props = $xeModal;
            const { id, storage, storageKey } = props;
            return !!(id && storage && $xeModal.getStorageMap(storageKey)[id]);
        },
        restorePosStorage() {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { id, storage, storageKey } = props;
            if (id && storage) {
                const posStorage = $xeModal.getStorageMap(storageKey)[id];
                if (posStorage) {
                    const boxElem = $xeModal.getBox();
                    const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(',');
                    if (boxElem) {
                        if (left) {
                            boxElem.style.left = `${left}px`;
                        }
                        if (top) {
                            boxElem.style.top = `${top}px`;
                        }
                        if (width) {
                            boxElem.style.width = `${width}px`;
                        }
                        if (height) {
                            boxElem.style.height = `${height}px`;
                        }
                    }
                    if (zoomLeft && zoomTop) {
                        reactData.revertLocat = {
                            left: zoomLeft,
                            top: zoomTop,
                            width: zoomWidth,
                            height: zoomHeight
                        };
                    }
                }
            }
        },
        addMsgQueue() {
            const $xeModal = this;
            const props = $xeModal;
            const { type } = props;
            const queueList = type === 'notification' ? notifyQueue : msgQueue;
            if (queueList.indexOf($xeModal) === -1) {
                queueList.push($xeModal);
            }
            $xeModal.updateStyle();
        },
        savePosStorage() {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { id, storage, storageKey } = props;
            const { zoomStatus, revertLocat } = reactData;
            if (zoomStatus) {
                return;
            }
            if (id && storage) {
                const boxElem = $xeModal.getBox();
                if (!boxElem) {
                    return;
                }
                const posStorageMap = $xeModal.getStorageMap(storageKey);
                posStorageMap[id] = [
                    boxElem.style.left,
                    boxElem.style.top,
                    boxElem.clientWidth,
                    boxElem.clientHeight
                ].concat(revertLocat
                    ? [
                        revertLocat.left,
                        revertLocat.top,
                        revertLocat.width,
                        revertLocat.height
                    ]
                    : []).map(val => val ? XEUtils.toNumber(val) : '').join(',');
                localStorage.setItem(storageKey, XEUtils.toJSONString(posStorageMap));
            }
        },
        handleMinimize() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            const zoomOpts = $xeModal.computeZoomOpts;
            const { minimizeLayout, minimizeMaxSize, minimizeHorizontalOffset, minimizeVerticalOffset, minimizeOffsetMethod } = zoomOpts;
            const isHorizontalLayout = minimizeLayout === 'horizontal';
            const prevZoomStatus = reactData.zoomStatus;
            const hlMList = [];
            const vlMList = [];
            allActiveModals.forEach(item => {
                if (item.xID !== $xeModal.xID && item.type === 'modal' && item.reactData.zoomStatus === 'minimize') {
                    const itemZoomOpts = item.computeZoomOpts;
                    if (itemZoomOpts.minimizeLayout === 'horizontal') {
                        hlMList.push(item);
                    }
                    else {
                        vlMList.push(item);
                    }
                }
            });
            const mList = isHorizontalLayout ? hlMList : vlMList;
            // 如果配置最小化最大数量
            if (minimizeMaxSize && mList.length >= minimizeMaxSize) {
                if (VxeUI.modal) {
                    VxeUI.modal.message({
                        status: 'error',
                        content: getI18n('vxe.modal.miniMaxSize', [minimizeMaxSize])
                    });
                }
                return Promise.resolve({
                    status: false
                });
            }
            reactData.prevZoomStatus = prevZoomStatus;
            reactData.zoomStatus = 'minimize';
            return $xeModal.$nextTick().then(() => {
                const boxElem = $xeModal.getBox();
                if (!boxElem) {
                    return {
                        status: false
                    };
                }
                const headerEl = $xeModal.$refs.refHeaderElem;
                if (!headerEl) {
                    return {
                        status: false
                    };
                }
                const { visibleHeight } = getDomNode();
                // 如果当前处于复原状态
                if (!prevZoomStatus) {
                    reactData.revertLocat = {
                        top: boxElem.offsetTop,
                        left: boxElem.offsetLeft,
                        width: boxElem.offsetWidth + (boxElem.style.width ? 0 : 1),
                        height: boxElem.offsetHeight + (boxElem.style.height ? 0 : 1)
                    };
                }
                const targetModal = XEUtils[isHorizontalLayout ? 'max' : 'min'](mList, ($modal) => {
                    const boxElem = $modal.getBox();
                    return boxElem ? XEUtils.toNumber(boxElem.style[isHorizontalLayout ? 'left' : 'top']) : 0;
                });
                let targetTop = visibleHeight - headerEl.offsetHeight - 16;
                let targetLeft = 16;
                if (targetModal) {
                    const minBoxElem = targetModal.getBox();
                    if (minBoxElem) {
                        const boxLeft = XEUtils.toNumber(minBoxElem.style.left);
                        const boxTop = XEUtils.toNumber(minBoxElem.style.top);
                        let offsetObj = {};
                        if (isHorizontalLayout) {
                            offsetObj = Object.assign({}, minimizeHorizontalOffset);
                        }
                        else {
                            offsetObj = Object.assign({}, minimizeVerticalOffset);
                        }
                        targetLeft = boxLeft + XEUtils.toNumber(offsetObj.left);
                        targetTop = boxTop + XEUtils.toNumber(offsetObj.top);
                        if (minimizeOffsetMethod) {
                            offsetObj = minimizeOffsetMethod({
                                $modal: $xeModal,
                                left: targetLeft,
                                top: targetTop
                            });
                            targetLeft = XEUtils.toNumber(offsetObj.left);
                            targetTop = XEUtils.toNumber(offsetObj.top);
                        }
                    }
                }
                Object.assign(boxElem.style, {
                    top: `${targetTop}px`,
                    left: `${targetLeft}px`,
                    width: '200px',
                    height: `${headerEl.offsetHeight}px`,
                    minHeight: '',
                    minWidth: ''
                });
                $xeModal.savePosStorage();
                return {
                    status: true
                };
            });
        },
        handleMaximize() {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const prevZoomStatus = reactData.zoomStatus;
            reactData.prevZoomStatus = prevZoomStatus;
            reactData.zoomStatus = 'maximize';
            return $xeModal.$nextTick().then(() => {
                const boxElem = $xeModal.getBox();
                if (boxElem) {
                    // 如果当前处于复原状态
                    if (!prevZoomStatus) {
                        const marginSize = XEUtils.toNumber(props.marginSize);
                        const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth;
                        const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight;
                        reactData.revertLocat = {
                            top: Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2),
                            left: Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2),
                            width: boxElem.offsetWidth + (boxElem.style.width ? 0 : 1),
                            height: boxElem.offsetHeight + (boxElem.style.height ? 0 : 1)
                        };
                    }
                    Object.assign(boxElem.style, {
                        top: '0',
                        left: '0',
                        width: '100%',
                        height: '100%',
                        minHeight: '',
                        minWidth: ''
                    });
                }
                $xeModal.savePosStorage();
            });
        },
        handleMsgAutoClose() {
            const $xeModal = this;
            const props = $xeModal;
            const internalData = $xeModal.internalData;
            const { duration } = props;
            if (duration !== -1) {
                internalData.msgTimeout = setTimeout(() => $xeModal.closeModal('close'), XEUtils.toNumber(duration));
            }
        },
        removeBodyLockScroll() {
            const $xeModal = this;
            const xID = $xeModal.xID;
            const htmlElem = document.documentElement;
            const lockData = htmlElem.getAttribute(lockScrollAttrKey);
            if (lockData) {
                const lockList = lockData.split(',').filter(key => key !== xID);
                if (lockList.length) {
                    htmlElem.setAttribute(lockScrollAttrKey, lockList.join(','));
                }
                else {
                    htmlElem.removeAttribute(lockScrollAttrKey);
                    htmlElem.style.removeProperty(lockScrollCssWidthKey);
                }
            }
        },
        addBodyLockScroll() {
            const $xeModal = this;
            const props = $xeModal;
            const xID = $xeModal.xID;
            const { lockScroll } = props;
            const isMsg = $xeModal.computeIsMsg;
            if (lockScroll && !isMsg) {
                const htmlElem = document.documentElement;
                const clientWidth = document.body.clientWidth;
                const lockData = htmlElem.getAttribute(lockScrollAttrKey);
                const lockList = lockData ? lockData.split(',') : [];
                if (!lockList.includes(xID)) {
                    lockList.push(xID);
                    htmlElem.setAttribute(lockScrollAttrKey, lockList.join(','));
                }
                htmlElem.style.setProperty(lockScrollCssWidthKey, `${clientWidth}px`);
            }
        },
        openModal() {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { remember, showFooter } = props;
            const { initialized, visible } = reactData;
            const isMsg = $xeModal.computeIsMsg;
            const btnTransfer = $xeModal.computeBtnTransfer;
            if (!initialized) {
                reactData.initialized = true;
                if (btnTransfer) {
                    const panelElem = $xeModal.$refs.refElem;
                    document.body.appendChild(panelElem);
                }
            }
            if (!visible) {
                $xeModal.addBodyLockScroll();
                reactData.visible = true;
                reactData.contentVisible = false;
                $xeModal.updateZindex();
                allActiveModals.push($xeModal);
                setTimeout(() => {
                    reactData.contentVisible = true;
                    $xeModal.$nextTick(() => {
                        if (!props.fullscreen) {
                            $xeModal.recalculate();
                        }
                        if (showFooter) {
                            const confirmBtn = $xeModal.$refs.refConfirmBtn;
                            const cancelBtn = $xeModal.$refs.refCancelBtn;
                            const operBtn = confirmBtn || cancelBtn;
                            if (operBtn) {
                                operBtn.focus();
                            }
                        }
                        const type = '';
                        const params = { type };
                        $xeModal.emitModel(true);
                        $xeModal.dispatchEvent('show', params, null);
                    });
                }, 10);
                if (isMsg) {
                    $xeModal.addMsgQueue();
                    $xeModal.handleMsgAutoClose();
                }
                else {
                    $xeModal.$nextTick(() => {
                        const { firstOpen } = reactData;
                        if (firstOpen) {
                            reactData.firstOpen = false;
                            if ($xeModal.hasPosStorage()) {
                                $xeModal.restorePosStorage();
                            }
                            else {
                                if (props.fullscreen) {
                                    $xeModal.$nextTick(() => $xeModal.handleMaximize());
                                }
                                else {
                                    $xeModal.recalculate();
                                    $xeModal.updatePosition().then(() => {
                                        setTimeout(() => $xeModal.updatePosition(), 20);
                                    });
                                }
                            }
                        }
                        else {
                            if (!remember) {
                                $xeModal.recalculate();
                                $xeModal.updatePosition().then(() => {
                                    setTimeout(() => $xeModal.updatePosition(), 20);
                                });
                            }
                        }
                    });
                }
            }
            return $xeModal.$nextTick();
        },
        selfClickEvent(evnt) {
            const $xeModal = this;
            const props = $xeModal;
            const el = $xeModal.$refs.refElem;
            if (props.maskClosable && evnt.target === el) {
                const type = 'mask';
                $xeModal.closeModal(type);
            }
        },
        selfMouseoverEvent() {
            const $xeModal = this;
            const internalData = $xeModal.internalData;
            const { msgTimeout } = internalData;
            if (!msgTimeout) {
                return;
            }
            const isMsg = $xeModal.computeIsMsg;
            if (isMsg) {
                clearTimeout(msgTimeout);
                internalData.msgTimeout = undefined;
            }
        },
        selfMouseoutEvent() {
            const $xeModal = this;
            const internalData = $xeModal.internalData;
            const { msgTimeout } = internalData;
            if (!msgTimeout) {
                const isMsg = $xeModal.computeIsMsg;
                if (isMsg) {
                    $xeModal.handleMsgAutoClose();
                }
            }
        },
        handleGlobalKeydownEvent(evnt) {
            const $xeModal = this;
            const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
            if (isEsc) {
                const lastModal = XEUtils.max(allActiveModals, (item) => item.reactData.modalZindex);
                // 多个时，只关掉最上层的窗口
                if (lastModal) {
                    setTimeout(() => {
                        if (lastModal === $xeModal && lastModal.escClosable) {
                            const type = 'exit';
                            $xeModal.dispatchEvent('close', { type }, evnt);
                            $xeModal.closeModal(type);
                        }
                    }, 10);
                }
            }
        },
        handleRevert() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            reactData.prevZoomStatus = reactData.zoomStatus;
            reactData.zoomStatus = '';
            return $xeModal.$nextTick().then(() => {
                const { revertLocat } = reactData;
                if (revertLocat) {
                    const boxElem = $xeModal.getBox();
                    reactData.revertLocat = null;
                    if (boxElem) {
                        Object.assign(boxElem.style, {
                            top: `${revertLocat.top}px`,
                            left: `${revertLocat.left}px`,
                            width: `${revertLocat.width}px`,
                            height: `${revertLocat.height}px`
                        });
                    }
                    $xeModal.savePosStorage();
                    return $xeModal.$nextTick().then(() => {
                        return {
                            status: true
                        };
                    });
                }
                return {
                    status: false
                };
            });
        },
        handleZoom(type) {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            const { zoomStatus } = reactData;
            return new Promise(resolve => {
                if (type) {
                    if (type === 'maximize') {
                        resolve($xeModal.handleMaximize());
                        return;
                    }
                    if (type === 'minimize') {
                        resolve($xeModal.handleMinimize());
                        return;
                    }
                    resolve($xeModal.handleRevert());
                    return;
                }
                resolve(zoomStatus ? $xeModal.handleRevert() : $xeModal.handleMaximize());
            }).then(() => {
                return reactData.zoomStatus || 'revert';
            });
        },
        toggleZoomMinEvent(evnt) {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            const { zoomStatus, prevZoomStatus } = reactData;
            return $xeModal.handleZoom(zoomStatus === 'minimize' ? (prevZoomStatus || 'revert') : 'minimize').then((type) => {
                const params = { type };
                $xeModal.dispatchEvent('zoom', params, evnt);
            });
        },
        toggleZoomMaxEvent(evnt) {
            const $xeModal = this;
            return $xeModal.handleZoom().then((type) => {
                const params = { type };
                $xeModal.dispatchEvent('zoom', params, evnt);
            });
        },
        boxMousedownEvent() {
            const $xeModal = this;
            const reactData = $xeModal.reactData;
            const { modalZindex } = reactData;
            if (allActiveModals.some(comp => comp.reactData.visible && comp.reactData.modalZindex > modalZindex)) {
                $xeModal.updateZindex();
            }
        },
        mousedownEvent(evnt) {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            const { storage } = props;
            const { zoomStatus } = reactData;
            const marginSize = XEUtils.toNumber(props.marginSize);
            const boxElem = $xeModal.getBox();
            if (!boxElem) {
                return;
            }
            if (zoomStatus !== 'maximize' && evnt.button === 0 && !getEventTargetNode(evnt, boxElem, 'trigger--btn').flag) {
                evnt.preventDefault();
                const disX = evnt.clientX - boxElem.offsetLeft;
                const disY = evnt.clientY - boxElem.offsetTop;
                const { visibleHeight, visibleWidth } = getDomNode();
                document.onmousemove = evnt => {
                    evnt.preventDefault();
                    const offsetWidth = boxElem.offsetWidth;
                    const offsetHeight = boxElem.offsetHeight;
                    const minX = marginSize;
                    const maxX = visibleWidth - offsetWidth - marginSize - 1;
                    const minY = marginSize;
                    const maxY = visibleHeight - offsetHeight - marginSize - 1;
                    let left = evnt.clientX - disX;
                    let top = evnt.clientY - disY;
                    if (left > maxX) {
                        left = maxX;
                    }
                    if (left < minX) {
                        left = minX;
                    }
                    if (top > maxY) {
                        top = maxY;
                    }
                    if (top < minY) {
                        top = minY;
                    }
                    boxElem.style.left = `${left}px`;
                    boxElem.style.top = `${top}px`;
                    boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
                    $xeModal.$emit('move', createEvent(evnt, { type: 'move' }));
                    reactData.resizeFlag++;
                };
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (storage) {
                        $xeModal.$nextTick(() => {
                            $xeModal.savePosStorage();
                        });
                    }
                    reactData.resizeFlag++;
                    setTimeout(() => {
                        boxElem.className = boxElem.className.replace(/\s?is--drag/, '');
                    }, 50);
                };
            }
        },
        dragEvent(evnt) {
            const $xeModal = this;
            const props = $xeModal;
            const reactData = $xeModal.reactData;
            evnt.preventDefault();
            const { storage } = props;
            const { visibleHeight, visibleWidth } = getDomNode();
            const marginSize = XEUtils.toNumber(props.marginSize);
            const targetElem = evnt.target;
            const type = targetElem.getAttribute('type');
            const minWidth = XEUtils.toNumber(props.minWidth);
            const minHeight = XEUtils.toNumber(props.minHeight);
            const maxWidth = visibleWidth;
            const maxHeight = visibleHeight;
            const boxElem = $xeModal.getBox();
            const clientWidth = boxElem.clientWidth;
            const clientHeight = boxElem.clientHeight;
            const disX = evnt.clientX;
            const disY = evnt.clientY;
            const offsetTop = boxElem.offsetTop;
            const offsetLeft = boxElem.offsetLeft;
            const params = { type: 'resize' };
            document.onmousemove = evnt => {
                evnt.preventDefault();
                let dragLeft;
                let dragTop;
                let width;
                let height;
                switch (type) {
                    case 'wl':
                        dragLeft = disX - evnt.clientX;
                        width = dragLeft + clientWidth;
                        if (offsetLeft - dragLeft > marginSize) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                                boxElem.style.left = `${offsetLeft - dragLeft}px`;
                            }
                        }
                        break;
                    case 'swst':
                        dragLeft = disX - evnt.clientX;
                        dragTop = disY - evnt.clientY;
                        width = dragLeft + clientWidth;
                        height = dragTop + clientHeight;
                        if (offsetLeft - dragLeft > marginSize) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                                boxElem.style.left = `${offsetLeft - dragLeft}px`;
                            }
                        }
                        if (offsetTop - dragTop > marginSize) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                                boxElem.style.top = `${offsetTop - dragTop}px`;
                            }
                        }
                        break;
                    case 'swlb':
                        dragLeft = disX - evnt.clientX;
                        dragTop = evnt.clientY - disY;
                        width = dragLeft + clientWidth;
                        height = dragTop + clientHeight;
                        if (offsetLeft - dragLeft > marginSize) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                                boxElem.style.left = `${offsetLeft - dragLeft}px`;
                            }
                        }
                        if (offsetTop + height + marginSize < visibleHeight) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                            }
                        }
                        break;
                    case 'st':
                        dragTop = disY - evnt.clientY;
                        height = clientHeight + dragTop;
                        if (offsetTop - dragTop > marginSize) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                                boxElem.style.top = `${offsetTop - dragTop}px`;
                            }
                        }
                        break;
                    case 'wr':
                        dragLeft = evnt.clientX - disX;
                        width = dragLeft + clientWidth;
                        if (offsetLeft + width + marginSize < visibleWidth) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                            }
                        }
                        break;
                    case 'sest':
                        dragLeft = evnt.clientX - disX;
                        dragTop = disY - evnt.clientY;
                        width = dragLeft + clientWidth;
                        height = dragTop + clientHeight;
                        if (offsetLeft + width + marginSize < visibleWidth) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                            }
                        }
                        if (offsetTop - dragTop > marginSize) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                                boxElem.style.top = `${offsetTop - dragTop}px`;
                            }
                        }
                        break;
                    case 'selb':
                        dragLeft = evnt.clientX - disX;
                        dragTop = evnt.clientY - disY;
                        width = dragLeft + clientWidth;
                        height = dragTop + clientHeight;
                        if (offsetLeft + width + marginSize < visibleWidth) {
                            if (width > minWidth) {
                                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
                            }
                        }
                        if (offsetTop + height + marginSize < visibleHeight) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                            }
                        }
                        break;
                    case 'sb':
                        dragTop = evnt.clientY - disY;
                        height = dragTop + clientHeight;
                        if (offsetTop + height + marginSize < visibleHeight) {
                            if (height > minHeight) {
                                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
                            }
                        }
                        break;
                }
                boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
                if (storage) {
                    $xeModal.savePosStorage();
                }
                $xeModal.dispatchEvent('resize', params, evnt);
            };
            document.onmouseup = () => {
                reactData.revertLocat = null;
                document.onmousemove = null;
                document.onmouseup = null;
                setTimeout(() => {
                    boxElem.className = boxElem.className.replace(/\s?is--drag/, '');
                }, 50);
            };
        },
        //
        // Render
        //
        renderTitles(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const reactData = $xeModal.reactData;
            const { slots: propSlots = {}, showClose, showZoom, showMaximize, showMinimize, title } = props;
            const { zoomStatus } = reactData;
            const titleSlot = slots.title || propSlots.title;
            const cornerSlot = slots.corner || propSlots.corner;
            const isMinimizeStatus = $xeModal.computeIsMinimizeStatus;
            const isMaximizeStatus = $xeModal.computeIsMaximizeStatus;
            return [
                h('div', {
                    class: 'vxe-modal--header-title'
                }, titleSlot
                    ? $xeModal.callSlot(titleSlot, {
                        $modal: $xeModal,
                        minimized: isMinimizeStatus,
                        maximized: isMaximizeStatus
                    }, h)
                    : (title ? getFuncText(title) : getI18n('vxe.alert.title'))),
                h('div', {
                    class: 'vxe-modal--header-right'
                }, [
                    cornerSlot && !isMinimizeStatus
                        ? h('div', {
                            class: 'vxe-modal--corner-wrapper'
                        }, $xeModal.callSlot(cornerSlot, { $modal: $xeModal }, h))
                        : renderEmptyElement($xeModal),
                    (XEUtils.isBoolean(showMinimize) ? showMinimize : showZoom)
                        ? h('div', {
                            class: ['vxe-modal--zoom-btn', 'trigger--btn'],
                            attrs: {
                                title: getI18n(`vxe.modal.zoom${zoomStatus === 'minimize' ? 'Out' : 'Min'}`)
                            },
                            on: {
                                click: $xeModal.toggleZoomMinEvent
                            }
                        }, [
                            h('i', {
                                class: zoomStatus === 'minimize' ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
                            })
                        ])
                        : renderEmptyElement($xeModal),
                    (XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== 'minimize'
                        ? h('div', {
                            class: ['vxe-modal--zoom-btn', 'trigger--btn'],
                            attrs: {
                                title: getI18n(`vxe.modal.zoom${zoomStatus === 'maximize' ? 'Out' : 'In'}`)
                            },
                            on: {
                                click: $xeModal.toggleZoomMaxEvent
                            }
                        }, [
                            h('i', {
                                class: zoomStatus === 'maximize' ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
                            })
                        ])
                        : renderEmptyElement($xeModal),
                    showClose
                        ? h('div', {
                            class: ['vxe-modal--close-btn', 'trigger--btn'],
                            attrs: {
                                title: getI18n('vxe.modal.close')
                            },
                            on: {
                                click: $xeModal.closeEvent
                            }
                        }, [
                            h('i', {
                                class: getIcon().MODAL_CLOSE
                            })
                        ])
                        : renderEmptyElement($xeModal)
                ])
            ];
        },
        renderHeader(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const { slots: propSlots = {}, showZoom, showMaximize, draggable } = props;
            const headerSlot = slots.header || propSlots.header;
            if (props.showHeader) {
                const headerOns = {};
                if (draggable) {
                    headerOns.mousedown = $xeModal.mousedownEvent;
                }
                if ((XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && props.dblclickZoom && props.type === 'modal') {
                    headerOns.dblclick = $xeModal.toggleZoomMaxEvent;
                }
                return h('div', {
                    ref: 'refHeaderElem',
                    class: ['vxe-modal--header', {
                            'is--ellipsis': props.showTitleOverflow
                        }],
                    on: headerOns
                }, headerSlot ? $xeModal.callSlot(headerSlot, { $modal: $xeModal }, h) : $xeModal.renderTitles(h));
            }
            return renderEmptyElement($xeModal);
        },
        renderBody(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
            const content = props.content || message;
            const isMsg = $xeModal.computeIsMsg;
            const defaultSlot = slots.default || propSlots.default;
            const leftSlot = slots.left || propSlots.left;
            const rightSlot = slots.right || propSlots.right;
            const contVNs = [];
            if (!isMsg && (status || iconStatus)) {
                contVNs.push(h('div', {
                    class: 'vxe-modal--status-wrapper'
                }, [
                    h('i', {
                        class: ['vxe-modal--status-icon', iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
                    })
                ]));
            }
            contVNs.push(useHtml && !defaultSlot
                ? h('div', {
                    key: 'hc',
                    class: 'vxe-modal--content',
                    domProps: {
                        innerHTML: getFuncText(content)
                    }
                })
                : h('div', {
                    key: 'dc',
                    class: 'vxe-modal--content'
                }, defaultSlot ? $xeModal.callSlot(defaultSlot, { $modal: $xeModal }, h) : getFuncText(content)));
            return h('div', {
                class: 'vxe-modal--body'
            }, [
                leftSlot
                    ? h('div', {
                        class: 'vxe-modal--body-left'
                    }, $xeModal.callSlot(leftSlot, { $modal: $xeModal }, h))
                    : renderEmptyElement($xeModal),
                h('div', {
                    class: 'vxe-modal--body-default'
                }, contVNs),
                rightSlot
                    ? h('div', {
                        class: 'vxe-modal--body-right'
                    }, $xeModal.callSlot(rightSlot, { $modal: $xeModal }, h))
                    : renderEmptyElement($xeModal),
                isMsg
                    ? renderEmptyElement($xeModal)
                    : h(VxeLoadingComponent, {
                        class: 'vxe-modal--loading',
                        props: {
                            value: props.loading
                        }
                    })
            ]);
        },
        renderDefaultFooter(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const { slots: propSlots = {}, showCancelButton, showConfirmButton, type, loading } = props;
            const lfSlot = slots.leftfoot || propSlots.leftfoot;
            const rfSlot = slots.rightfoot || propSlots.rightfoot;
            const btnVNs = [];
            if (XEUtils.isBoolean(showCancelButton) ? showCancelButton : type === 'confirm') {
                btnVNs.push(h(VxeButtonComponent, {
                    key: 1,
                    ref: 'refCancelBtn',
                    props: {
                        content: props.cancelButtonText || getI18n('vxe.button.cancel')
                    },
                    on: {
                        click: $xeModal.cancelEvent
                    }
                }));
            }
            if (XEUtils.isBoolean(showConfirmButton) ? showConfirmButton : (type === 'confirm' || type === 'alert')) {
                btnVNs.push(h(VxeButtonComponent, {
                    key: 2,
                    ref: 'refConfirmBtn',
                    props: {
                        status: 'primary',
                        loading: loading,
                        content: props.confirmButtonText || getI18n('vxe.button.confirm')
                    },
                    on: {
                        click: $xeModal.confirmEvent
                    }
                }));
            }
            return h('div', {
                class: 'vxe-modal--footer-wrapper'
            }, [
                h('div', {
                    class: 'vxe-modal--footer-left'
                }, lfSlot ? $xeModal.callSlot(lfSlot, { $modal: $xeModal }, h) : []),
                h('div', {
                    class: 'vxe-modal--footer-right'
                }, rfSlot ? $xeModal.callSlot(rfSlot, { $modal: $xeModal }, h) : btnVNs)
            ]);
        },
        renderFooter(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const { slots: propSlots = {} } = props;
            const footerSlot = slots.footer || propSlots.footer;
            if (props.showFooter) {
                return h('div', {
                    class: 'vxe-modal--footer'
                }, footerSlot ? $xeModal.callSlot(footerSlot, { $modal: $xeModal }, h) : [$xeModal.renderDefaultFooter(h)]);
            }
            return renderEmptyElement($xeModal);
        },
        renderVN(h) {
            const $xeModal = this;
            const props = $xeModal;
            const slots = $xeModal.$scopedSlots;
            const reactData = $xeModal.reactData;
            const { slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize } = props;
            const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData;
            const asideSlot = slots.aside || propSlots.aside;
            const vSize = $xeModal.computeSize;
            const isMsg = $xeModal.computeIsMsg;
            const isMinimizeStatus = $xeModal.computeIsMinimizeStatus;
            const ons = {};
            if (isMsg) {
                ons.mouseover = $xeModal.selfMouseoverEvent;
                ons.mouseout = $xeModal.selfMouseoutEvent;
            }
            return h('div', {
                ref: 'refElem',
                class: ['vxe-modal--wrapper', `type--${type}`, `zoom--${zoomStatus || 'revert'}`, className || '', position ? `pos--${position}` : '', {
                        [`size--${vSize}`]: vSize,
                        [`status--${status}`]: status,
                        'is--padding': padding,
                        'is--animat': animat,
                        'lock--scroll': lockScroll,
                        'lock--view': lockView,
                        'is--draggable': draggable,
                        'is--resize': resize,
                        'is--mask': mask,
                        'is--visible': contentVisible,
                        'is--active': visible,
                        'is--loading': loading
                    }],
                style: {
                    zIndex: reactData.modalZindex,
                    top: modalTop ? `${modalTop}px` : null
                },
                on: Object.assign(Object.assign({}, ons), { click: $xeModal.selfClickEvent })
            }, initialized
                ? [
                    h('div', {
                        ref: 'refModalBox',
                        class: 'vxe-modal--box',
                        on: {
                            mousedown: $xeModal.boxMousedownEvent
                        }
                    }, [
                        (isMsg || asideSlot) && !isMinimizeStatus
                            ? h('div', {
                                class: 'vxe-modal--aside'
                            }, asideSlot
                                ? $xeModal.callSlot(asideSlot, { $modal: $xeModal }, h)
                                : [
                                    status || iconStatus
                                        ? h('div', {
                                            class: 'vxe-modal--status-wrapper'
                                        }, [
                                            h('i', {
                                                class: ['vxe-modal--status-icon', iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
                                            })
                                        ])
                                        : renderEmptyElement($xeModal)
                                ])
                            : renderEmptyElement($xeModal),
                        h('div', {
                            class: 'vxe-modal--container'
                        }, !reactData.initialized || (destroyOnClose && !reactData.visible)
                            ? []
                            : [
                                $xeModal.renderHeader(h),
                                $xeModal.renderBody(h),
                                $xeModal.renderFooter(h),
                                !isMsg && resize
                                    ? h('span', {
                                        class: 'vxe-modal--resize'
                                    }, ['wl', 'wr', 'swst', 'sest', 'st', 'swlb', 'selb', 'sb'].map(type => {
                                        return h('span', {
                                            class: `${type}-resize`,
                                            attrs: {
                                                type: type
                                            },
                                            on: {
                                                mousedown: $xeModal.dragEvent
                                            }
                                        });
                                    }))
                                    : renderEmptyElement($xeModal)
                            ])
                    ])
                ]
                : []);
        }
    },
    mounted() {
        const $xeModal = this;
        const slots = $xeModal.$scopedSlots;
        const props = $xeModal;
        const reactData = $xeModal.reactData;
        if (props.type === 'modal' && props.showFooter && !(props.showConfirmButton || props.showCancelButton || slots.footer)) {
            warnLog('vxe.modal.footPropErr');
        }
        reactData.initialized = !!props.preload;
        $xeModal.$nextTick(() => {
            if (props.storage && !props.id) {
                errLog('vxe.error.reqProp', ['[modal] id']);
            }
            if (props.value) {
                $xeModal.openModal();
            }
            $xeModal.recalculate();
        });
        if (props.escClosable) {
            globalEvents.on($xeModal, 'keydown', $xeModal.handleGlobalKeydownEvent);
        }
    },
    beforeDestroy() {
        const $xeModal = this;
        const panelElem = $xeModal.$refs.refElem;
        if (panelElem && panelElem.parentNode) {
            panelElem.parentNode.removeChild(panelElem);
        }
        globalEvents.off($xeModal, 'keydown');
        $xeModal.removeMsgQueue();
        $xeModal.removeActiveQueue();
        $xeModal.removeBodyLockScroll();
    },
    render(h) {
        return this.renderVN(h);
    }
};
