<template>
  <div class="NavScroll">
     <!-- 导航栏 -->
    <div class="sidebar">
      <a
        :href="'#acc' + 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">
      <!-- 单位工程验收 -->
      <unit-accpet />
      <!-- 预验收 -->
      <advance-accept />
      <!-- 竣工验收 -->
      <completed-accpet />
      <!-- 移交 -->
      <hand-over />
      <!-- 质量保修 -->
      <quality-warranty />
      <!-- 结算 -->
      <close-account />
      <!-- 决算 -->
      <final-account />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import UnitAccpet from './component/unitAccpet.vue'
import AdvanceAccept from './component/advanceAccept.vue'
import CompletedAccpet from './component/completedAccpet.vue'
import HandOver from './component/handOver.vue'
import CloseAccount from './component/closeAccount.vue'
import FinalAccount from './component/finalAccount.vue'
import qualityWarranty from './component/qualityWarranty.vue'
export default {
  name: 'completed',
  components: {
     UnitAccpet,
    AdvanceAccept,
    CompletedAccpet,
    HandOver,
    CloseAccount,
    FinalAccount,
    qualityWarranty,
  },
  data() {
    return {
      allMenuList: [
        {id: 1, name: '单位工程验收'},
        {id: 2, name: '预验收'},
        {id: 3, name: '竣工验收'},
        {id: 4, name: '移 交'},
        {id:7,name:'质量保修'},
        {id: 5, name: '结 算'},
        {id: 6, 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>