<template>
  <el-scrollbar
    ref="scrollContainer"
    :vertical="false"
    class="scroll-container"
    @wheel.native.prevent="handleScroll"
  >
    <slot />
  </el-scrollbar>
</template>

<script langt='ts'>
import { Vue, Component } from "vue-property-decorator";

const tagAndTagSpacing = 4; // tagAndTagSpacing
@Component({
  name: "ScrollPane",
})
export default class ScrollPanel extends Vue {
  left = 0;
  get scrollWrapper() {
    return this.$refs.scrollContainer.$refs.wrap;
  }
  mounted() {
    this.scrollWrapper.addEventListener("scroll", this.emitScroll, true);
  }
  beforeDestroy() {
    this.scrollWrapper.removeEventListener("scroll", this.emitScroll);
  }
  handleScroll(e) {
    const eventDelta = e.wheelDelta || -e.deltaY * 40;
    const $scrollWrapper = this.scrollWrapper;
    $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
  }
  emitScroll() {
    this.$emit("scroll");
  }
  /**
   * 滚动
   */
  moveToTarget(currentTag) {
    const $container = this.$refs.scrollContainer.$el;
    const $containerWidth = $container.offsetWidth;
    const $scrollWrapper = this.scrollWrapper;
    const tagList = this.$parent.$refs.tag;

    let firstTag = null;
    let lastTag = null;

    // 查找第一个标记和最后一个标记
    if (tagList.length > 0) {
      firstTag = tagList[0];
      lastTag = tagList[tagList.length - 1];
    }

    if (firstTag === currentTag) {
      $scrollWrapper.scrollLeft = 0;
    } else if (lastTag === currentTag) {
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
    } else {
      // 查找preTag和nextTag
      const currentIndex = tagList.findIndex((item) => item === currentTag);
      const prevTag = tagList[currentIndex - 1];
      const nextTag = tagList[currentIndex + 1];

      // 标记在下一个标记之后偏移
      const afterNextTagOffsetLeft =
        nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;

      // 标记在prevTag之前的offsetLeft
      const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing;

      if (
        afterNextTagOffsetLeft >
        $scrollWrapper.scrollLeft + $containerWidth
      ) {
        $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
      } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
        $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  height: 43px;
  //滚动条
  ::-webkit-scrollbar {
    height: 1px;
  }
  ::-webkit-scrollbar-track {
    background-color: #bee1eb;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #00aff0;
  }
  // ::-webkit-scrollbar-thumb:hover {
  //   background-color: #9c3;
  // }
  // ::-webkit-scrollbar-thumb:active {
  //   background-color: #00aff0;
  // }
  width: calc(100% - 30px);
  /deep/ {
    .el-scrollbar__bar {
      bottom: 0px;
    }
    .el-scrollbar__wrap {
      height: 43px;
      // overflow: auto;
      overflow: hidden;
    }
  }
}
</style>
