<template>
  <div style="background: #ECECEC;height: 100vh;position: fixed;" v-if="aiInfo">
    <img src="/public/static/left1.png" style="height: 100%;position: absolute;top: 65px">
    <img src="/public/static/right6.png" style="height: 100px;position: absolute;bottom: 0px;right: 0px">
    <div style="padding:10px 15px;background-color: white" @click="openUrl()">
      <n-flex align="end" :size="[5,0]">
        <div>
          <img src="/public/static/icon_top.png" style="width: 130px;">
        </div>
        <div style="height: 40px;width: 2px;background: #D9D9D9;"></div>
        <div>
          <span style="font-size: 22px;font-weight: 600">AI</span>
          <span style="font-weight: 600;font-size: 14px;margin-left: 10px">知识库</span>
        </div>
      </n-flex>
    </div>
    <div>
      <div>
        <img src="/public/static/top1.png" style="width: 100%">
      </div>
      <div style="padding: 20px">
        <n-flex :size="[0,0]" align="center" justify="space-between">
          <div style="height: 40px;width: 1px;background-color: #000000;"></div>
          <div style="background: rgba(0,0,0,0.1);width: 90%;padding:10px 15px;font-size: 20px;font-weight: 600">
            {{ aiInfo.zsk_name }}
          </div>
          <div style="height: 40px;width: 1px;background-color: #000000;"></div>
        </n-flex>
        <VueTypewriter
            class="tl"
            ref="typewriter"
            :interval="30"
            cursorStr=""
            @writeIsWrite="handleWriteStart"
        >
          <div id="gdt" class="gdt"
               style="overflow-y: scroll;height:60vh;border: 1px solid #000000;background-color: white;padding: 13px;line-height: 32px;margin-top: 20px">
            <div v-html="aiInfo.zsk_explain"></div>
          </div>
        </VueTypewriter>
      </div>
    </div>
  </div>
</template>
<script setup>
import VueTypewriter from "@/components/Writer.vue";
import {onMounted, ref} from "vue";
import {useRoute} from 'vue-router';
import router from "@/router/routes";
import $ from "jquery";
import axios from "axios";

const route = useRoute();
const position = ref(0);
const aiInfo = ref();
const typewriter = ref(null);
const infoId = ref();
onMounted(() => {
  console.log(route.query.id)
  infoId.value = route.query.id;
  //console.log(info)
  //aiInfo.value = info;
  getInfo();
});
const getInfo = () =>
{
  axios.post("https://democs.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];
  //console.log(ele)
  ele.scrollTop = ele.scrollHeight;
}
const openUrl = () => {
  router.push('/').then(() => {
    window.location.reload();
  });
}
</script>
<style scoped>
.gdt::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

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

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

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