<template>
  <div class="pageTop wow fadeInDown">
    <canvas style="position: absolute;" class="animation_canvas" id="animation_canvas" width="1920" height="82"></canvas>
    <div class="left">
      <div class="tabs">
        <template v-for="(item, index) in routesList" :key="index">
          <router-link v-if="item.meta.type == 'left'" aria-current="page" :to="item.path" class="tab cur"
            @click="clickHandler" :class="{ active: route.path === item.path }">
            <div class="icon_left"></div>
            <span>{{ item.meta.title }}</span>
            <div class="icon_right"></div>
          </router-link>
        </template>
      </div>
    </div>
    <router-link href="#/home" class="title"><span>{{ title }}</span></router-link>
    <div class="right">
      <div class="tabs">
        <template v-for="(item, index) in routesList" :key="index">
          <router-link v-if="item.meta.type == 'right'" aria-current="page" :to="item.path" class="tab cur"
            @click="clickHandler" :class="{ active: route.path === item.path }">
            <div class="icon_left"></div>
            <span>{{ item.meta.title }}</span>
            <div class="icon_right"></div>
          </router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
const title = import.meta.env.VITE_APP_TITLE;
import { onMounted, ref,onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const routesList = router.getRoutes();
const bg_index = ref(0);
onMounted(() => {
  const canvas = document.getElementById('animation_canvas');
  const context = canvas.getContext('2d');
  const images = []; 
  let currentFrame = 0;

  function loadImages() {
    for (let i = 0; i < 75; i++) { 
      const img = new Image();
      img.src = `../../public/pageTop/topbg_${i}.png`;
      images.push(img);
    }
  }
  function drawFrame() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(images[currentFrame], 0, 0, canvas.width, canvas.height);
    currentFrame = (currentFrame + 1) % images.length;
  }

  function animate() {
    drawFrame();
    setTimeout(() => {
      requestAnimationFrame(animate);
    }, 40);
  }
  loadImages();
  images[0].onload = animate;
});
</script>

<style scoped>
/* 在这里添加组件的样式 */
.pageTop {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
  z-index: 1;
  /* background: url('@/assets/pageTop/topbg_0.png') no-repeat center center; */
  background-size: 100% 100%;
}

.pageTop .title {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  width: 38%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
  z-index: 1;
}

.pageTop .left {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start
}

.pageTop .right {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start
}

a {
  text-decoration: none;
  color: #fff;
}

.pageTop .left .tabs,
.pageTop .right .tabs {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  font-size: 16px;
  color: #fff;
}

.pageTop .left .tabs .tab,
.pageTop .right .tabs .tab {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
  z-index: 1;
  background: url('@/assets/pageTop/no.png') no-repeat center center;
  padding-bottom: 3%;

}

.icon_left {
  background: url('@/assets/pageTop/no_left_icon.png') no-repeat center center;
  width: 20px;
  height: 20px;
}

.icon_right {
  background: url('@/assets/pageTop/no_right_icon.png') no-repeat center center;
  width: 20px;
  height: 20px;
}

.active span {
  opacity: 1;
  color: #d6eeff;
  font-weight: 400;
  background: linear-gradient(0deg, #98E05F 0%, #0DE3AC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.active{
  background: url('@/assets/pageTop/yes.png') no-repeat center center !important;
}

.active .icon_left {
  background: url('@/assets/pageTop/icon_left.png') no-repeat center center;
}

.active .icon_right {
  background: url('@/assets/pageTop/icon_right.png') no-repeat center center;
}
</style>