<script setup lang="ts">
interface TVideo {
  id: any
  url?: string
  videoUrl?: string
  videoName?: string
  playDuration?: string | number
  videoDuration?: string | number
}
interface TVideoData {
  subjectId: string
  resourceType: 0 | 1 | 2 | 3
  origin: 1 | 2
}

// const props = withDefaults(
//     defineProps<{
//         video: TVideo;
//         data: { subjectId: string; resourceType: 0 | 1 | 2 | 3; origin: 1 | 2 };
//     }>(),
//     {
//         data: () => ({ subjectId: '1', resourceType: 0, origin: 1 }),
//     },
// );
// const emit = defineEmits(['update:show']);

// const videoList = ref<TVideo[]>([]);

const playerRef = ref()

const video = ref<TVideo>()
const data = ref<TVideoData>({
  subjectId: '1',
  resourceType: 0,
  origin: 1,
})
async function videoInit(v: TVideo, d: TVideoData) {
  video.value = v
  data.value = d
}

function startPlay() {
  playerRef.value?.play()
}

function play() {
  const player = playerRef.value?.player()
  player?.play()
}

function pause() {
  const player = playerRef.value?.player()
  player?.pause()
}

defineExpose({
  videoInit,
  play,
  pause,
  startPlay,
})
</script>
<template>
  <div class="video_player-box">
    <div class="video_player-box-top"></div>
    <div class="video_player-box-main">
      <VideoPlayer v-if="video?.videoUrl" ref="playerRef" :video="video" :data="data"></VideoPlayer>
    </div>
  </div>
</template>
<style scoped lang="scss">
.video_player-box {
  width: 100%;
  height: 100%;
  @include main_bg;
  &-top {
    position: relative;
    z-index: 1;
    height: 11.33vh;
    display: flex;
    align-items: center;

    .x-icon {
      margin-right: $space-3;
    }
  }
  &-main {
    width: 1792px;
    height: 85.33vh;
    border-radius: 1.67vh;
    border: 0.33vh solid rgba(241, 241, 250, 0.35);
    margin: 0 auto;
    overflow: hidden;
    #x-video {
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
