<template>
  <div class="NavScroll">
      <!-- 导航栏 -->
    <div class="sidebar">
      <a
        :href="'#work' + 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">
         <!-- 施工许可 -->
        <licence />
        <!-- 开工准备 -->
        <project-start />
        <!-- 安全文明施工 -->
        <construction />
        <!-- 质量管理 -->
        <quality />
        <!-- 进度管理 -->
        <schedule />
        <!-- 变更管理 -->
        <change />
         <!-- 技术资料 -->
        <technical />
         <!-- 经济资料 -->
        <economics />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import construction from './component/construction.vue'
import quality from './component/quality.vue'
import Schedule from './component/schedule.vue'
import Change from './component/change.vue'
import licence from './component/licence.vue'
import technical from './component/technicalInfo.vue'
import economics from './component/economicsInfo.vue'
import projectStart from './component/projectStart.vue'
export default {
  name: 'workProcess',
  components: {
    construction,
    quality,
    Schedule,
    Change,
    licence,
    technical,
    economics,
    projectStart
  },
  data() {
    return {
      allMenuList: [
        {id: 1,name:'施工许可'},
        {id: 2, name: '开工准备'},
        {id: 3, name: '安全文明施工'},
        {id: 4, name: '质量管理'},
        {id: 5, name: '进度管理'},
        {id: 6, name: '变更管理'},
        {id: 7, name: '技术资料'},
        {id: 8, 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: 130px;
}
</style>