<template>
  <div :class="float ? 'cec-anchor_float' : 'cec-anchor'" :style="{ height }">
    <div :class="`anchor-header ${float ? getHeaderPosition : ''}`">
      <div class="anchor-trunk" :style="{ height: getAnchorLinkHeight }">
        <!-- <div class="anchor-icon" ref="anchor-icon">
          <div class="anchor-icon-white"></div>
        </div> -->
      </div>
      <div class="anchor-link" :style="{ height: getAnchorLinkHeight }">
        <AnchorLink
          :data="data"
          @goAnchor="goAnchor"
          :currentAnchor="currentAnchor"
        ></AnchorLink>
      </div>
    </div>
    <div ref="anchor-body" class="anchor-body" @scroll="scrollEvent($event)">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import AnchorLink from "./anchorItem.vue"
export default {
  props: {
    float: Boolean,
    placement: {
      type: String,
      default: "leftTop",
    },
    itemHeight: {
      type: Number,
      default: 180,
    },
    data: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: "600px",
    },
  },
  components: {
    AnchorLink,
  },
  computed: {
      //获取所有锚点组合的锚点高度
    getAnchorLinkHeight() {
      let childrenHeight = 0;
      this.data.forEach((ele) => {
        if (ele.children && ele.children.length > 0) {
          childrenHeight += ele.children.length * 30;
        }
      });
      console.log(childrenHeight + 30 * this.data.length - 20 + "px")
      return (childrenHeight + 30) * (this.data.length - 20) + "px";
    },
    //获取所有锚点组合的位置
    getHeaderPosition() {
      switch (this.placement) {
        case "leftTop":
          return "placement-left-top";
        case "leftCenter":
          return "placement-left-center";
        case "leftBottom":
          return "placement-left-bottom";
        case "rightTop":
          return "placement-right-top";
        case "rightCenter":
          return "placement-right-center";
        case "rightBottom":
          return "placement-right-bottom";
        default:
          return "";
      }
    },
  },
  watch: {
      //监听数据变化，获取所有锚点（方便后面计算），获取第一个锚点的偏差
      //（因为offset计算的是当前容器被卷去的高度，可能你的高度存在偏差，所以需要减去）
    data: {
      handler(val) {
        if (val && val.length > 0) {
          this.allAnchor = this.getAllAnchor(val);
          //偏差
          this.$nextTick(() => {
            var anchor = document.querySelector(val[0].tar);
            this.offset = anchor.offsetTop;
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      currentAnchor: "",
      oldHeight: 0,
      scorllTimer: null,
      allAnchor: [],
      offset: 0,
    };
  },
  methods: {
      //递归获取所有锚点的值
    getAllAnchor(anchor) {
      let anchorTree = [];
      anchor.forEach((ele) => {
        anchorTree.push({ tar: ele.tar, title: ele.title });
        if (ele.children && ele.children.length > 0) {
          anchorTree.push(...this.getAllAnchor(ele.children));
        }
      });
      return anchorTree;
    },
    //点击锚点滚动
    goAnchor(selector) {
      //将原来的scrollTimer变为现在的scorllClick  防止滚动条滚动多次触发
      this.scorllClick = true;
      this.currentAnchor = selector;
      var anchor = document.querySelector(selector);
      this.$refs["anchor-body"].scrollTop = anchor.offsetTop-50;
      this.allAnchor.forEach((ele, i) => {
        if (ele.tar === selector) {
          // this.$refs["anchor-icon"].style.display = "block";
          // this.$refs["anchor-icon"].style.top = i * 30 + 2 + "px";
        }
      });
      this.scorllClick = false;

    },
    //页面滚动， 判断当前的scrollTop在哪个锚点之间，修改锚点的样式
    scrollEvent() {
      if (this.scorllClick) {
        return;
      }  
      if (this.scorllTimer != null) {
        return;
      }
      //当前滚动位置
      let scrollTop = this.$refs["anchor-body"].scrollTop;
      // console.log(scrollTop)
      
      this.allAnchor.forEach((ele, i) => {
        let dom = document.querySelector(ele.tar);
        if (dom) {
          if (
            scrollTop > dom.offsetTop-80
         
          ) {
            this.currentAnchor = ele.tar;
            // this.currentAnchor = this.allAnchor[i+1].tar;
            // this.$refs["anchor-icon"].style.display = "block";
            // this.$refs["anchor-icon"].style.top = i * 30 + 2 + "px";
            return;
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cec-anchor {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  overflow: hidden;
  .anchor-header {
    padding: 10px;
    width: 10%;
    height: auto;
    overflow: auto;
    box-sizing: border-box;
  }
  .anchor-body {
    width: 90%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
}
.cec-anchor_float {
  position: relative;
  overflow: hidden;
  .anchor-header {
    position: absolute;
    padding: 10px;
    width: 10%;
    height: auto;
    box-sizing: border-box;
  }
  .anchor-body {
    width: 100%;
    padding: 0 10%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
  }
}
.anchor-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  font-size: 14px;
  .anchor-trunk {
    margin-top: 10px;
    width: 2px;
    border-radius: 1px;
    position: relative;
    background-color: lightgrey;
    display: none;
    .anchor-icon {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 5px;
      display: none;
      left: -3px;
      background-color: #2db7f5;
      .anchor-icon-white {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin: 2px;
        background-color: white;
      }
    }
  }
  .anchor-link {
    padding-left: 5px;
    .anchor-link-item {
      height: 30px;
      line-height: 30px;
    }
  }
}
.placement-left-top {
  top: 10px;
  left: 10px;
}
.placement-left-center {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.placement-left-bottom {
  left: 10px;
  bottom: 10px;
}
.placement-right-top {
  top: 10px;
  right: 10px;
}
.placement-right-center {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.placement-right-bottom {
  bottom: 10px;
  right: 10px;
}
</style>
