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

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

// 组件事件
const emit = defineEmits(['close', 'video-played'])

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

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

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

// 阻止 iOS 滚动穿透
const handleTouchMove = (e) => {
  e.preventDefault()
}

// 处理视频播放
const handleVideoPlay = () => {
  emit('video-played')
}
</script>

<template>
  <div v-if="visible" class="video-modal" @touchmove="handleTouchMove">
    <div class="video-modal-content" @click="handleContentClick">
      <video
        :src="videoUrl"
        class="video-player"
        controls
        autoplay
        loop
        @play="handleVideoPlay"
      ></video>
    </div>
    <!-- 关闭按钮（放在视频下方） -->
    <div class="video-close-button" @click="handleClose">
      <img src="/static/images/btn_close.png" alt="关闭" class="close-icon" />
    </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;
  flex-direction: column;
  z-index: 999;
}

.video-modal-content {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  width: 720rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-player {
  width: 720rpx;
  height: 405rpx;
  background-color: #000;
}

.video-close-button {
  margin-top: 30rpx;
  width: 68rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.close-icon {
  width: 68rpx;
  height: 68rpx;
  object-fit: contain;
}
</style>