<template>
  <div class="NavScroll">
    <!-- 导航栏 -->
    <div class="sidebar">
      <a
        :href="'#page' + item.id"
        v-for="(item, index) in allMenuList"
        :key="index"
        @click="jump(index)"
      >
        <div
          class="navbar"
          :class="[index === activeStep ? 'active' : '']"
        >
          <span style="margin-left:5px">{{ item.name }}</span>
          <i class="el-icon-caret-right icon-right"></i>
        </div>
      </a>
    </div>

    <div class="applications-content">
      <el-scrollbar class="scrollbar" ref="scroll" id="resultScroll">
        <!--  项目信息-->
        <project-info />
        <!-- 决策依据 -->
        <decision />
        <!-- 立项备案 -->
        <approval />
        <!-- 可研批复 -->
        <feasible-reply />
        <!-- 土地手续 -->
        <plan-permission />
        <!-- 规划 -->
        <plan />
        <!-- 初步设计  -->
        <pre-design />
        <!-- 概算批复 -->
        <estimate />
        <!-- 施工图设计 -->
        <map-design />
        <!-- 施工图审查 -->
        <map-examine />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import projectInfo from './component/projectInfo.vue'
import approval from './component/approval.vue'
import feasibleReply from './component/feasibleReply.vue'
import planPermission from './component/planPermission.vue'
import preDesign from './component/preDesign.vue'
import estimate from './component/estimate.vue'
import mapExamine from './component/mapExamine.vue'
import mapDesign from './component/mapDesign.vue'

import Decision from './component/decision.vue'
import plan from './component/plan.vue'
export default {
  name: 'earlierStage',
  components: {
    projectInfo,
    approval,
    feasibleReply,
    planPermission,
    preDesign,
    estimate,
    mapExamine,
    mapDesign,
    Decision,
    plan,
  },
  data() {
    return {
      allMenuList: [
        {id: 1, name: '项目信息'},
        {id: 2, name: '决策依据'},
        {id: 3, name: '立项备案'},
        {id: 4, name: '可研批复'},
        {id: 5, name: '土地手续'},
        {id: 10, name: '规划'},
        {id: 6, name: '初步设计'},
        {id: 7, name: '概算批复'},
        {id: 8, name: '施工图设计'},
        {id: 9, name: '施工图审查'},
      ],
      activeStep: 0,
    }
  },

  mounted() {
    document
      .getElementById('resultScroll')
      .addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy() {
    document
      .getElementById('resultScroll')
      .removeEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    handleScroll(event) {
       let scrollTop=event.target.scrollTop
        let divContent=document.querySelectorAll('.items')
        let offsetTopArr=[]
        divContent.forEach(item=>{
        offsetTopArr.push(item.offsetTop)
        })
        for(let n=0;n<offsetTopArr.length;n++){
          if(scrollTop>=offsetTopArr[n]-100){
            this.activeStep=n;
        }
      }
    },
    // 点击切换锚点
    jump(index) {
      this.activeStep = index
    },
  },
}
</script>

<style scoped lang="scss">
@import './css/navbarCommon.scss';
.navbar {
  width: 115px;
}
</style>