<template>
 <div class="staffBoxDetailContent" >
    <section>     
        <el-page-header @back="goBack" :content="staffinfo.name"></el-page-header>
    </section>
    <section class="staffListInfo">
       <section class="staffLeft">
           <ul>
               <li v-for="(item,index) in tablist" :key="index" @click="goAnchor(index)" :class="{active:cateIndex==index}">  
                   {{item.name}}
               </li>    
           </ul>
       </section>
       <section class="staffRight" :style="{'height':height}">
        <el-scrollbar ref="scrollbar" style="height:100%" v-if="institutionalCode=='0601'">    
           <!-- 基本信息 -->
           <section class="baseInfo sectionBox">
               <baseInfo></baseInfo>
           </section>
           <!-- 就职信息 -->
           <section class="officeInfo sectionBox">
               <officeInfo></officeInfo>
           </section>          
           <!-- 证件信息 -->
           <section class="certInfo sectionBox">
              <certInfo></certInfo>
           </section>           
           <!-- 就职记录 -->
           <section class="employeeRecordsInfo sectionBox" >
               <employeeRecordsInfo></employeeRecordsInfo>
           </section>                     
         </el-scrollbar>  
         <el-scrollbar ref="scrollbar" style="height:100%" v-else-if="institutionalCode.startsWith('04')||institutionalCode.startsWith('07')">    
           <!-- 基本信息 -->
           <section class="baseInfo sectionBox">
               <baseInfo></baseInfo>
           </section>
           <!-- 就职信息 -->
           <section class="officeInfo sectionBox">
               <officeInfo></officeInfo>
           </section>          
           <!-- 证件信息 -->
           <section class="certInfo sectionBox">
              <certInfo></certInfo>
           </section>           
           <!-- 就职记录 -->
           <section class="employeeRecordsInfo sectionBox" >
               <employeeRecordsInfo></employeeRecordsInfo>
           </section>                     
         </el-scrollbar> 
         <el-scrollbar ref="scrollbar" style="height:100%" v-else-if="institutionalCode.endsWith('07')||institutionalCode.endsWith('08')||institutionalCode.endsWith('09')">    
           <!-- 基本信息 -->
           <section class="baseInfo sectionBox">
               <baseInfo></baseInfo>
           </section>
           <!-- 就职信息 -->
           <section class="officeInfo sectionBox">
               <officeInfo></officeInfo>
           </section>
           <!-- 详细信息 -->
           <section class="detailInfo sectionBox">
               <detailInfo></detailInfo>
           </section>          
           <!-- 证件信息 -->
           <section class="certInfo sectionBox">
              <certInfo></certInfo>
           </section> 
           <!-- 图像材料 -->
           <section class="picInfo sectionBox">
               <picInfo></picInfo>
           </section>                
         </el-scrollbar>
         <el-scrollbar ref="scrollbar" style="height:100%" v-else-if="this.isNoSecurityUser">    
           <!-- 基本信息 -->
           <section class="baseInfo sectionBox">
               <baseInfo></baseInfo>
           </section>
           <!-- 就职信息 -->
           <section class="officeInfo sectionBox">
               <officeInfo></officeInfo>
           </section>
           <!-- 详细信息 -->
           <section class="detailInfo sectionBox">
               <detailInfo></detailInfo>
           </section>          
           <!-- 证件信息 -->
           <section class="certInfo sectionBox">
              <certInfo></certInfo>
           </section>
           <!-- 合同信息 -->
           <section class="contractInfo sectionBox">
               <contractInfo></contractInfo>
           </section>
           <!-- 图像材料 -->
           <section class="picInfo sectionBox">
               <picInfo></picInfo>
           </section>                
         </el-scrollbar> 
         <el-scrollbar ref="scrollbar" style="height:100%" v-else>    
           <!-- 基本信息 -->
           <section class="baseInfo sectionBox">
               <baseInfo></baseInfo>
           </section>
           <!-- 就职信息 -->
           <section class="officeInfo sectionBox">
               <officeInfo></officeInfo>
           </section>
           <!-- 详细信息 -->
           <section class="detailInfo sectionBox">
               <detailInfo></detailInfo>
           </section>
           <!-- 证件信息 -->
           <section class="certInfo sectionBox">
              <certInfo></certInfo>
           </section>
           <!-- 合同信息 -->
           <section class="contractInfo sectionBox" v-if="flag">
               <contractInfo></contractInfo>
           </section>
           <!-- 证书信息 -->
           <section class="certlistInfo sectionBox" v-if="flag">
               <certlistInfo></certlistInfo>
           </section>
           <!-- 保险信息 -->
           <section class="safelistInfo sectionBox" v-if="flag&&flag2">
               <safelistInfo></safelistInfo>
           </section>
           <!-- 就职记录 -->
           <section class="employeeRecordsInfo sectionBox" v-if="flag&&flag2">
               <employeeRecordsInfo></employeeRecordsInfo>
           </section>
           <!-- 心理测评 -->
           <section class="employeeRecordsInfo sectionBox" v-if="flag">
               <mentalTestInfo></mentalTestInfo>
           </section>
           <!-- 图像材料 -->
           <section class="picInfo sectionBox" v-if="flag2">
               <picInfo></picInfo>
           </section>           
         </el-scrollbar>  
       </section>
    </section>
 </div>
</template>
<script>
import baseInfo from './components/baseInfo'//基本信息
import officeInfo from './components/officeInfo'//就职信息
import detailInfo from './components/detailInfo'//详细信息
import certInfo from './components/certInfo'//证件信息
import contractInfo from './components/contractInfo'//合同信息
import certlistInfo from './components/certlistInfo'//证书信息
import safelistInfo from './components/safelistInfo'//保险信息
import picInfo from './components/picInfo'//图像材料
import mentalTestInfo from './components/mentalTestInfo'//心理测评
import employeeRecordsInfo from './components/employeeRecordsInfo'//就职记录
export default {
    props:{
        staffinfo:{
            type:Object,
            default(){
                return{}
            }
        }
    },
    components:{
        baseInfo,
        officeInfo,
        detailInfo,
        certInfo,
        contractInfo,
        certlistInfo,
        safelistInfo,
        picInfo,
        employeeRecordsInfo,
        mentalTestInfo
    },
    computed:{
        isNoSecurityUser() {
            return this.institutionalCode && !(this.institutionalCode.startsWith('01') || this.institutionalCode.startsWith('02'))
        }
    },
    data(){
        return{
           tablist:[],
           cateIndex:0,
           height:'',
           network:localStorage.getItem("__network__")||"false",
           isnotSuperviseTabFlag:$SuperviseStr.isnotSuperviseTab,
           homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
           flag:false,
           flag2:false,
           institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型
        }
    },
    mounted(){ 

      if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'详细信息'},
            {name:'证件信息'},
            {name:'就职记录'},           
            {name:'图像材料'}   
        ]
        this.flag=false
        this.flag2=true

      }
      else if(this.homeTemplateBoradType=='rtpayTemplate'){ //rt环境        
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'详细信息'},
            {name:'证件信息'},
            {name:'合同信息'},
            {name:'证书信息'},               
        ]  
        this.flag=true
        this.flag2=false
      }else if(this.institutionalCode=='0601'){
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'证件信息'},
            {name:'就职记录'},              
        ]  
        this.flag=true
        this.flag2=false
      }else if(this.institutionalCode&&this.institutionalCode.startsWith('04')){
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'证件信息'},
            {name:'就职记录'},              
        ]  
        this.flag=true
        this.flag2=false
      }else if(this.institutionalCode&&this.institutionalCode.startsWith('07')){
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'证件信息'},
            {name:'就职记录'},              
        ]  
        this.flag=true
        this.flag2=false
      }else if((this.institutionalCode&&this.institutionalCode.endsWith('07'))||(this.institutionalCode&&this.institutionalCode.endsWith('08'))||(this.institutionalCode&&this.institutionalCode.endsWith('09'))){
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'详细信息'},
            {name:'证件信息'},
            {name:'图像材料'}
        ]  
        this.flag=true
        this.flag2=false
      }
      else if(this.isNoSecurityUser){
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'详细信息'},
            {name:'证件信息'},
            {name:'合同信息'},
            {name:'图像材料'}
        ]  
        this.flag=true
        this.flag2=false
      }
      else{
        this.tablist=[
            {name:'基本信息'},
            {name:'就职信息'},
            {name:'详细信息'},
            {name:'证件信息'},
            {name:'合同信息'},
            {name:'证书信息'},
            {name:'保险信息'},
            {name:'就职记录'},
            {name:'心理测评'},
            {name:'图像材料'}
        ]  
      } 
      this.height=document.documentElement.clientHeight-90+'px'
      window.onresize=()=>{
          return (()=>{
              this.height=document.documentElement.clientHeight-90+'px'
          })
      }
      this.handleScroll()
    },
    methods:{
        goBack(){
          this.$parent.StaffBoxFlag=true
          this.$emit("refurlistBack", {}); //确定后发送$emit绑定父数据
        },
        goAnchor(index){                        
            document.querySelectorAll(".staffRight section.sectionBox")[index].scrollIntoView(); 
            this.cateIndex=index
        },
        handleScroll() {
            let scrollbarEl = this.$refs.scrollbar.wrap
            scrollbarEl.onscroll = () => {
                let scrollItems = document.querySelectorAll(".staffRight section.sectionBox"); 
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge=scrollbarEl.scrollTop >=scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    if (judge) {
                        this.cateIndex = i;
                        break;
                    }
                }
            }
        },        
        
    }
}
</script>
<style lang="scss">
.staffBoxDetailContent{
  .el-page-header{
      position: fixed;
      top: 10px;
  }  
  .staffListInfo{
      display: flex;
      margin-top:50px;
      .staffLeft{
         display: flex;
         position: fixed;
         top: 50px;
         ul{
             display: flex;flex-direction: column;
            
             li{
                 color: #000;
                 padding: 20px;
                 cursor: pointer;
                 border-right: 1px solid #d8d8d8;
                 &.active{
                     color: #2e8ad7;
                     border-right:1px solid #2e8ad7;
                 }
             }
         }
      }
      .staffRight{
          margin-left:130px;
          width: 100%;  
          overflow: auto;
          overflow-x:hidden;
          .el-scrollbar__wrap{
              overflow: auto;
              overflow-x:hidden;
              .el-scrollbar__view{
                  overflow-x: hidden;
              }
          }
          section{
              margin-bottom: 20px;
          }
      }
  }
}    
</style>