<template>
  <div v-if="aiInfo" style="background-color: #ECECEC;position: fixed;width: 100%;">
    <div
        style="text-align: center;width: 100%;background-color: white;padding: 10px 0px;z-index: 10;position: absolute;">
      <n-flex align="end" justify="center">
        <div>
          <img src="/public/static/icon_top.png" style="width: 150px;">
        </div>
        <div>
          <span style="font-size: 28px;font-weight: bold;margin-left: 10px">AI</span>
          <span style="font-size: 20px;font-weight: bold;margin-left: 10px">知识库</span>
        </div>
      </n-flex>
    </div>
    <div style="height: 100px"></div>
    <n-flex>
      <div style="width: 70px;">
        <n-flex>
          <div class="left1" style=""></div>
          <div class="left2" style="left: 40px;"></div>
        </n-flex>
      </div>
      <div style="padding: 20px 10px;width: 17%">
        <div style="width: 280px">
          <div>
            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
            </div>
            <div class="background1"></div>
          </div>
          <div>
            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
            </div>
            <div class="background2"></div>
          </div>
          <div>
            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
            </div>
            <div class="background3"></div>
          </div>
          <div>
            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
            </div>
            <div class="background4"></div>
          </div>
          <div>
            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
            </div>
            <div class="background5"></div>
          </div>
        </div>
        <div style="width: 100%;height: 3px;background-color: rgba(0,0,0,0.3);margin: 20px 0px"></div>
        <div style="">
          <div class="left3"></div>
        </div>
        <div style="width: 100%;height: 3px;background-color: rgba(0,0,0,0.3);margin: 20px 0px"></div>
        <div>
          <div style="width: 70px;text-align: center;" id="left4"
               :style="{ transform: `translateX(${position}px)` }">
            <img src="/public/static/left4.png" style="width: 20px;">
            <div style="font-size: 14px;color: rgba(0,0,0,0.4);">{{ left4 }}</div>
            <div style="width: 100%;height: 2px;background-color: rgba(0,0,0,0.3);"></div>
          </div>
        </div>
      </div>
      <div style="width: 50%;padding: 20px 0px" class="centerTop">
        <div style="border: 2px solid rgba(0,0,0,0.3);;background: rgba(0,0,0,0.1);padding: 10px 20px">
          <span style="font-size: 35px;font-weight: 600">{{ aiInfo.zsk_name }}</span>
        </div>
        <div style="background: #ffffff;">
          <VueTypewriter
              class="tl"
              ref="typewriter"
              :interval="30"
              cursorStr=""
              @writeIsWrite="handleWriteStart"
          >
            <div class="gdt"
                 style="overflow-y: scroll;height:60dvh;line-height: 32px;border: 2px solid rgba(0,0,0,0.3);;padding: 10px 20px;margin-top: 20px">
              <div v-html="aiInfo.zsk_explain"></div>
            </div>
          </VueTypewriter>
        </div>
      </div>
      <div style="width: 22%">
        <n-flex :size="[0,0]">
          <div style="width: 80%">
            <div style="padding: 20px 0px 10px 10px">
              <img src="/public/static/right1.png" style="width:100%;">
            </div>
            <div style="padding: 10px 0px 10px 10px">
              <img src="/public/static/right2.png" style="width:100%;">
            </div>
            <div style="padding: 10px 0px 10px 10px">
              <n-flex :size="[10,0]">
                <div style="width: 45%">
                  <img src="/public/static/right3.png" style="width:100%;">
                </div>
                <div style="width: 50%;text-align: right">
                  <img src="/public/static/right4.png" style="width:100%;">
                </div>
              </n-flex>
            </div>
          </div>
          <div style="width: 20%;text-align: right">
            <img src="/public/static/right5.png" style="height: 60%">
          </div>
        </n-flex>
      </div>
    </n-flex>
    <div style="width: 100%;position: fixed;text-align: center;bottom: 0;">
      <img src="/public/static/center.png" style="width: 500px;display: block;margin: 0 auto">
    </div>
  </div>
</template>
<script setup>
import VueTypewriter from "@/components/Writer.vue"
import {onMounted, ref} from "vue";
import {useRoute} from 'vue-router';
import axios from "axios";
import $ from "jquery";

const route = useRoute();
const position = ref(0);
const left4 = ref();
const aiInfo = ref();
const infoId = ref();
onMounted(() => {
  console.log()
  infoId.value = route.query.id;
  getInfo();
  startAnimation();
});
const getInfo = () =>
{
  axios.post("https://jinrigushitwo.gushitv.com/api/dzb/zsk/find", {id: infoId.value})
      .then(response => {
        console.log(response)
        aiInfo.value=response.data.data;
      })
      .catch(error => console.error('Error loading the JSON file:', error))
}
const handleWriteStart = () => {
  const ele = document.getElementsByClassName("gdt")[0];
  //const top = document.getElementsByClassName("centerTop");
  //console.log(top[0].clientWidth)
  ele.scrollTop = ele.scrollHeight;
}
const startAnimation = () => {
  let startPos = 80; // 起始位置（对应CSS中的0%）
  let keyFrames = [
    {position: 50},   // 20% 时的位置
    {position: 150},  // 50% 时的位置
    {position: 200},  // 80% 时的位置
    {position: 100},  // 80% 时的位置
    {position: 80}   // 原本100%时的位置，但在循环动画中不会直接用到
  ];
  let duration = 5000; // 动画总持续时间（毫秒）
  let startTime = null; // 动画开始时间
  let elapsedTime = 0; // 动画已持续时间
  let currentKeyFrameIndex = 0; // 当前关键帧索引

  // 根据已过去的时间计算当前位置
  const calculatePosition = (timeElapsed) => {
    const totalKeyFrames = keyFrames.length + 1; // 包括起始位置和结束位置（循环回起始）
    const keyframeInterval = duration / (totalKeyFrames - 1); // 每个关键帧间隔的时间
    let currentInterval = Math.floor(timeElapsed / keyframeInterval); // 当前处于哪个间隔
    let progressInInterval = (timeElapsed % keyframeInterval) / keyframeInterval; // 当前间隔内的进度

    // 防止超出数组界限
    if (currentInterval >= totalKeyFrames - 1) {
      currentInterval = totalKeyFrames - 2;
      progressInInterval = 1;
    }

    // 获取当前和下一个关键帧的位置
    const currentKeyFrame = {position: startPos}; // 起始位置作为第一个关键帧
    if (currentInterval > 0) {
      currentKeyFrame.position = keyFrames[currentInterval - 1].position;
    }
    const nextKeyFrame = keyFrames[currentInterval];

    // 计算当前位置
    const currentPos = currentKeyFrame.position + (nextKeyFrame.position - currentKeyFrame.position) * progressInInterval;
    return currentPos;
  };

  const animate = (time) => {
    if (!startTime) startTime = time;
    elapsedTime = time - startTime;

    // 如果动画时间超过总时长，重置开始时间和已持续时间
    if (elapsedTime >= duration) {
      startTime = time;
      elapsedTime = 0;
      currentKeyFrameIndex = 0; // 可选：重置关键帧索引，但在这个实现中不是必需的
    }

    const currentPos = calculatePosition(elapsedTime);

    // 更新位置（这里假设你有一个方法来更新UI中的位置）
    position.value = currentPos;
    var c = parseInt(currentPos);
    c = c < 100 ? '0' + c : c;
    left4.value = `36114${c}`;
    requestAnimationFrame(animate);
  };

  requestAnimationFrame(animate);
};


</script>
<style>
@keyframes left4-background {
  0% {
    transform: translateX(80px);
  }

  20% {
    transform: translateX(30px);
  }

  50% {
    transform: translateX(150px);
  }

  80% {
    transform: translateX(200px);
  }

  100% {
    transform: translateX(100px);
  }
}

.left4 {
  width: 70px;
  text-align: center;
  animation: left4-background 10s infinite alternate;
}

.background1 {
  display: inline-block;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  animation: widthAnimation1 3s infinite alternate;
}

.background2 {
  display: inline-block;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  animation: widthAnimation2 2s infinite alternate;
}

.background3 {
  display: inline-block;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  animation: widthAnimation3 4s infinite alternate;
}

.background4 {
  display: inline-block;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  animation: widthAnimation4 6s infinite alternate;
}

.background5 {
  display: inline-block;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  animation: widthAnimation5 5s infinite alternate;
}

@keyframes widthAnimation1 {
  from {
    width: 30px;
  }

  to {
    width: 150px;
  }
}

@keyframes widthAnimation2 {
  from {
    width: 10px;
  }

  to {
    width: 130px;
  }
}

@keyframes widthAnimation3 {
  from {
    width: 20px;
  }

  to {
    width: 100px;
  }
}

@keyframes widthAnimation4 {
  from {
    width: 50px;
  }

  to {
    width: 180px;
  }
}

@keyframes widthAnimation5 {
  from {
    width: 80px;
  }

  to {
    width: 230px;
  }
}

@keyframes left3-background {
  0% {
    background-position: 0 50vh;
    /* 背景图片的结束位置 */
  }

  100% {
    background-position: 0 0;
    /* 背景图片的起始位置 */
  }
}

.left3 {
  margin: 0;
  padding: 0;
  height: 50vh;
  overflow-x: hidden;
  background: url('/public/static/left3.png') repeat-y;
  /* repeat-y 纵向重复, fixed 固定背景 */
  animation: left3-background 30s linear infinite;
  /* 10秒内完成一次循环，你可以根据需要调整 */
  /* 确保内容在背景上显示 */
  z-index: 1;
  width: 300px;
}

@keyframes left2-background {
  0% {
    background-position: 0 0;
    /* 背景图片的起始位置 */
  }

  100% {
    background-position: 0 100vh;
    /* 背景图片的结束位置 */
  }
}

.left2 {
  margin: 0;
  padding: 0;
  height: 100%;
  top: 0;
  position: fixed; /* 固定位置 */
  overflow-x: hidden;
  background: url('/public/static/left2.png') repeat;
  /* repeat-y 纵向重复, fixed 固定背景 */
  background-size: contain;
  /* 图片高度适应视口 */
  animation: left2-background 40s linear infinite;
  /* 10秒内完成一次循环，你可以根据需要调整 */
  /* 确保内容在背景上显示 */
  z-index: 1;
  width: 20px;

}

@keyframes left1-background {
  0% {
    background-position: 0 0;
    /* 背景���片的起始位置 */
  }

  100% {
    background-position: 0 100vh;
    /* 背景图片的结束位置 */
  }
}

.left1 {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  position: fixed; /* 固定位置 */
  top: 0;
  background: url('/public/static/left1.png') repeat-y fixed;
  /* repeat-y 纵向重复, fixed 固定背景 */
  background-size: 30px 30px;
  /* 图片高度适应视口 */
  animation: left1-background 20s linear infinite;
  /* 10秒内完成一次循环，你可以根据需要调整 */
  /* 确保内容在背景上显示 */
  z-index: 1;
  width: 40px;
}

.gdt::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

.gdt::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
  display: none;
}

.gdt::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块背景色 */
  border-radius: 0px; /* 滑块圆角 */
}

.gdt::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}
</style>
