import manager from "./manager";
import context from "./context";
import { getScrollEventTarget } from "../../../es5/utils/scroll";
import { off, on } from "../../../es5/utils/event";
import Touchable from "../../../es5/mixins/touchable"; // Utils

import mixins from "../../../es5/utils/mixins";
export default mixins(Touchable).extend({
  props: {
    // whether to show popup
    visible: Boolean,
    // whether to show mask
    mask: Boolean,
    // mask custom style
    maskStyle: Object,
    // mask custom class name
    maskClass: String,
    // whether to close popup when click mask
    closeOnClickMask: Boolean,
    // z-index
    zIndex: [String, Number],
    // prevent body scroll
    getContainer: [String, Function],
    lockScroll: {
      type: Boolean,
      default: true
    },
    lazyRender: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      inited: this.visible
    };
  },
  computed: {
    shouldRender: function shouldRender() {
      return this.inited || !this.lazyRender;
    }
  },
  watch: {
    visible: function visible(val) {
      this.inited = this.inited || this.visible;
      this[val ? 'open' : 'close']();
    },
    getContainer: function getContainer() {
      this.move();
    },
    mask: function mask() {
      this.renderMask();
    }
  },
  mounted: function mounted() {
    if (this.getContainer) {
      this.move();
    }

    if (this.visible) {
      this.open();
    }
  },
  activated: function activated() {
    if (this.visible) {
      this.open();
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.close();

    if (this.getContainer && this.$parent && this.$parent.$el) {
      this.$parent.$el.appendChild(this.$el);
    }
  },
  deactivated: function deactivated() {
    this.close();
  },
  methods: {
    move: function move() {
      var container;
      var getContainer = this.getContainer;

      if (getContainer) {
        if (typeof getContainer === 'string') {
          container = getContainer === 'body' ? document.body : document.querySelector(getContainer);
        } else {
          container = getContainer();
        }
      } else if (this.$parent) {
        container = this.$parent.$el;
      }

      if (container && container !== this.$el.parentNode) {
        container.appendChild(this.$el);
      }
    },
    open: function open() {
      /* istanbul ignore next */
      if (this.$isServer || this.opened) {
        return;
      } // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex`


      if (this.zIndex !== undefined) {
        context.zIndex = this.zIndex;
      }

      this.opened = true;
      this.renderMask();

      if (this.lockScroll) {
        on(document, 'touchstart', this.touchStart);
        on(document, 'touchmove', this.onThisTouchmove);
      }

      if (!context.lockCount) {
        document.body.classList.add('wv-overflow-hidden');
      }

      context.lockCount++;
      this.$emit('update:visible', true);
    },
    close: function close() {
      if (!this.opened) {
        return;
      }

      if (this.lockScroll) {
        context.lockCount--;
        off(document, 'touchstart', this.touchStart);
        off(document, 'touchmove', this.onThisTouchmove);

        if (!context.lockCount) {
          document.body.classList.remove('wv-overflow-hidden');
        }
      }

      this.opened = false;
      manager.close(this);
      this.$emit('update:visible', false);
    },
    onThisTouchmove: function onThisTouchmove(e) {
      this.touchMove(e);
      var direction = this.deltaY > 0 ? '10' : '01';
      var el = getScrollEventTarget(e.target, this.$el);
      var scrollHeight = el.scrollHeight,
          offsetHeight = el.offsetHeight,
          scrollTop = el.scrollTop;
      var status = '11';
      /* istanbul ignore next */

      if (scrollTop === 0) {
        status = offsetHeight >= scrollHeight ? '00' : '01';
      } else if (scrollTop + offsetHeight >= scrollHeight) {
        status = '10';
      }

      if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
        e.preventDefault();
        e.stopPropagation();
      }
    },
    renderMask: function renderMask() {
      var _this = this;

      if (this.mask) {
        manager.open(this, {
          zIndex: context.zIndex++,
          className: this.maskClass,
          customStyle: this.maskStyle
        });
      } else {
        manager.close(this);
      }

      this.$nextTick(function () {
        _this.$el.style.zIndex = (context.zIndex++).toString();
      });
    }
  }
});
//# sourceMappingURL=index.js.map