"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _relation = require("../mixins/relation");

var _scroll = _interopRequireDefault(require("../utils/dom/scroll"));

var _default = (0, _create.default)({
  render: function render() {
    var _obj;

    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      style: {
        height: _vm.sticky ? _vm.rect.height + "px" : null
      }
    }, [_c('div', {
      class: [_vm.b({
        sticky: _vm.sticky
      }), (_obj = {}, _obj['vm-hairline-bottom'] = _vm.sticky, _obj)],
      style: _vm.anchorStyle
    }, [_vm._t("default", [_vm._v("\n      " + _vm._s(_vm.index) + "\n    ")])], 2)]);
  },
  name: "index-anchor",
  mixins: [(0, _relation.ChildrenMixin)("vmIndexBar", {
    indexKey: "childrenIndex"
  })],
  props: {
    index: [Number, String]
  },
  data: function data() {
    return {
      top: 0,
      left: null,
      rect: {
        top: 0,
        height: 0
      },
      width: null,
      active: false
    };
  },
  computed: {
    sticky: function sticky() {
      return this.active && this.parents.sticky;
    },
    anchorStyle: function anchorStyle() {
      if (this.sticky) {
        return {
          zIndex: "" + this.parents.zIndex,
          left: this.left ? this.left + "px" : null,
          width: this.width ? this.width + "px" : null,
          transform: "translate3d(0, " + this.top + "px, 0)",
          color: this.parents.highlightColor
        };
      }
    }
  },
  mounted: function mounted() {
    var rect = this.$el.getBoundingClientRect();
    this.rect.height = rect.height;
  },
  methods: {
    scrollIntoView: function scrollIntoView() {
      this.$el.scrollIntoView();
    },
    getRect: function getRect(scroller, scrollerRect) {
      var el = this.$el;
      var elRect = el.getBoundingClientRect();
      this.rect.height = elRect.height;

      if (scroller === window || scroller === document.body) {
        this.rect.top = elRect.top + _scroll.default.getRootScrollTop();
      } else {
        this.rect.top = elRect.top + _scroll.default.getScrollTop(scroller) - scrollerRect.top;
      }

      return this.rect;
    }
  }
});

exports.default = _default;