<script setup>
import { defineProps, defineEmits } from 'vue'

// 组件属性
const props = defineProps({
  // 视频地址
  videoUrl: {
    type: String,
    default: ''
  },
  // 是否显示
  visible: {
    type: Boolean,
    default: false
  }
})

// 组件事件
const emit = defineEmits(['close'])

// 处理关闭按钮点击
const handleClose = () => {
  emit('close')
}

// 处理弹窗背景点击
const handleModalClick = () => {
  emit('close')
}

// 阻止内容区域冒泡
const handleContentClick = (e) => {
  e.stopPropagation()
}
</script>

<template>
  <div v-if="visible" class="video-modal">
    <div class="video-modal-content" @click="handleContentClick">
      <div class="video-close-button" @click="handleClose">
        <span>×</span>
      </div>
      <video
        :src="videoUrl"
        class="video-player"
        controls
        autoplay
        loop
      ></video>
    </div>
  </div>
</template>

<style scoped>
/* 视频播放器弹窗样式 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.video-modal-content {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  width: 720rpx;
  height: 405rpx;
}

.video-close-button {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.video-close-button span {
  color: white;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 30rpx;
  height: 30rpx;
}

.video-player {
  width: 100%;
  height: 100%;
  background-color: #000;
}
</style>