<template>
  <Teleport to="body">
    <Transition name="modal-fade">
      <div v-if="visible" class="video-modal" @click="handleClose">
        <Transition name="modal-scale">
          <DecorativePanel
            v-if="visible"
            custom-class="video-modal__content"
            corner-size="clamp(35px, 3.5vw, 55px)"
            :corner-offset="-20"
            @click.stop
          >
            <!-- 标题栏 -->
            <div class="video-modal__header">
              <div class="video-modal__title">
                <img
                  src="../../assets/images/modal/弹窗title.png"
                  alt="标题图标"
                  class="video-modal__title-icon"
                />
                <span class="video-modal__title-text">{{ monitor.title }}</span>
                <span class="video-modal__title-date">{{ monitor.dateRange }}</span>
              </div>
              <img
                src="../../assets/images/video-modal-close.png"
                alt="关闭"
                class="video-modal__close-btn"
                @click="handleClose"
              />
            </div>

            <!-- 视频区域 -->
            <div class="video-modal__video-wrapper">
              <video
                ref="videoRef"
                class="video-modal__video"
                :src="monitor.videoSrc"
                autoplay
                loop
                muted
                controls
              />

              <!-- 操作台（仅无人机等有方向控制的监控） -->
              <div v-if="monitor.hasDirectionControl" class="video-modal__console">
                <!-- 轮盘图标 -->
                <img
                  src="../../assets/images/video-control-console.png"
                  alt="操作台"
                  class="video-modal__console-bg"
                />

                <!-- 控制按钮容器 -->
                <div class="video-modal__control-bar">

                  <!-- 喊话 -->
                  <div
                    v-if="monitor.hasMegaphone"
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="$emit('megaphone', monitor.id)"
                    @keydown.enter.prevent="$emit('megaphone', monitor.id)"
                  >
                    <img
                      src="../../assets/images/video-control-megaphone.png"
                      alt="喊话"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">喊话</span>
                  </div>

                  <!-- 声音 -->
                  <div
                    v-if="monitor.hasAudio"
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="$emit('audio', monitor.id)"
                    @keydown.enter.prevent="$emit('audio', monitor.id)"
                  >
                    <img
                      src="../../assets/images/video-control-sound.png"
                      alt="声音"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">声音</span>
                  </div>

                  <!-- 视觉左移 -->
                  <div
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="handleMove('left')"
                    @keydown.enter.prevent="handleMove('left')"
                  >
                    <img
                      src="../../assets/images/video-control-left.png"
                      alt="左移"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">视觉左移</span>
                  </div>

                  <!-- 视觉右移 -->
                  <div
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="handleMove('right')"
                    @keydown.enter.prevent="handleMove('right')"
                  >
                    <img
                      src="../../assets/images/video-control-right.png"
                      alt="右移"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">视觉右移</span>
                  </div>

                  <!-- 视觉上移 -->
                  <div
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="handleMove('up')"
                    @keydown.enter.prevent="handleMove('up')"
                  >
                    <img
                      src="../../assets/images/video-control-up.png"
                      alt="上移"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">视觉上移</span>
                  </div>

                  <!-- 视觉下移 -->
                  <div
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="handleMove('down')"
                    @keydown.enter.prevent="handleMove('down')"
                  >
                    <img
                      src="../../assets/images/video-control-down.png"
                      alt="下移"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">视觉下移</span>
                  </div>

                  <!-- 缩小 -->
                  <div
                    class="video-modal__control-item"
                    role="button"
                    tabindex="0"
                    @click="handleClose"
                    @keydown.enter.prevent="handleClose"
                  >
                    <img
                      src="../../assets/images/video-control-shrink.png"
                      alt="缩小"
                      class="video-modal__control-icon"
                    />
                    <span class="video-modal__control-label">缩小</span>
                  </div>
                </div>
              </div>
            </div>
          </DecorativePanel>
        </Transition>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import DecorativePanel from '../shared/DecorativePanel.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  monitor: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'megaphone', 'audio', 'move'])

const videoRef = ref(null)

const handleClose = () => {
  emit('close')
}

const handleMove = (direction) => {
  emit('move', { monitorId: props.monitor.id, direction })
}

// ESC 键关闭
const handleKeydown = (e) => {
  if (e.key === 'Escape' && props.visible) {
    handleClose()
  }
}

// 防止滚动穿透
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      document.body.classList.add('body--no-scroll')
    } else {
      document.body.classList.remove('body--no-scroll')
    }
  }
)

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
  document.body.classList.remove('body--no-scroll')
})
</script>

<style lang="scss">
@use '@/styles/mixins.scss' as *;

// 全局样式：防止滚动穿透
body.body--no-scroll {
  overflow: hidden;
}

// 遮罩淡入动画
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

// 内容缩放动画
.modal-scale-enter-active,
.modal-scale-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-scale-enter-from,
.modal-scale-leave-to {
  transform: scale(0.9);
  opacity: 0;
}

// 弹窗容器
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  box-sizing: border-box;

  // 内容区
  &__content {
    position: relative;
    width: clamp(800px, 90vw, 1400px);
    height: clamp(500px, 80vh, 900px);
    background: rgba(10, 31, 57, 0.95);
    // border-radius: vw(12);
    // border: 2px solid rgba(135, 206, 250, 0.3);
    box-shadow: 0 0 vw(30) rgba(0, 150, 255, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  // 标题栏
  &__header {
    flex-shrink: 0;
    height: clamp(50px, 6vh, 70px);
    // background: url('../../assets/images/video-modal-title-bg.png') no-repeat center center;
    // background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 2vw, 40px);
    position: relative;
  }

  &__title {
    display: flex;
    // flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.3vh, 4px);
  }

  &__title-text {
    font-size: clamp(16px, 1.5vw, 20px);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
  }

  &__title-date {
    font-size: clamp(12px, 1vw, 14px);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: #87ceeb;
    line-height: 1.2;
  }

  &__close-btn {
    width: clamp(24px, 2vw, 32px);
    height: clamp(24px, 2vw, 32px);
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  // 视频区域
  &__video-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: clamp(10px, 1.5vh, 20px);
    overflow: hidden;
    position: relative;
  }

  &__video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: vw(8);
  }

  // 操作台容器
  &__console {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px);
  }

  // 轮盘图标
  &__console-bg {
    width: clamp(120px, 7vw, 140px);
    height: clamp(120px, 7vw, 140px);
    object-fit: contain;
    flex-shrink: 0;
  }

  // 控制按钮容器
  &__control-bar {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
    padding: clamp(8px, 1vh, 12px) clamp(20px, 2.5vw, 40px);
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  &__control-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(6px, 0.8vw, 10px);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: clamp(4px, 0.5vh, 8px);

    &:hover {
      transform: scale(1.15);
      opacity: 0.9;
    }

    &:active {
      transform: scale(0.95);
    }

    &:focus-visible {
      outline: 2px solid rgba(135, 206, 250, 0.8);
      outline-offset: 4px;
      border-radius: clamp(4px, 0.5vw, 8px);
    }
  }

  &__control-icon {
    width: clamp(28px, 3vw, 42px);
    height: clamp(28px, 3vw, 42px);
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  &__control-label {
    font-size: clamp(12px, 1.1vw, 14px);
    font-family: SourceHanSansCN-Regular, sans-serif;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}
</style>
