<template>
  <div class="video-monitor-item" :class="{ 'is-collapsed': isCollapsed }">
    <div class="video-monitor-item__header" @click="toggleCollapse">
      <span class="video-title">{{ monitor.title }}</span>
      <img
        src="../../assets/images/展开icon.png"
        alt="collapse"
        class="collapse-icon"
        :class="{ 'is-collapsed': isCollapsed }"
      />
    </div>

    <transition name="collapse">
      <div v-show="!isCollapsed" class="video-monitor-item__content">
        <div class="video-placeholder">
          <!-- 视频播放器 -->
          <video :src="monitor.videoSrc" autoplay loop muted playsinline />

          <!-- 如果需要显示当前时间，则取消下面注释 -->
          <!-- <div class="video-time">{{ currentTime }}</div> -->
        </div>
        <!-- 控制条：叠加在视频底部 -->
        <div class="video-controls">
          <div
            v-if="monitor.hasMegaphone"
            class="video-control-item"
            role="button"
            tabindex="0"
            @click="$emit('megaphone', monitor.id)"
            @keydown.enter.prevent="$emit('megaphone', monitor.id)"
            @keydown.space.prevent="$emit('megaphone', monitor.id)"
          >
            <img
              src="../../assets/images/SketchPngf116f6395148799bd03097ba5211a0556d6199219712f4a99a018194f34186a6.png"
              alt="megaphone"
              class="video-control-item__icon"
            />
            <span class="video-control-item__label">喊话</span>
          </div>

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

          <div
            v-if="monitor.hasZoom"
            class="video-control-item"
            role="button"
            tabindex="0"
            @click="$emit('zoom', monitor.id)"
            @keydown.enter.prevent="$emit('zoom', monitor.id)"
            @keydown.space.prevent="$emit('zoom', monitor.id)"
          >
            <img
              src="../../assets/images/SketchPnga801740c6a6435fc300fc58878fc7da23921eae9c45eaff4ad9c40cc80d6706b.png"
              alt="zoom"
              class="video-control-item__icon"
            />
            <span class="video-control-item__label">窗口放大</span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const props = defineProps({
  monitor: {
    type: Object,
    required: true,
  },
});

defineEmits(["megaphone", "audio", "zoom"]);

// 收起/展开状态
const isCollapsed = ref(false);

/**
 * 切换收起/展开状态
 */
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const currentTime = ref("");

const updateTime = () => {
  const now = new Date();
  currentTime.value = now
    .toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      hour12: false,
    })
    .replace(/\//g, "/")
    .replace(",", "");
};

let timer = null;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

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

.video-monitor-item {
  // background: rgba(20, 53, 118, 0.3);
  background: url("../../assets/images/视频面板bg.png") no-repeat center center;
  background-size: 100% 100%;
  padding: 2px;
  // border-radius: vw(8);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;

  // &:hover {
  //   cursor: pointer;
  //   // border: 2px solid rgba(255, 80, 80, 0.8);
  //   animation: glowPulse 1.6s ease-in-out infinite;

  //   box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //     0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //     inset 0 0 35px rgba(255, 30, 30, 0.55),
  //     inset 0 0 55px rgba(255, 0, 0, 0.4);
  // }

  // /* 闪动动画 */
  // @keyframes glowPulse {
  //   0% {
  //     box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //       0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //       inset 0 0 35px rgba(255, 30, 30, 0.55),
  //       inset 0 0 55px rgba(255, 0, 0, 0.4);
  //   }

  //   50% {
  //     box-shadow: 0 0 18px rgba(255, 120, 120, 1),
  //       0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
  //       inset 0 0 25px rgba(255, 80, 80, 1),
  //       inset 0 0 45px rgba(255, 40, 40, 0.7),
  //       inset 0 0 75px rgba(255, 0, 0, 0.5);
  //   }

  //   100% {
  //     box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //       0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //       inset 0 0 35px rgba(255, 30, 30, 0.55),
  //       inset 0 0 55px rgba(255, 0, 0, 0.4);
  //   }
  // }

  // 收起状态：只显示标题栏
  &.is-collapsed {
    background: none;
    padding: 0;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vh(5) vw(16);
    // background: rgba(20, 53, 118, 0.5);
    background: rgba(6, 38, 62, 0.8);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;

    .video-title {
      color: var(--text-white);
      font-size: fs(14);
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 500;
    }

    .collapse-icon {
      width: vw(26);
      height: vw(26);
      cursor: pointer;
      transition: transform 0.3s ease;

      &.is-collapsed {
        // transform: rotate(180deg);
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  // 收起状态下的 header 样式
  &.is-collapsed &__header {
    border-bottom: none;
    border-radius: vw(8);
  }

  &__header {
    cursor: pointer;
    user-select: none;

    &:hover {
      background: rgba(20, 53, 118, 0.7);
    }
  }

  &__content {
    // padding: vw(12);

    .video-placeholder {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: rgba(0, 0, 0, 0.5);
      border-radius: vw(6);
      position: relative;
      overflow: hidden;
      // margin-bottom: vh(12);

      // 视频元素
      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }

      .video-time {
        position: absolute;
        top: -1px;
        left: -3px;
        z-index: 2;
        width: clamp(140px, 10.1vw, 154px);
        height: clamp(18px, vh(18), 18px);
        background: url("../../assets/images/video-time-bg.png") no-repeat
          center center;
        background-size: 100% 100%;
        color: var(--text-white);
        font-size: clamp(10px, fs(12), 12px);
        // font-family: 'PingFangSC-Semibold', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
        // font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 clamp(4px, 1vw, 8px);
        box-sizing: border-box;
      }
    }
    // 控制条：叠加在视频底部
    .video-controls {
      // position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      // height: clamp(40px, 8vh, 60px);
      background: rgba(10, 31, 57, 0.84);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 clamp(10px, 2vw, 20px);
      // gap: clamp(12px, 1.5vw, 20px);
      box-sizing: border-box;

      .video-control-item {
        display: inline-flex;
        flex-direction: row; // 保持左图标右文字布局
        align-items: center;
        justify-content: center;
        padding: clamp(2px, vh(6), 8px) clamp(3px, vw(6), 6px);
        background: transparent;
        // border: 1px solid rgba(135, 206, 250, 0.3);
        // border-radius: vw(4);
        color: var(--text-white);
        font-size: clamp(10px, fs(10), 11px);
        // font-family: SourceHanSansCN-Regular, sans-serif;
        cursor: pointer;
        transition: transform 0.15s ease-out, background 0.2s ease,
          border-color 0.2s ease;
        transform-origin: center;

        &__icon {
          width: clamp(20px, vw(20), 24px);
          // height: clamp(14px, vw(14), 18px);
          height: auto;
          // margin-right: clamp(4px, vw(6), 8px);
          flex-shrink: 0;
          object-fit: contain;
        }

        &__label {
          white-space: nowrap;
          line-height: 1.2;
        }

        &:hover {
          transform: scale(1.05);
          background: rgba(135, 206, 250, 0.1);
          border-color: rgba(135, 206, 250, 0.5);
        }

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

        &:focus-visible {
          outline: 2px solid rgba(135, 206, 250, 0.6);
          outline-offset: 2px;
        }
      }
    }
  }
}

// 折叠动画
.collapse-enter-active,
.collapse-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
  opacity: 0;
}

.collapse-enter-to,
.collapse-leave-from {
  max-height: 500px;
  opacity: 1;
}
</style>
