<template>
  <div class="anchor-container">
    <div
      class="anchor-item"
      :class="{ active: activeIndex === index }"
      v-for="(item, index) in points"
      :key="item.value"
      @click="go(item.value, index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    anchorList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeIndex: 0,
      points: [
        {
          label: "基本信息",
          value: "basic",
        },
        {
          label: "项目信息",
          value: "project",
        },
        {
          label: "地理信息",
          value: "geo",
        },
        {
          label: "商业信息",
          value: "business",
        },
      ],
    };
  },
  methods: {
    go(value, index) {
      this.activeIndex = index;
      this.$emit("goAnchor", value);
    },
  },
};
</script>
<style lang="less" scoped>
.anchor-container {
  padding-left: 16px;
  margin-top: 21px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    top: 4px;
    background-color: #e4e6e7;
  }
}
.anchor-item {
  margin: 16px 0 0 16px;
  color: #8d9399;
  cursor: pointer;
  position: relative;
  &:active {
    color: #0091ff;
  }
  &.active {
    color: #0091ff;
    &::before {
      content: "";
      position: absolute;
      left: -16px;
      top: 4px;
      width: 2px;
      height: 12px;
      background-color: #0091ff;
    }
  }
}
</style>
