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

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

// 处理播放按钮点击
const handlePlayClick = () => {
  emit('play')
}
</script>

<template>
  <div class="video-play-button-container" @click="handlePlayClick">
    <!-- 背景层，单独进行呼吸动画 -->
    <div class="video-play-button-bg"></div>
    <!-- 内容层，保持静态 -->
    <div class="video-play-button-content">
      <img src="/static/images/icon_music1.png" alt="播放视频" class="video-icon" />
      <span class="video-text">观看视频</span>
    </div>
  </div>
</template>

<style scoped>
/* 视频播放按钮容器 */
.video-play-button-container {
  position: absolute;
  bottom: 100rpx;
  right: 5rpx;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
}

/* 背景层，单独进行呼吸动画 */
.video-play-button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  animation: breathe 2s infinite ease-in-out;
}

/* 内容层，保持静态 */
.video-play-button-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 鼠标悬停效果 */
.video-play-button-container:hover .video-play-button-bg {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
  animation: none;
}

.video-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}

.video-text {
  font-size: 24rpx;
  color: white;
  text-align: center;
}

/* 呼吸动画 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
</style>