<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  watch,
  computed,
  onBeforeUnmount,
} from "vue";
import NavBarPage from "../components/NavBarPage.vue";
import randarPage from "./result/randarPage.vue";
import { useRoute } from "vue-router";
import { fetchTaskScore } from "./utils/api";
import { Toast } from "vant";

const route = useRoute();

const score = ref(0);
const data = ref(null);
const scoresList = ref(null);
const defectsList = ref(null);
const taskId = computed(() => route.query.conversationId); // 会话ID "2c64eb8b69be432ca0bb9ae55bc78def"
const randarlist = ref([0, 0, 0, 0]);
const loading = ref(false);


onMounted(() => {
  handleResult();
  window.addEventListener("popstate", function (event) {
    // 执行一些操作，例如关闭当前页面或跳转到其他页面
    window.location.href = "/#/home";
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("popstate", function (event) {
    // 执行一些操作，例如关闭当前页面或跳转到其他页面
    window.location.href = "/#/home";
  });
});
</script>
<template>
  <div class="result" style="overflow: hidden">
    <NavBarPage title="视频演示" type="home" />
    <div style="height: 46px"></div>
    <div class="audio">
      <video autoplay loop playsinline controls id="bg-video">
        <source src="../assets/audio.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</template>

<style scoped lang="less">
html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  /* 禁止页面整体滚动 */
}

#bg-video {
  position: fixed;   /* 固定在屏幕上 */
  top: 0;
  left: 0;
  width: 100vw;      /* 占满视口宽度 */
  height: 100vh;     /* 占满视口高度 */
  // object-fit: cover; /* 保持比例并填充整个屏幕，可能会裁剪 */
  z-index: -1;       /* 放在最底层，避免遮挡内容 */
}

@media (min-width: 1001px) {
  .score {
    height: 13rem;
  }

  .hidden {
    height: 13rem;
    overflow: hidden;
  }
}
</style>
