<template>
	<div v-show="modalShow" class="general_video">
		<div class="video_box">
			<div class="general_video_btn" @click="clearVideo">
				<i class="fi fi-rr-cross-small"></i>
			</div>
			<video ref="video" controls>
				<source :src="url" type="video/webm">
				Your browser does not support the video tag or the file format of this video.
			</video>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, h, ref ,toRefs,computed,reactive, watch} from "vue";
export default defineComponent({
	props:{
		visible: {
			type: Boolean,
			default: false,
		},
		remove: {
			type: Function, //传入移除节点方法,这里是createApp中的方法
			default: null,
		},
		url: {
			type: String,
			default: "",
		},
	},
	

    setup(props:any,{emit}) {
		const modalShow = ref(false);
		modalShow.value = props.visible;
		let clearVideo = ()=>{
			modalShow.value = false
		}
		let video = ref(null)
		watch(() => modalShow.value,
			(newVal,oldVal)=>{
				!newVal && props.remove()				
			}
		)
        return {
			modalShow,
			clearVideo,
			video,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },

    mounted() {
    },
    methods: {
		
    },
});
</script>

<style lang="less" scoped>
.general_video {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 9999;
	top: 0;
	left: 0;
	.video_box{
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
		height: auto;
		max-height: 80vh;
		position: absolute;
		video{
			width: 100%;
			max-height: 80vh;
			height: 100%;
			object-fit: contain;
		}
		.general_video_btn{
			color: #fff;
			border-radius: 50%;
			background: #000;
			width: 5rem;
			height: 5rem;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			top: 0;
			transform: translate(50%,-50%);
			cursor: pointer;
			z-index: 2;
			i{
				font-size: 4rem;
				display: flex;
			}
		}
	}
}
</style>