text: "use strict";
  
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  
  exports.__esModule = true;
  exports.default = void 0;
  
  var _utils = require("../utils");
  
  var _portal = require("../mixins/portal");
  
  var _relation = require("../mixins/relation");
  
  var _event = require("../utils/dom/event");
  
  var _cell = _interopRequireDefault(require("../cell"));
  
  var _icon = _interopRequireDefault(require("../icon"));
  
  var _popup = _interopRequireDefault(require("../popup"));
  
  var _createNamespace = (0, _utils.createNamespace)('dropdown-item'),
      createComponent = _createNamespace[0],
      bem = _createNamespace[1];
  
  var _default2 = createComponent({
    mixins: [(0, _portal.PortalMixin)({
      ref: 'wrapper'
    }), (0, _relation.ChildrenMixin)('vanDropdownMenu')],
    props: {
      value: null,
      title: String,
      disabled: Boolean,
      titleClass: String,
      options: {
        type: Array,
        default: function _default() {
          return [];
        }
      }
    },
    data: function data() {
      return {
        transition: true,
        showPopup: false,
        showWrapper: false
      };
    },
    computed: {
      displayTitle: function displayTitle() {
        var _this = this;
  
        if (this.title) {
          return this.title;
        }
  
        var match = this.options.filter(function (option) {
          return option.value === _this.value;
        });
        return match.length ? match[0].text : '';
      }
    },
    watch: {
      showPopup: function showPopup(val) {
        this.bindScroll(val);
      }
    },
    beforeCreate: function beforeCreate() {
      var _this2 = this;
  
      var createEmitter = function createEmitter(eventName) {
        return function () {
          return _this2.$emit(eventName);
        };
      };
  
      this.onOpen = createEmitter('open');
      this.onClose = createEmitter('close');
      this.onOpened = createEmitter('opened');
    },
    methods: {
      // @exposed-api
      toggle: function toggle(show, options) {
        if (show === void 0) {
          show = !this.showPopup;
        }
  
        if (options === void 0) {
          options = {};
        }
  
        if (show === this.showPopup) {
          return;
        }
  
        this.transition = !options.immediate;
        this.showPopup = show;
  
        if (show) {
          this.parent.updateOffset();
          this.showWrapper = true;
        }
      },
      bindScroll: function bindScroll(bind) {
        var scroller = this.parent.scroller;
        var action = bind ? _event.on : _event.off;
        action(scroller, 'scroll', this.onScroll, true);
      },
      onScroll: function onScroll() {
        this.parent.updateOffset();
      },
      onClickWrapper: function onClickWrapper(event) {
        // prevent being identified as clicking outside and closed when use get-contaienr
        if (this.getContainer) {
          event.stopPropagation();
        }
      }
    },
    render: function render() {
      var _this3 = this;
  
      var h = arguments[0];
      var _this$parent = this.parent,
          zIndex = _this$parent.zIndex,
          offset = _this$parent.offset,
          overlay = _this$parent.overlay,
          duration = _this$parent.duration,
          direction = _this$parent.direction,
          activeColor = _this$parent.activeColor,
          closeOnClickOverlay = _this$parent.closeOnClickOverlay;
      var Options = this.options.map(function (option) {
        var active = option.value === _this3.value;
        return h(_cell.default, {
          "attrs": {
            "clickable": true,
            "icon": option.icon,
            "title": option.text
          },
          "key": option.value,
          "class": bem('option', {
            active: active
          }),
          "style": {
            color: active ? activeColor : ''
          },
          "on": {
            "click": function click() {
              _this3.showPopup = false;
  
              if (option.value !== _this3.value) {
                _this3.$emit('input', option.value);
  
                _this3.$emit('change', option.value);
              }
            }
          }
        }, [active && h(_icon.default, {
          "class": bem('icon'),
          "attrs": {
            "color": activeColor,
            "name": "success"
          }
        })]);
      });
      var style = {
        zIndex: zIndex
      };
  
      if (direction === 'down') {
        style.top = offset + "px";
      } else {
        style.bottom = offset + "px";
      }
  
      return h("div", [h("div", {
        "directives": [{
          name: "show",
          value: this.showWrapper
        }],
        "ref": "wrapper",
        "style": style,
        "class": bem([direction]),
        "on": {
          "click": this.onClickWrapper
        }
      }, [h(_popup.default, {
        "attrs": {
          "overlay": overlay,
          "position": direction === 'down' ? 'top' : 'bottom',
          "duration": this.transition ? duration : 0,
          "closeOnClickOverlay": closeOnClickOverlay,
          "overlayStyle": {
            position: 'absolute'
          }
        },
        "class": bem('content'),
        "on": {
          "open": this.onOpen,
          "close": this.onClose,
          "opened": this.onOpened,
          "closed": function closed() {
            _this3.showWrapper = false;
  
            _this3.$emit('closed');
          }
        },
        "model": {
          value: _this3.showPopup,
          callback: function callback($$v) {
            _this3.showPopup = $$v;
          }
        }
      }, [Options, this.slots('default')])])]);
    }
  });
  
  exports.default = _default2;