"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 _anchorLink = _interopRequireDefault(require("./anchor-link"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeAnchor',
  props: {
    value: String,
    options: Array,
    container: [String, Object, Function],
    showMarker: {
      type: Boolean,
      default: true
    }
  },
  provide: function provide() {
    var $xeAnchor = this;
    return {
      $xeAnchor: $xeAnchor
    };
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      activeHref: null,
      staticLinks: [],
      containerElem: null
    };
    return {
      xID: xID,
      reactData: reactData
    };
  },
  computed: {
    computeAllHrefList: function computeAllHrefList() {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      var list = [];
      _xeUtils.default.eachTree(reactData.staticLinks, function (item) {
        list.push(item.href || '');
      }, {
        children: 'children'
      });
      return list;
    }
  },
  watch: {
    value: function value(val) {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      reactData.activeHref = val;
    },
    'reactData.activeHref': function reactDataActiveHref() {
      var $xeAnchor = this;
      $xeAnchor.updateMarkerPos();
    },
    container: function container() {
      var $xeAnchor = this;
      $xeAnchor.removeContainerElemScroll();
      $xeAnchor.updateContainerElem();
    }
  },
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeAnchor = this;
      $xeAnchor.$emit(type, (0, _ui.createEvent)(evnt, {
        $anchor: $xeAnchor
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeAnchor = this;
      var _events = $xeAnchor._events;
      $xeAnchor.$emit('input', value);
      if (_events && _events.modelValue) {
        $xeAnchor.$emit('modelValue', value);
      } else {
        $xeAnchor.$emit('model-value', value);
      }
    },
    getContainerElem: function getContainerElem() {
      var $xeAnchor = this;
      var props = $xeAnchor;
      var container = props.container;
      if (container) {
        if (_xeUtils.default.isElement(container)) {
          return container;
        }
        if (_xeUtils.default.isString(container)) {
          return document.querySelector(container);
        }
        if (_xeUtils.default.isFunction(container)) {
          return container({
            $anchor: $xeAnchor
          });
        }
      }
      return null;
    },
    emitEvent: function emitEvent(value) {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      var _events = $xeAnchor._events;
      reactData.activeHref = value;
      $xeAnchor.emitModel(value);
      if (_events && _events.modelValue) {
        $xeAnchor.$emit('modelValue', value);
      } else {
        $xeAnchor.$emit('model-value', value);
      }
    },
    handleContainerScrollEvent: function handleContainerScrollEvent() {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      var allHrefList = $xeAnchor.computeAllHrefList;
      var containerElem = reactData.containerElem;
      if (containerElem) {
        var wrapperElList = containerElem.querySelectorAll(allHrefList.map(function (href) {
          return "".concat(href);
        }).join(','));
        for (var i = 0; i < wrapperElList.length; i++) {
          var wrapperEl = wrapperElList[i];
          var wrapperRect = wrapperEl.getBoundingClientRect();
          if (wrapperRect.top > 0) {
            var href = wrapperEl.id;
            reactData.activeHref = "#".concat(href);
            break;
          }
        }
      }
    },
    removeContainerElemScroll: function removeContainerElemScroll() {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      var containerElem = reactData.containerElem;
      if (containerElem) {
        containerElem.removeEventListener('scroll', $xeAnchor.handleContainerScrollEvent);
      }
    },
    updateContainerElem: function updateContainerElem() {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      var containerElem = $xeAnchor.getContainerElem();
      reactData.containerElem = containerElem;
      if (containerElem) {
        containerElem.addEventListener('scroll', $xeAnchor.handleContainerScrollEvent, {
          passive: false
        });
      }
    },
    updateMarkerPos: function updateMarkerPos() {
      var $xeAnchor = this;
      var reactData = $xeAnchor.reactData;
      $xeAnchor.$nextTick(function () {
        var activeHref = reactData.activeHref;
        var elem = $xeAnchor.$refs.refElem;
        var markerEl = $xeAnchor.$refs.refMarkerElem;
        if (elem && markerEl) {
          if (activeHref) {
            var linkEl = elem.querySelector("[href=\"".concat(activeHref, "\"]"));
            if (linkEl) {
              var _getOffsetPos = (0, _dom.getOffsetPos)(linkEl, elem),
                top = _getOffsetPos.top;
              markerEl.style.top = "".concat(top, "px");
            }
          }
        }
      });
    },
    handleClickLink: function handleClickLink(evnt, href) {
      var $xeAnchor = this;
      evnt.preventDefault();
      var targetEl = document.getElementById("".concat(href).replace('#', ''));
      if (targetEl) {
        targetEl.scrollIntoView({
          behavior: 'smooth'
        });
      }
      $xeAnchor.emitEvent(href);
      $xeAnchor.dispatchEvent('click', {
        href: href
      }, evnt);
    },
    //
    // Render
    //
    renderSubItems: function renderSubItems(h, options) {
      var $xeAnchor = this;
      var itemVNs = [];
      if (options) {
        options.forEach(function (item) {
          var subItems = item.children;
          if (subItems && subItems.length) {
            itemVNs.push(h(_anchorLink.default, {
              props: {
                content: item.content,
                title: item.title,
                href: item.href
              },
              scopedSlots: {
                sub: function sub() {
                  return $xeAnchor.renderSubItems(h, subItems);
                }
              }
            }));
          } else {
            itemVNs.push(h(_anchorLink.default, {
              props: {
                content: item.content,
                title: item.title,
                href: item.href
              }
            }));
          }
        });
      }
      return itemVNs;
    },
    renderVN: function renderVN(h) {
      var $xeAnchor = this;
      var props = $xeAnchor;
      var slots = $xeAnchor.$scopedSlots;
      var options = props.options,
        showMarker = props.showMarker;
      var defaultSlot = slots.default;
      return h('div', {
        ref: 'refElem',
        class: ['vxe-anchor', {
          'is--marker': showMarker
        }]
      }, [h('div', {
        class: 'vxe-anchor--list'
      }, defaultSlot ? defaultSlot({}) : $xeAnchor.renderSubItems(h, options)), showMarker ? h('div', {
        ref: 'refMarkerElem',
        class: 'vxe-anchor--marker'
      }) : (0, _ui.renderEmptyElement)($xeAnchor)]);
    }
  },
  mounted: function mounted() {
    var $xeAnchor = this;
    $xeAnchor.$nextTick(function () {
      $xeAnchor.updateContainerElem();
    });
  },
  beforeDestroy: function beforeDestroy() {
    var $xeAnchor = this;
    $xeAnchor.removeContainerElemScroll();
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */