<template>
  <div class="d-page flow-y-dhc">
    <van-index-bar :index-list="indexList" highlight-color="#F79400">
      <div class="d-page" v-for="(item, index) in navList" :key="index">
        <van-index-anchor :index="item.titleText">
          <div class="nav-title-color"></div>
          <span class="nav-title">{{ item.titleText }}</span>
        </van-index-anchor>
        <slot :name="item.key"></slot>
      </div>
    </van-index-bar>
  </div>
</template>

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

/**
 * @Description: 导航定位组件
 * @author lbb
 * @date 2021年12月16日17:09:22
 */
@Component({
  name: "AnchorNav",
})
export default class AnchorNav extends Vue {
  @Prop({ default: () => [] }) navList: any[] | undefined; //组件数据集合
  indexList: any[] = []; //导航集合
  mounted() {
    //初始化右侧导航树
    this.navList?.forEach((item, index) => {
      this.indexList.push(item.titleText);
    });
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-index-bar__sidebar {
  top: 25%;
  right: 50px;
  padding: 24px 0;
  border-left: 2px solid #f2f2f2 !important;
}
::v-deep .van-index-bar__index {
  line-height: 40px;
  height: 40px;
  font-size: 14px;
  text-align: left;
}
::v-deep .van-index-anchor {
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
}
::v-deep .van-index-bar {
  padding-right: 150px;
  background: #ffffff;
}
::v-deep .van-index-bar__index:first-child:after,
::v-deep .van-index-bar__index:last-child:after,
::v-deep .van-index-bar__index:before,
::v-deep .van-index-bar__index--active:before {
  position: absolute;
  content: " ";
  width: 10px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
}
::v-deep .van-index-bar__index:first-child:after {
  top: -20px;
  left: -6px;
  background-image: url("../../assets/images/small_circle.png");
}
::v-deep .van-index-bar__index:last-child:after {
  bottom: -20px;
  left: -6px;
  background-image: url("../../assets/images/small_circle.png");
}
::v-deep .van-index-bar__index:before {
  left: -6px;
  background-image: url("../../assets/images/a_point.png");
}
::v-deep .van-index-bar__index--active:before {
  width: 17px;
  height: 38px;
  left: -9px;
  background-image: url("/assets/svg/cursor-active.svg");
}
.nav-title {
  color: #333333;
  font-size: 18px;
  font-weight: 700;
}
.nav-title-color {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background-color: rgba(247, 148, 0, 0.4);
  margin-right: 10px;
  display: inline-block;
}
</style>