<template>
  <div class="NavScroll">
        <!-- 导航栏 -->
    <div class="sidebar">
      <a
        :href="'#bid' + 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">
        <!-- 清单限价 -->
      <inventory />
        <!-- 招投标 -->
        <biding />
        <!-- 合同管理 -->
        <contract />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import inventory from './component/inventory.vue'
import Biding from './component/biding.vue'
import Contract from './component/contract.vue'
export default {
  name: 'bidContract',
  components: {
    inventory,
    Biding,
    Contract,
  },
  data() {
    return {
      allMenuList: [
        {id: 1, name: '清单限价'},
        {id: 2, name: '招投标'},
        {id: 3, 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: 100px;
}
</style>