<template>
  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }" v-show="HeaderNav">
    <div class="box">
      <a class="nav-icon" href="http://101.200.88.219:8081" @click="gotoHomePage">
        <img :src="logoSrc" alt="首页logo">
      </a>
      <div class="nav router-container" :class="routerColor">
        <ul>
          <!-- <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
          <li><router-link to="/ShouFei"  @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
          <li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
          <li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
          <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li>
          <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li>
          <li><router-link to="/HelpCenter" @click="activate" :class="{ active: $route.path === '/HelpCenter' }">帮助中心</router-link></li>
          <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
        
          <li>
            <router-link 
              to="/HomePage" 
              replace 
              :style="getNavStyle('/HomePage')"
              @click="activateHomePage"
            >首页</router-link>
          </li>
          <li v-for="route in otherRoutes" :key="route.path">
            <router-link 
              :to="route.path"
              :style="getNavStyle(route.path)"
              @click="activate"
            >{{ route.name }}</router-link>
          </li>
        </ul>

      </div>
      <div class="phone">
        <div class="phoneBox">
          <div class="leftIcon">
            <img :src="phoneIcon" alt="">
          </div>
          <div class="rightMessage" :class="phoneColor">
            <span>全国服务热线</span>
            <span>18931218884</span>
          </div>
        </div>
      </div>
      <div class="login-register">
        <a id="login" href="http://101.200.88.219:8081/operator/" :class="loginClass">登录</a>

        <a id="register" href="http://101.200.88.219:8081/Register.html">免费注册</a>

      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  data() {
    return {
      otherRoutes: [
        { path: '/ShouFei', name: '收费介绍' },
        { path: '/KeFu', name: '客服中心' },
        { path: '/ZhengShu', name: '证书展示' },
        { path: '/HelpCenter', name: '帮助中心' }
      ],
      logoSrc: '/assets/img/headicon21.png',
      isFixed: false,
      shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
      currentRoute: '/HomePage', // 默认激活首页
      HeaderNav: true,
      phoneIcon: '/assets/img/nav-phone1.png',
    }
  },
  
  methods:{
    getNavStyle(path) {
      // 默认样式（首页且未滚动）
      if (this.shouldApplyWhite) {
        return { color: '#fff' };
      }
      
      // 激活状态样式
      if (this.$route.path === path) {
        return { color: '#48b2e1' }; // 蓝色
      }
      
      // 非激活状态样式
      return { color: '#333' }; // 黑色
    },

    gotoHomePage() {
      this.$router.push('/HomePage');
      // window.location.reload(); // 刷新页面
      
    },
    activateHomePage() {
      this.isFixed = false; // 重置为默认样式
      this.logoSrc = '/assets/img/footerlogo22.png';
      this.phoneIcon = '/assets/img/nav-phone1.png';
    }, 

    activate() {
      this.isFixed = true; // 激活固定样式
      this.logoSrc = '/assets/img/headicon21.png';
      this.phoneIcon = '/assets/img/nav-phone2.png';
    },
    handleScroll() {
      if (this.isHomePage) {
        const wasFixed = this.isFixed;
        this.isFixed = window.scrollY > 0;
        this.logoSrc = this.isFixed ? '/assets/img/headicon21.png' : '/assets/img/footerlogo22.png';
        // 新增图标切换逻辑
        this.phoneIcon = this.isFixed 
          ? '/assets/img/nav-phone2.png' 
          : '/assets/img/nav-phone1.png';

        // 滚动状态变化时强制更新样式
        if (wasFixed !== this.isFixed) {
          this.$forceUpdate();
        }
      }
    },

    
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  

  watch: {
    $route(to, from) {
      if (to.path !== '/HomePage') {
        this.activate(); // 点击非首页路由时激活固定样式
        
      } else {
        this.activateHomePage(); // 点击首页路由时重置为默认样式
        
      }
    },  

  },

  computed: {
    isHomePage() {
      return this.$route.path === '/HomePage';
    },
    shouldApplyWhite() {
      return this.isHomePage && !this.isFixed;
    },
    navClass() {
      return {
        'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
      };
    },
    loginClass() {
      return {
        'border-login': this.isFixed,
        'line-height-login': this.isFixed,
      };
    },
    phoneColor() {
      return {
        'phoneMessageColor': this.isFixed,
      }
    },
    routerColor() {
      return {
        'active-color': this.$route.path === '/HomePage',
      };
    }
  },


}     
</script>

<style scoped>
 img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border: 0px solid transparent !important ;
}
.border-login {
  border: .0094rem solid #2f3390;
}
.line-height-login {
  line-height: .3rem;
}

.activeHomePage {
  color: #333;
  /* color: #FFF; */
}
.active {
  color: #F7931E;
  font-weight: 700;
}
.active1 {
  position: fixed;
  /* top: 0; */
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 1rem;
  margin: 0 auto ;
  background-color: #fff;
  transition: all .5s ease-in-out;
  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
  z-index: 9999999;
  
}
.active2 {
  border: .025rem solid #42210B;
}
.phoneMessageColor {
  color: #42210B !important;
  /* color: #FFF !important; */
}
.header-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 1rem;
  margin: 0 auto ;
  background-color: transparent;
  z-index: 99999; 
}

.fixed-nav {
  position: fixed;
  background-color: #fff;
  transition: all 0 ease-in-out;
  box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
}
.header-nav .box {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  height: 1rem;
  margin: 0 auto;
}

.header-nav .nav-icon {
  width: 1.7875rem;
  height: .575rem;
  margin-left: .625rem;
  margin-top: .2125rem;
}
.header-nav .nav {
  display: flex;
  height: 1rem;
  line-height: 1rem;
  width: 8.4rem;
}
.header-nav .nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.header-nav .nav ul li {
  font-size: .1875rem;
  /* color: #42210B; */
  color: #FFF !important;
  text-align: center;
}
.header-nav .nav ul li a {
  width: 1rem;
}
.header-nav .nav ul  .router-link-active {
  /* color: #42210B!; */
  color: #48b2e1;
}
.header-nav .phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 2.2rem;
  height: 1rem;
}
.header-nav .phone .phoneBox {
  display: flex;
  justify-content: start;
  width: 2.2rem;
  height: 0.6rem;
}
.header-nav .phone .phoneBox .leftIcon {
  width: 0.6rem;
  height: 0.6rem;
}
.header-nav .phone .phoneBox .rightMessage {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #fff;
}
.header-nav .phone .phoneBox .rightMessage span {
  font-size: 0.2rem;
}
.header-nav .login-register {
  display: flex;
  width: 3.5rem;
  height: 1rem;
}
.header-nav #login {
  width: .875rem;
  height: .325rem;
  line-height: .3rem;
  padding: auto;
  text-align: center;
  margin: auto .125rem auto auto ;
  border-radius: .25rem;
  font-size: .175rem;
  color: #363994;
  background-color: rgba(255,255,255,.4);
}
#register {
  width: 1.25rem;
  height: .325rem;
  line-height: .3rem;
  text-align: center;
  margin: .3375rem .375rem;
  border-radius: .25rem;
  font-size: .175rem;
  /* background-color: #42210B; */
  background: linear-gradient(to right,#12a1e6,#31dcf9);
  color: #FFF;
}

#login:hover {
  background-color: #FFF;
  color: #2f3390;
  cursor: pointer;
}
#register:hover {
  background-color: #332817;
}
a:hover {
  color: #333;
  font-weight: 700;
}
</style>