<script setup lang="ts">
import { ref } from "vue";
import { downLoadUrl } from "@/utils/auth";
import { onMounted } from "vue";

defineOptions({
  name: "PeopleVideo"
});

const videoFlag = ref(false);
const videoUrl = ref("");
const patientSilentVideo = ref("");
const status = ref(false);
const videoPlayer = ref();
const changeVideo = url => {
  if (status.value === false) {
    videoUrl.value = `data:video/mp4;base64,${url}`;

    const video = document.createElement("video");
    video.src = `data:video/mp4;base64,${url}`;
    video.controls = false;
    video.autoplay = true;
    video.style.width = "100%";
    video.style.height = "100%";
    video.style.objectFit = "cover";
    video.addEventListener("canplaythrough", () => {
      // 添加到页面的某个元素上
      document.getElementById("video_content").appendChild(video);
      status.value = true;
      videoFlag.value = true;
    });
    video.addEventListener("ended", () => {
      // 视频播放完毕后的操作
      videoFlag.value = false;
      status.value = false;
      video.remove();
    });
  } else {
    setTimeout(() => {
      changeVideo(url);
    }, 1000);
  }
};
defineExpose({
  openVideo(url) {
    if (url) {
      changeVideo(url);
    } else {
      videoFlag.value = false;
    }
  }
});

onMounted(() => {
  const id = sessionStorage.getItem("patientSilentVideo");
  patientSilentVideo.value = downLoadUrl(id);
});
// const handleVideoEnded = () => {
//   // videoFlag.value = false;
// };
</script>

<template>
  <div class="PeopleVideo">
    <!-- <img v-show="!videoFlag" :src="peopleImg" alt="" /> -->

    <div class="video_content" id="video_content">
      <video
        v-show="!videoFlag"
        ref="videoPlayer"
        muted
        loop
        :src="patientSilentVideo"
        autoplay
        :controls="false"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.PeopleVideo {
  height: calc(100vh - 350px);

  img {
    width: 100%;
    object-fit: cover;
    height: 100%;
  }

  .video_content {
    width: 500px;
    height: 100%;
  }

  .video_content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>