<template>
  <el-dialog
    v-model="open"
    :title="title"
    width="min(92vw, 720px)"
    class="pc-video-preview-dialog"
    append-to-body
    destroy-on-close
    align-center
    @closed="onDialogClosed"
  >
    <video v-if="src" :key="src" :src="src" class="pc-video-preview-dialog__video" controls playsinline :autoplay="autoplay" />
  </el-dialog>
</template>

<script setup lang="ts">
const open = defineModel<boolean>({ required: true });

withDefaults(
  defineProps<{
    src: string;
    title?: string;
    /** 与旧版各页一致：需要自动播放的页面可传 true */
    autoplay?: boolean;
  }>(),
  {
    title: "查看",
    autoplay: false
  }
);

const emit = defineEmits<{
  closed: [];
}>();

function onDialogClosed() {
  emit("closed");
}
</script>

<style scoped lang="scss">
.pc-video-preview-dialog__video {
  display: block;
  width: 100%;
  max-height: 72vh;
  background: #0a0a0a;
  border-radius: 8px;
}
</style>
