<template>
	<teleport to="body">
		<div class="el-image-viewer__wrapper" :tabindex="-1" ref="imageViewer" style="zIndex: 9999;">
			<div class="el-image-viewer__mask" @click.self="hideOnModal && $emit('close')"></div>
			<span class="el-image-viewer__btn el-image-viewer__close" @click="$emit('close')">
				<el-icon><el-icon-close /></el-icon>
			</span>
			
			<div class="el-image-viewer__canvas">
				<sc-video class="el-image-viewer__img" :src="videoUrl" autoplay></sc-video>
			</div>
		</div>
	</teleport>
</template>

<script>
 	import "element-plus/es/components/image-viewer/style/css"
	import { defineAsyncComponent } from "vue";

	export default {
		emits: ["close"],
		components: {
			scVideo: defineAsyncComponent(() => import("@/components/scVideo")),
		},

		props: {
			hideOnModal: { type: Boolean, default: false }, // 是否支持通过点击遮罩层关闭
			hideOnEscape: { type: Boolean, default: false }, // 是否支持通过按下ESC关闭
			videoUrl: { type: String, default: "" },
		},

		data() {
			return {}
		},

		created() {
			document.addEventListener("keydown", this.keydownHandler);
		},

		beforeUnmount() {
			document.removeEventListener("keydown", this.keydownHandler);
		},

		methods: {
			keydownHandler(e) {
				this.hideOnEscape && e.code == "Escape" && this.$emit("close");
				e.preventDefault();
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-image-viewer__canvas {
  padding: 12%;
}
</style>