"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.allActiveDrawers = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _utils = require("../../ui/src/utils");
var _dom = require("../../ui/src/dom");
var _vn = require("../../ui/src/vn");
var _button = _interopRequireDefault(require("../../button"));
var _loading = _interopRequireDefault(require("../../loading"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var allActiveDrawers = exports.allActiveDrawers = [];
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeDrawer',
  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.permissionMixin],
  props: {
    value: Boolean,
    id: String,
    title: String,
    loading: {
      type: Boolean,
      default: null
    },
    className: String,
    position: {
      type: [String, Object],
      default: function _default() {
        return (0, _ui.getConfig)().drawer.position;
      }
    },
    lockView: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.lockView;
      }
    },
    lockScroll: Boolean,
    mask: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.mask;
      }
    },
    maskClosable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.maskClosable;
      }
    },
    escClosable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.escClosable;
      }
    },
    cancelClosable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.cancelClosable;
      }
    },
    confirmClosable: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.confirmClosable;
      }
    },
    showHeader: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.showHeader;
      }
    },
    showFooter: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.showFooter;
      }
    },
    showClose: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.showClose;
      }
    },
    content: [Number, String],
    useHtml: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.useHtml;
      }
    },
    showCancelButton: {
      type: Boolean,
      default: null
    },
    cancelButtonText: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.cancelButtonText;
      }
    },
    showConfirmButton: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.showConfirmButton;
      }
    },
    confirmButtonText: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.confirmButtonText;
      }
    },
    destroyOnClose: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.destroyOnClose;
      }
    },
    showTitleOverflow: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.showTitleOverflow;
      }
    },
    preload: Boolean,
    width: [Number, String],
    height: [Number, String],
    resize: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.resize;
      }
    },
    zIndex: Number,
    transfer: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.transfer;
      }
    },
    padding: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.padding;
      }
    },
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.size || (0, _ui.getConfig)().size;
      }
    },
    beforeHideMethod: {
      type: Function,
      default: function _default() {
        return (0, _ui.getConfig)().drawer.beforeHideMethod;
      }
    },
    slots: Object
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeParentDrawer: {
      from: '$xeDrawer',
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    }
  },
  provide: function provide() {
    var $xeDrawer = this;
    return {
      $xeDrawer: $xeDrawer
    };
  },
  data: function data() {
    var reactData = {
      initialized: false,
      visible: false,
      contentVisible: false,
      drawerZIndex: 0,
      resizeFlag: 1
    };
    return {
      xID: _xeUtils.default.uniqueId(),
      reactData: reactData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeBtnTransfer: function computeBtnTransfer() {
      var $xeSelect = this;
      var props = $xeSelect;
      var $xeTable = $xeSelect.$xeTable;
      var $xeModal = $xeSelect.$xeModal;
      var $xeParentDrawer = $xeSelect.$xeParentDrawer;
      var $xeForm = $xeSelect.$xeForm;
      var transfer = props.transfer;
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().select.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeParentDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computeDragType: function computeDragType() {
      var $xeDrawer = this;
      var props = $xeDrawer;
      switch (props.position) {
        case 'top':
          return 'sb';
        case 'bottom':
          return 'st';
        case 'left':
          return 'wr';
      }
      return 'wl';
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeDrawer = this;
      $xeDrawer.$emit(type, (0, _ui.createEvent)(evnt, {
        $drawer: $xeDrawer
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeDrawer = this;
      var _events = $xeDrawer._events;
      $xeDrawer.$emit('input', value);
      if (_events && _events.modelValue) {
        $xeDrawer.$emit('modelValue', value);
      } else {
        $xeDrawer.$emit('model-value', value);
      }
    },
    callSlot: function callSlot(slotFunc, params, h) {
      var $xeDrawer = this;
      var slots = $xeDrawer.$scopedSlots;
      if (slotFunc) {
        if (_xeUtils.default.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (_xeUtils.default.isFunction(slotFunc)) {
          return (0, _vn.getSlotVNs)(slotFunc.call($xeDrawer, params, h));
        }
      }
      return [];
    },
    open: function open() {
      var $xeDrawer = this;
      return $xeDrawer.openDrawer();
    },
    close: function close() {
      var $xeDrawer = this;
      return $xeDrawer.closeDrawer('close');
    },
    getBox: function getBox() {
      var $xeDrawer = this;
      var boxElem = $xeDrawer.$refs.refDrawerBox;
      return boxElem;
    },
    recalculate: function recalculate() {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var width = props.width,
        height = props.height;
      var boxElem = $xeDrawer.getBox();
      if (boxElem) {
        boxElem.style.width = (0, _dom.toCssUnit)(width);
        boxElem.style.height = (0, _dom.toCssUnit)(height);
      }
      return $xeDrawer.$nextTick();
    },
    updateZindex: function updateZindex() {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var reactData = $xeDrawer.reactData;
      var zIndex = props.zIndex;
      var drawerZIndex = reactData.drawerZIndex;
      if (zIndex) {
        reactData.drawerZIndex = zIndex;
      } else if (drawerZIndex < (0, _utils.getLastZIndex)()) {
        reactData.drawerZIndex = (0, _utils.nextZIndex)();
      }
    },
    removeActiveQueue: function removeActiveQueue() {
      var $xeDrawer = this;
      if (allActiveDrawers.indexOf($xeDrawer) > -1) {
        _xeUtils.default.remove(allActiveDrawers, function (item) {
          return item === $xeDrawer;
        });
      }
    },
    closeDrawer: function closeDrawer(type) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var reactData = $xeDrawer.reactData;
      var beforeHideMethod = props.beforeHideMethod;
      var visible = reactData.visible;
      var params = {
        type: type
      };
      if (visible) {
        Promise.resolve(beforeHideMethod ? beforeHideMethod(params) : null).then(function (rest) {
          if (!_xeUtils.default.isError(rest)) {
            reactData.contentVisible = false;
            $xeDrawer.removeActiveQueue();
            $xeDrawer.dispatchEvent('before-hide', params, null);
            setTimeout(function () {
              reactData.visible = false;
              $xeDrawer.emitModel(false);
              $xeDrawer.dispatchEvent('hide', params, null);
            }, 200);
          }
        }).catch(function (e) {
          return e;
        });
      }
      return $xeDrawer.$nextTick();
    },
    closeEvent: function closeEvent(evnt) {
      var $xeDrawer = this;
      var type = 'close';
      $xeDrawer.dispatchEvent(type, {
        type: type
      }, evnt);
      $xeDrawer.closeDrawer(type);
    },
    confirmEvent: function confirmEvent(evnt) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var confirmClosable = props.confirmClosable;
      var type = 'confirm';
      $xeDrawer.dispatchEvent(type, {
        type: type
      }, evnt);
      if (confirmClosable) {
        $xeDrawer.closeDrawer(type);
      }
    },
    cancelEvent: function cancelEvent(evnt) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var cancelClosable = props.cancelClosable;
      var type = 'cancel';
      $xeDrawer.dispatchEvent(type, {
        type: type
      }, evnt);
      if (cancelClosable) {
        $xeDrawer.closeDrawer(type);
      }
    },
    openDrawer: function openDrawer() {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var reactData = $xeDrawer.reactData;
      var showFooter = props.showFooter;
      var initialized = reactData.initialized,
        visible = reactData.visible;
      var btnTransfer = $xeDrawer.computeBtnTransfer;
      if (!initialized) {
        reactData.initialized = true;
        if (btnTransfer) {
          var panelElem = $xeDrawer.$refs.refElem;
          document.body.appendChild(panelElem);
        }
      }
      if (!visible) {
        reactData.visible = true;
        reactData.contentVisible = false;
        $xeDrawer.updateZindex();
        allActiveDrawers.push($xeDrawer);
        setTimeout(function () {
          $xeDrawer.recalculate();
          reactData.contentVisible = true;
          $xeDrawer.$nextTick(function () {
            if (showFooter) {
              var confirmBtn = $xeDrawer.$refs.refConfirmBtn;
              var cancelBtn = $xeDrawer.$refs.refCancelBtn;
              var operBtn = confirmBtn || cancelBtn;
              if (operBtn) {
                operBtn.focus();
              }
            }
            var type = '';
            var params = {
              type: type
            };
            $xeDrawer.emitModel(true);
            $xeDrawer.dispatchEvent('show', params, null);
          });
        }, 10);
      }
      return $xeDrawer.$nextTick();
    },
    selfClickEvent: function selfClickEvent(evnt) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var el = $xeDrawer.$refs.refElem;
      if (props.maskClosable && evnt.target === el) {
        var type = 'mask';
        $xeDrawer.closeDrawer(type);
      }
    },
    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
      var $xeDrawer = this;
      var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
      if (isEsc) {
        var lastDrawer = _xeUtils.default.max(allActiveDrawers, function (item) {
          return item.reactData.drawerZIndex;
        });
        // 多个时，只关掉最上层的窗口
        if (lastDrawer) {
          setTimeout(function () {
            if (lastDrawer === $xeDrawer && lastDrawer.escClosable) {
              var type = 'exit';
              $xeDrawer.dispatchEvent('close', {
                type: type
              }, evnt);
              $xeDrawer.closeDrawer(type);
            }
          }, 10);
        }
      }
    },
    boxMousedownEvent: function boxMousedownEvent() {
      var $xeDrawer = this;
      var reactData = $xeDrawer.reactData;
      var drawerZIndex = reactData.drawerZIndex;
      if (allActiveDrawers.some(function (comp) {
        return comp.reactData.visible && comp.reactData.drawerZIndex > drawerZIndex;
      })) {
        $xeDrawer.updateZindex();
      }
    },
    dragEvent: function dragEvent(evnt) {
      var $xeModal = this;
      var reactData = $xeModal.reactData;
      evnt.preventDefault();
      var _getDomNode = (0, _dom.getDomNode)(),
        visibleHeight = _getDomNode.visibleHeight,
        visibleWidth = _getDomNode.visibleWidth;
      var marginSize = 0;
      var targetElem = evnt.target;
      var type = targetElem.getAttribute('type');
      var minWidth = 0;
      var minHeight = 0;
      var maxWidth = visibleWidth;
      var maxHeight = visibleHeight;
      var boxElem = $xeModal.getBox();
      var clientWidth = boxElem.clientWidth;
      var clientHeight = boxElem.clientHeight;
      var disX = evnt.clientX;
      var disY = evnt.clientY;
      var offsetTop = boxElem.offsetTop;
      var offsetLeft = boxElem.offsetLeft;
      var params = {
        type: 'resize'
      };
      document.onmousemove = function (evnt) {
        evnt.preventDefault();
        var dragLeft;
        var dragTop;
        var width;
        var height;
        switch (type) {
          case 'wl':
            dragLeft = disX - evnt.clientX;
            width = dragLeft + clientWidth;
            if (offsetLeft - dragLeft > marginSize) {
              if (width > minWidth) {
                boxElem.style.width = "".concat(width < maxWidth ? width : maxWidth, "px");
              }
            }
            break;
          case 'st':
            dragTop = disY - evnt.clientY;
            height = clientHeight + dragTop;
            if (offsetTop - dragTop > marginSize) {
              if (height > minHeight) {
                boxElem.style.height = "".concat(height < maxHeight ? height : maxHeight, "px");
              }
            }
            break;
          case 'wr':
            dragLeft = evnt.clientX - disX;
            width = dragLeft + clientWidth;
            if (offsetLeft + width + marginSize < visibleWidth) {
              if (width > minWidth) {
                boxElem.style.width = "".concat(width < maxWidth ? width : maxWidth, "px");
              }
            }
            break;
          case 'sb':
            dragTop = evnt.clientY - disY;
            height = dragTop + clientHeight;
            if (offsetTop + height + marginSize < visibleHeight) {
              if (height > minHeight) {
                boxElem.style.height = "".concat(height < maxHeight ? height : maxHeight, "px");
              }
            }
            break;
        }
        boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
        $xeModal.dispatchEvent('resize', params, evnt);
        reactData.resizeFlag++;
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        reactData.resizeFlag++;
        setTimeout(function () {
          boxElem.className = boxElem.className.replace(/\s?is--drag/, '');
        }, 50);
      };
    },
    //
    // Render
    //
    renderTitles: function renderTitles(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var _props$slots = props.slots,
        propSlots = _props$slots === void 0 ? {} : _props$slots,
        showClose = props.showClose,
        title = props.title;
      var titleSlot = slots.title || propSlots.title;
      var cornerSlot = slots.corner || propSlots.corner;
      return [h('div', {
        class: 'vxe-drawer--header-title'
      }, titleSlot ? $xeDrawer.callSlot(titleSlot, {
        $drawer: $xeDrawer
      }, h) : title ? (0, _utils.getFuncText)(title) : (0, _ui.getI18n)('vxe.alert.title')), h('div', {
        class: 'vxe-drawer--header-right'
      }, [cornerSlot ? h('div', {
        class: 'vxe-drawer--corner-wrapper'
      }, $xeDrawer.callSlot(cornerSlot, {
        $drawer: $xeDrawer
      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), showClose ? h('div', {
        class: ['vxe-drawer--close-btn', 'trigger--btn'],
        attrs: {
          title: (0, _ui.getI18n)('vxe.drawer.close')
        },
        on: {
          click: $xeDrawer.closeEvent
        }
      }, [h('i', {
        class: (0, _ui.getIcon)().DRAWER_CLOSE
      })]) : (0, _ui.renderEmptyElement)($xeDrawer)])];
    },
    renderHeader: function renderHeader(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var _props$slots2 = props.slots,
        propSlots = _props$slots2 === void 0 ? {} : _props$slots2,
        showTitleOverflow = props.showTitleOverflow;
      var headerSlot = slots.header || propSlots.header;
      if (props.showHeader) {
        return h('div', {
          class: ['vxe-drawer--header', {
            'is--ellipsis': showTitleOverflow
          }]
        }, headerSlot ? $xeDrawer.callSlot(headerSlot, {
          $drawer: $xeDrawer
        }, h) : $xeDrawer.renderTitles(h));
      }
      return (0, _ui.renderEmptyElement)($xeDrawer);
    },
    renderBody: function renderBody(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var _props$slots3 = props.slots,
        propSlots = _props$slots3 === void 0 ? {} : _props$slots3,
        content = props.content,
        useHtml = props.useHtml;
      var defaultSlot = slots.default || propSlots.default;
      var leftSlot = slots.left || propSlots.left;
      var rightSlot = slots.right || propSlots.right;
      return h('div', {
        class: 'vxe-drawer--body'
      }, [leftSlot ? h('div', {
        class: 'vxe-drawer--body-left'
      }, $xeDrawer.callSlot(leftSlot, {
        $drawer: $xeDrawer
      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h('div', {
        class: 'vxe-drawer--body-default'
      }, [useHtml && !defaultSlot ? h('div', {
        key: 'hc',
        class: 'vxe-drawer--content',
        domProps: {
          innerHTML: (0, _utils.getFuncText)(content)
        }
      }) : h('div', {
        class: 'vxe-drawer--content'
      }, defaultSlot ? $xeDrawer.callSlot(defaultSlot, {
        $drawer: $xeDrawer
      }, h) : (0, _utils.getFuncText)(content))]), rightSlot ? h('div', {
        class: 'vxe-drawer--body-right'
      }, $xeDrawer.callSlot(rightSlot, {
        $drawer: $xeDrawer
      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h(_loading.default, {
        class: 'vxe-drawer--loading',
        props: {
          value: props.loading
        }
      })]);
    },
    renderDefaultFooter: function renderDefaultFooter(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var _props$slots4 = props.slots,
        propSlots = _props$slots4 === void 0 ? {} : _props$slots4,
        showCancelButton = props.showCancelButton,
        showConfirmButton = props.showConfirmButton,
        loading = props.loading;
      var lfSlot = slots.leftfoot || propSlots.leftfoot;
      var rfSlot = slots.rightfoot || propSlots.rightfoot;
      var btnVNs = [];
      if (showCancelButton) {
        btnVNs.push(h(_button.default, {
          key: 1,
          ref: 'refCancelBtn',
          props: {
            content: props.cancelButtonText || (0, _ui.getI18n)('vxe.button.cancel')
          },
          on: {
            click: $xeDrawer.cancelEvent
          }
        }));
      }
      if (showConfirmButton) {
        btnVNs.push(h(_button.default, {
          key: 2,
          ref: 'refConfirmBtn',
          props: {
            status: 'primary',
            loading: loading,
            content: props.confirmButtonText || (0, _ui.getI18n)('vxe.button.confirm')
          },
          on: {
            click: $xeDrawer.confirmEvent
          }
        }));
      }
      return h('div', {
        class: 'vxe-drawer--footer-wrapper'
      }, [h('div', {
        class: 'vxe-drawer--footer-left'
      }, lfSlot ? $xeDrawer.callSlot(lfSlot, {
        $drawer: $xeDrawer
      }, h) : []), h('div', {
        class: 'vxe-drawer--footer-right'
      }, rfSlot ? $xeDrawer.callSlot(rfSlot, {
        $drawer: $xeDrawer
      }, h) : btnVNs)]);
    },
    renderFooter: function renderFooter(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var _props$slots5 = props.slots,
        propSlots = _props$slots5 === void 0 ? {} : _props$slots5;
      var footerSlot = slots.footer || propSlots.footer;
      if (props.showFooter) {
        return h('div', {
          class: 'vxe-drawer--footer'
        }, footerSlot ? $xeDrawer.callSlot(footerSlot, {
          $drawer: $xeDrawer
        }, h) : [$xeDrawer.renderDefaultFooter(h)]);
      }
      return (0, _ui.renderEmptyElement)($xeDrawer);
    },
    renderVN: function renderVN(h) {
      var $xeDrawer = this;
      var props = $xeDrawer;
      var slots = $xeDrawer.$scopedSlots;
      var reactData = $xeDrawer.reactData;
      var _props$slots6 = props.slots,
        propSlots = _props$slots6 === void 0 ? {} : _props$slots6,
        className = props.className,
        position = props.position,
        loading = props.loading,
        lockScroll = props.lockScroll,
        padding = props.padding,
        lockView = props.lockView,
        mask = props.mask,
        resize = props.resize,
        destroyOnClose = props.destroyOnClose;
      var initialized = reactData.initialized,
        contentVisible = reactData.contentVisible,
        visible = reactData.visible;
      var asideSlot = slots.aside || propSlots.aside;
      var vSize = $xeDrawer.computeSize;
      var dragType = $xeDrawer.computeDragType;
      return h('div', {
        ref: 'refElem',
        class: ['vxe-drawer--wrapper', "pos--".concat(position), className || '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'lock--scroll', lockScroll), 'lock--view', lockView), 'is--mask', mask), 'is--visible', contentVisible), 'is--active', visible), 'is--loading', loading)],
        style: {
          zIndex: reactData.drawerZIndex
        },
        on: {
          click: $xeDrawer.selfClickEvent
        }
      }, initialized ? [h('div', {
        ref: 'refDrawerBox',
        class: 'vxe-drawer--box',
        on: {
          mousedown: $xeDrawer.boxMousedownEvent
        }
      }, [asideSlot ? h('div', {
        class: 'vxe-drawer--aside'
      }, $xeDrawer.callSlot(asideSlot, {
        $drawer: $xeDrawer
      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h('div', {
        class: 'vxe-drawer--container'
      }, !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [$xeDrawer.renderHeader(h), $xeDrawer.renderBody(h), $xeDrawer.renderFooter(h), resize ? h('span', {
        class: 'vxe-drawer--resize'
      }, [h('span', {
        class: "".concat(dragType, "-resize"),
        attrs: {
          type: dragType
        },
        on: {
          mousedown: $xeDrawer.dragEvent
        }
      })]) : (0, _ui.renderEmptyElement)($xeDrawer)])])] : []);
    }
  },
  watch: {
    width: function width() {
      var $xeDrawer = this;
      $xeDrawer.recalculate();
    },
    height: function height() {
      var $xeDrawer = this;
      $xeDrawer.recalculate();
    },
    value: function value(val) {
      var $xeDrawer = this;
      if (val) {
        $xeDrawer.openDrawer();
      } else {
        $xeDrawer.closeDrawer('model');
      }
    }
  },
  mounted: function mounted() {
    var $xeDrawer = this;
    var props = $xeDrawer;
    var reactData = $xeDrawer.reactData;
    reactData.initialized = !!props.preload;
    $xeDrawer.$nextTick(function () {
      if (props.value) {
        $xeDrawer.openDrawer();
      }
    });
    if (props.escClosable) {
      _ui.globalEvents.on($xeDrawer, 'keydown', $xeDrawer.handleGlobalKeydownEvent);
    }
  },
  beforeDestroy: function beforeDestroy() {
    var $xeDrawer = this;
    var panelElem = $xeDrawer.$refs.refElem;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xeDrawer, 'keydown');
    $xeDrawer.removeActiveQueue();
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */