"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
var _utils = require("../../ui/src/utils");
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 _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxePulldown',
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.permissionMixin],
  props: {
    value: Boolean,
    disabled: Boolean,
    placement: String,
    /**
     * 已废弃，请使用 popup-config.trigger
     * @deprecated
     */
    trigger: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().pulldown.trigger;
      }
    },
    /**
     * 已废弃，请使用 popupConfig.zIndex
     * @deprecated
     */
    zIndex: Number,
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().pulldown.size || (0, _ui.getConfig)().size;
      }
    },
    options: Array,
    className: {
      type: [String, Function],
      default: function _default() {
        return (0, _ui.getConfig)().pulldown.className;
      }
    },
    /**
     * 已废弃，请使用 popupConfig.className
     * @deprecated
     */
    popupClassName: [String, Function],
    showPopupShadow: Boolean,
    popupConfig: Object,
    destroyOnClose: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().pulldown.destroyOnClose;
      }
    },
    transfer: {
      type: Boolean,
      default: null
    }
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeDrawer: {
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    }
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      initialized: false,
      panelIndex: 0,
      panelStyle: {},
      panelPlacement: null,
      visiblePanel: false,
      isAniVisible: false,
      isActivated: false
    };
    var internalData = {
      hpTimeout: undefined
    };
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeBtnTransfer: function computeBtnTransfer() {
      var $xePulldown = this;
      var props = $xePulldown;
      var $xeModal = $xePulldown.$xeModal;
      var $xeDrawer = $xePulldown.$xeDrawer;
      var $xeTable = $xePulldown.$xeTable;
      var $xeForm = $xePulldown.$xeForm;
      var transfer = props.transfer;
      var popupOpts = $xePulldown.computePopupOpts;
      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().pulldown.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computePopupOpts: function computePopupOpts() {
      var $xePulldown = this;
      var props = $xePulldown;
      return Object.assign({}, (0, _ui.getConfig)().pulldown.popupConfig, props.popupConfig);
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xePulldown = this;
      $xePulldown.$emit(type, (0, _ui.createEvent)(evnt, {
        $pulldown: $xePulldown
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xePulldown = this;
      var _events = $xePulldown._events;
      if (_events && _events.modelValue) {
        $xePulldown.$emit('modelValue', value);
      } else {
        $xePulldown.$emit('model-value', value);
      }
    },
    updateZindex: function updateZindex() {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var popupOpts = $xePulldown.computePopupOpts;
      var customZIndex = popupOpts.zIndex || props.zIndex;
      if (customZIndex) {
        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    },
    isPanelVisible: function isPanelVisible() {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      return reactData.visiblePanel;
    },
    /**
     * 手动更新位置
     */
    updatePlacement: function updatePlacement() {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var placement = props.placement;
      var panelIndex = reactData.panelIndex;
      var targetElem = $xePulldown.$refs.refPulldownContent;
      var panelElem = $xePulldown.$refs.refPulldownPanel;
      var btnTransfer = $xePulldown.computeBtnTransfer;
      var popupOpts = $xePulldown.computePopupOpts;
      var handleStyle = function handleStyle() {
        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        var panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return $xePulldown.$nextTick().then(handleStyle);
    },
    /**
     * 显示下拉面板
     */
    showPanel: function showPanel() {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var internalData = $xePulldown.internalData;
      var btnTransfer = $xePulldown.computeBtnTransfer;
      var panelElem = $xePulldown.$refs.refPulldownPanel;
      if (!reactData.initialized) {
        reactData.initialized = true;
        if (btnTransfer) {
          if (panelElem) {
            document.body.appendChild(panelElem);
          }
        }
      }
      return new Promise(function (resolve) {
        if (!props.disabled) {
          if (internalData.hpTimeout) {
            clearTimeout(internalData.hpTimeout);
          }
          reactData.isActivated = true;
          reactData.isAniVisible = true;
          setTimeout(function () {
            reactData.visiblePanel = true;
            $xePulldown.emitModel(true);
            $xePulldown.updatePlacement();
            setTimeout(function () {
              resolve($xePulldown.updatePlacement());
            }, 40);
          }, 10);
          $xePulldown.updateZindex();
          $xePulldown.dispatchEvent('visible-change', {
            visible: true
          }, null);
        } else {
          $xePulldown.$nextTick(function () {
            resolve();
          });
        }
      });
    },
    /**
     * 隐藏下拉面板
     */
    hidePanel: function hidePanel() {
      var $xePulldown = this;
      return $xePulldown.hideOptionPanel();
    },
    hideOptionPanel: function hideOptionPanel() {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      var internalData = $xePulldown.internalData;
      reactData.visiblePanel = false;
      $xePulldown.dispatchEvent('visible-change', {
        visible: false
      }, null);
      $xePulldown.emitModel(false);
      return new Promise(function (resolve) {
        if (reactData.isAniVisible) {
          internalData.hpTimeout = setTimeout(function () {
            reactData.isAniVisible = false;
            $xePulldown.$nextTick(function () {
              resolve();
            });
          }, 350);
        } else {
          $xePulldown.$nextTick(function () {
            resolve();
          });
        }
      });
    },
    /**
     * 切换下拉面板
     */
    togglePanel: function togglePanel() {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      if (reactData.visiblePanel) {
        return $xePulldown.hideOptionPanel();
      }
      return $xePulldown.showPanel();
    },
    handleOptionEvent: function handleOptionEvent(evnt, option) {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      if (!option.disabled) {
        if (reactData.visiblePanel) {
          $xePulldown.hideOptionPanel();
          $xePulldown.dispatchEvent('hide-panel', {}, evnt);
        }
        $xePulldown.dispatchEvent('option-click', {
          option: option
        }, evnt);
      }
    },
    clickTargetEvent: function clickTargetEvent(evnt) {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var trigger = props.trigger;
      var popupOpts = $xePulldown.computePopupOpts;
      var currTrigger = trigger || popupOpts.trigger;
      if (currTrigger === 'click') {
        if (reactData.visiblePanel) {
          $xePulldown.hideOptionPanel();
          $xePulldown.dispatchEvent('hide-panel', {}, evnt);
        } else {
          $xePulldown.showPanel();
          $xePulldown.dispatchEvent('show-panel', {}, evnt);
        }
      }
      $xePulldown.dispatchEvent('click', {
        $pulldown: $xePulldown
      }, evnt);
    },
    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var trigger = props.trigger,
        disabled = props.disabled;
      var visiblePanel = reactData.visiblePanel;
      var popupOpts = $xePulldown.computePopupOpts;
      var currTrigger = trigger || popupOpts.trigger;
      var panelElem = $xePulldown.$refs.refPulldownPanel;
      if (!disabled) {
        if (visiblePanel) {
          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
            $xePulldown.updatePlacement();
          } else {
            if (currTrigger !== 'manual') {
              $xePulldown.hideOptionPanel();
              $xePulldown.dispatchEvent('hide-panel', {}, evnt);
            }
          }
        }
      }
    },
    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var trigger = props.trigger,
        disabled = props.disabled;
      var visiblePanel = reactData.visiblePanel;
      var popupOpts = $xePulldown.computePopupOpts;
      var currTrigger = trigger || popupOpts.trigger;
      var el = $xePulldown.$refs.refElem;
      var panelElem = $xePulldown.$refs.refPulldownPanel;
      if (!disabled) {
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          if (currTrigger !== 'manual') {
            $xePulldown.hideOptionPanel();
            $xePulldown.dispatchEvent('hide-panel', {}, evnt);
          }
        }
      }
    },
    handleGlobalBlurEvent: function handleGlobalBlurEvent(evnt) {
      var $xePulldown = this;
      var props = $xePulldown;
      var reactData = $xePulldown.reactData;
      var trigger = props.trigger;
      var visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      var popupOpts = $xePulldown.computePopupOpts;
      var currTrigger = trigger || popupOpts.trigger;
      if (visiblePanel) {
        if (currTrigger !== 'manual') {
          $xePulldown.hideOptionPanel();
          $xePulldown.dispatchEvent('hide-panel', {}, evnt);
        }
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
    },
    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      var visiblePanel = reactData.visiblePanel;
      if (visiblePanel) {
        $xePulldown.updatePlacement();
      }
    },
    //
    // Render
    //
    renderDefaultPanel: function renderDefaultPanel(h, options) {
      var $xePulldown = this;
      var slots = $xePulldown.$scopedSlots;
      var optionSlot = slots.option;
      return h('div', {
        class: 'vxe-pulldown--panel-list'
      }, options ? options.map(function (item) {
        return h('div', {
          class: 'vxe-pulldown--panel-item',
          on: {
            click: function click(evnt) {
              $xePulldown.handleOptionEvent(evnt, item);
            }
          }
        }, optionSlot ? optionSlot({
          $pulldown: $xePulldown,
          option: item
        }) : "".concat(item.label || ''));
      }) : []);
    },
    renderVN: function renderVN(h) {
      var $xePulldown = this;
      var props = $xePulldown;
      var slots = $xePulldown.$scopedSlots;
      var reactData = $xePulldown.reactData;
      var className = props.className,
        options = props.options,
        showPopupShadow = props.showPopupShadow,
        destroyOnClose = props.destroyOnClose,
        disabled = props.disabled;
      var initialized = reactData.initialized,
        isActivated = reactData.isActivated,
        isAniVisible = reactData.isAniVisible,
        visiblePanel = reactData.visiblePanel,
        panelStyle = reactData.panelStyle,
        panelPlacement = reactData.panelPlacement;
      var btnTransfer = $xePulldown.computeBtnTransfer;
      var popupOpts = $xePulldown.computePopupOpts;
      var vSize = $xePulldown.computeSize;
      var defaultSlot = slots.default;
      var headerSlot = slots.header;
      var footerSlot = slots.footer;
      var dropdownSlot = slots.dropdown;
      var ppClassName = popupOpts.className || props.popupClassName;
      return h('div', {
        ref: 'refElem',
        class: ['vxe-pulldown', className ? _xeUtils.default.isFunction(className) ? className({
          $pulldown: $xePulldown
        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', disabled), 'is--active', isActivated)]
      }, [h('div', {
        ref: 'refPulldownContent',
        class: 'vxe-pulldown--content',
        on: {
          click: $xePulldown.clickTargetEvent
        }
      }, defaultSlot ? defaultSlot({
        options: options,
        $pulldown: $xePulldown
      }) : []), h('div', {
        ref: 'refPulldownPanel',
        class: ['vxe-table--ignore-clear vxe-pulldown--panel', ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
          $pulldown: $xePulldown
        }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
        attrs: {
          placement: panelPlacement
        },
        style: panelStyle
      }, initialized ? [h('div', {
        class: ['vxe-pulldown--panel-wrapper', {
          'is--shadow': showPopupShadow
        }]
      }, initialized && (destroyOnClose ? visiblePanel || isAniVisible : true) ? [headerSlot ? h('div', {
        class: 'vxe-pulldown--panel-header'
      }, headerSlot({
        options: options,
        $pulldown: $xePulldown
      })) : (0, _ui.renderEmptyElement)($xePulldown), h('div', {
        class: 'vxe-pulldown--panel-body'
      }, dropdownSlot ? dropdownSlot({
        options: options,
        $pulldown: $xePulldown
      }) : [$xePulldown.renderDefaultPanel(h, options)]), footerSlot ? h('div', {
        class: 'vxe-pulldown--panel-footer'
      }, footerSlot({
        options: options,
        $pulldown: $xePulldown
      })) : (0, _ui.renderEmptyElement)($xePulldown)] : [])] : [])]);
    }
  },
  watch: {
    value: function value(val) {
      var $xePulldown = this;
      var reactData = $xePulldown.reactData;
      reactData.isActivated = !!val;
      if (val) {
        $xePulldown.showPanel();
      } else {
        $xePulldown.hideOptionPanel();
      }
    }
  },
  created: function created() {
    var $xePulldown = this;
    var props = $xePulldown;
    if (props.value) {
      $xePulldown.showPanel();
    }
    _ui.globalEvents.on($xePulldown, 'mousewheel', $xePulldown.handleGlobalMousewheelEvent);
    _ui.globalEvents.on($xePulldown, 'mousedown', $xePulldown.handleGlobalMousedownEvent);
    _ui.globalEvents.on($xePulldown, 'blur', $xePulldown.handleGlobalBlurEvent);
    _ui.globalEvents.on($xePulldown, 'resize', $xePulldown.handleGlobalResizeEvent);
  },
  beforeDestroy: function beforeDestroy() {
    var $xePulldown = this;
    var panelElem = $xePulldown.$refs.refPulldownPanel;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xePulldown, 'mousewheel');
    _ui.globalEvents.off($xePulldown, 'mousedown');
    _ui.globalEvents.off($xePulldown, 'blur');
    _ui.globalEvents.off($xePulldown, 'resize');
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */