<script setup lang="ts">
import DPlayer from "dplayer";
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";

const videoRef = ref();
const videoUrl = ref("");
const highlight = ref([]);
const state = reactive({
  instance: null
});
// const props = defineProps({
//   video: {
//     type: Object,
//     // eslint-disable-next-line vue/require-valid-default-prop
//     default: {
//       url: videoUrl.value
//     }
//   }
// });
const video = ref({
          url: videoUrl.value
        })
onMounted(() => {
  videoUrl.value = sessionStorage.getItem("video_url");
  highlight.value = JSON.parse(sessionStorage.getItem("highlights"));
  const player = {
    container: videoRef.value,
    video: video.value,
    theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
    loop: false, // 是否自动循环
    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
    hotkey: true, // 是否支持热键，调节音量，播放，暂停等
    preload: "auto", // 自动预加载
    volume: 1, // 初始化音量
    autoplay: true,
    highlight: highlight.value
  };
  state.instance = new DPlayer(player);
});
onBeforeUnmount(() => {
  state.instance.destroy();
});
</script>

<template>
  <div ref="videoRef" />
</template>
