<template>
  <div >
      <div class="headers">
          <div class="headers-left">
            <div class="imgs">
              
            </div>
            <div class="img-right">
              <div class="name-title">微育科技</div>
              <div class="right-name">数智科创 · 通达未来 </div>
            </div>
          </div>
          <div class="headers-right">
              <div class="rights">
                  <div class="rights-names" 
                  v-for="(item,index) in rightDate" 
                  :key="index"
                  :class="{'active':active == index}"
                  @click="btnName(item,index)"
                  >
                  {{ item.name }}
                  <div  :class="{'shu':shu == index}"></div>
                  </div>
                  
              </div>
          </div>
      </div>
  </div>
</template>
<script>
export default{
  data(){
      return{
          shu: localStorage.getItem('headerActiveShu') || 0,  // 读取存储值
           active: localStorage.getItem('headerActiveIndex') || 0, 

          lastActiveKey: 'headerActiveIndex',
          // rightDate: []
      }
  },
  props:{
        rightDate:[]
  },
  created() {
    
},
watch: {
$route(to, from) {
  // 判断是否是详情页返回
  if (from.path.includes('/detail')) {
    this.$nextTick(() => {
      // 延迟执行确保DOM更新
      const matchedIndex = this.rightDate.findIndex(item => 
        item.route === to.path || 
        (item.children && item.children.some(child => child.route === to.path))
      )
      if (matchedIndex !== -1) {
        this.active = matchedIndex
        this.shu = matchedIndex
      }
    })
  } else {
    // 常规路由处理
    this.updateActiveFromRoute()
  }
}
},
watch: {
$route(to) {
  // 如果是从详情页返回，优先从 localStorage 恢复
  if (from?.path.includes('/detail')) {
    const savedIndex = localStorage.getItem(this.lastActiveKey);
    if (savedIndex !== null) {
      this.active = parseInt(savedIndex);
      this.shu = parseInt(savedIndex);
      return;
    }
  }
  
  // 否则正常匹配路由
  const matchedIndex = this.rightDate.findIndex(item => 
    item.route === to.path || 
    (item.children && item.children.some(child => child.route === to.path))
  );
  if (matchedIndex !== -1) {
    this.active = matchedIndex;
    this.shu = matchedIndex;
  }
}
},
  watch: {
    
      // 监听路由变化（如果有路由关联）
      $route() {
          this.updateActiveFromRoute()
      },

      $route(to) {
  // ✅ 当前路由匹配到的选项卡索引
  const matchedIndex = this.rightDate.findIndex(item => 
    item.route === to.path || 
    (item.children && item.children.some(child => child.route === to.path))
  );
     // 如果匹配成功，就更新 `active`
     if (matchedIndex !== -1) {
      console.log('这个状态是多少', this.active)
    this.active = matchedIndex;
    this.shu = matchedIndex;
    localStorage.setItem(this.lastActiveKey, matchedIndex.toString());
  }
},
  },

  methods:{
      btnName(item, index) {
  this.active = index;
  this.shu = index;
  localStorage.setItem('headerActiveIndex', index.toString()); // 存储index
  localStorage.setItem('headerActiveShu', index.toString());   // 存储shu
  this.$emit('menu-click', item);
},
      handleMenuClick(item, index) {
          this.activeIndex = index
          localStorage.setItem(this.lastActiveKey, index)
          this.$emit('menu-click', item)
          
          // 如果菜单项有路由，则跳转
          if (item.route) {
              this.$router.push(item.route)
          }
      },
      
      restoreActiveState() {
          const savedIndex = localStorage.getItem(this.lastActiveKey)
          if (savedIndex !== null) {
              this.activeIndex = parseInt(savedIndex)
          }
          
          // 如果有路由关联，检查当前路由
          this.updateActiveFromRoute()
      },
      
      updateActiveFromRoute() {
          const currentPath = this.$route.path
          // 查找当前路由对应的菜单项
          const matchedIndex = this.rightDate.findIndex(item => 
              item.route === currentPath || 
              (item.children && item.children.some(child => child.route === currentPath))
          )
          
          if (matchedIndex !== -1) {
              this.activeIndex = matchedIndex
              localStorage.setItem(this.lastActiveKey, matchedIndex)
          }
      }

  }
}
</script>
<style  scoped>
.shu{
width: 10px;
  height: 20px;
  background: #5165f7;
  position: relative;
  top: -24px;
  left: 40%;
}
.active{
  color: #5165f7 !important;
}
.rights-names{
  margin-left: 32px;
  cursor: pointer;
}
.rights{
  width: 96%;
  height: 100%;
  margin: 0 auto;
  line-height: 94px;
  display: flex;
  position: relative;
  left: -27px;
}
.name-title{
  position: relative;
  top: -6px;
  font-weight: bold;
}
.right-name{
  font-size: 12px;
}
.img-right{
  font-size: 14px;
  position: relative;
  top: 40px;
  height: 40px;
  margin-left: 12px;
}
.imgs{
  width: 45px;
  height: 46px;
  background: #5165f7;
  border-radius: 6px;
  position: relative;
  top: 26px;
  margin-left: 24px
}
.headers-right{
  flex: 1;
  background: white;

}
.headers-left{
  width: 222px;
  height: 100%;
  display: flex;
  background: white;
}
.headers{
width: 100%;
  height: 90px;
  display: flex
;
  border-bottom: 1px solid #EDEFFE;
}
</style>