<template>
  <div class="video-monitor-item">
    <div class="video-monitor-item__header">
      <span class="video-title">{{ monitor.title }}</span>
      <img
        src="../../assets/images/展开icon.png"
        alt="collapse"
        class="collapse-icon"
      />
    </div>

    <div class="video-monitor-item__content">
      <div class="video-placeholder">
        <!-- 这里放置实际的视频流组件 -->
        <div class="video-time">{{ currentTime }}</div>
      </div>

      <div class="video-controls">
        <button
          v-if="monitor.hasMegaphone"
          class="control-btn"
          @click="$emit('megaphone', monitor.id)"
        >
          <img src="../../assets/images/SketchPngf116f6395148799bd03097ba5211a0556d6199219712f4a99a018194f34186a6.png" alt="megaphone" />
          <span>喊话</span>
        </button>

        <button
          v-if="monitor.hasAudio"
          class="control-btn"
          @click="$emit('audio', monitor.id)"
        >
          <img src="../../assets/images/SketchPng04633c2ccf22607c20a4803d536908398c2953405e089cd296b106e601f793e0.png" alt="audio" />
          <span>声音</span>
        </button>

        <button
          v-if="monitor.hasZoom"
          class="control-btn"
          @click="$emit('zoom', monitor.id)"
        >
          <img src="../../assets/images/SketchPnga801740c6a6435fc300fc58878fc7da23921eae9c45eaff4ad9c40cc80d6706b.png" alt="zoom" />
          <span>窗口放大</span>
        </button>
      </div>
    </div>
  </div>
</template>

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

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

defineEmits(['megaphone', 'audio', 'zoom'])

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: cover;
  // border-radius: vw(8);
  overflow: hidden;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vh(10) vw(16);
    background: rgba(20, 53, 118, 0.5);
    border-bottom: 1px solid var(--border-color);

    .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;

      // &:hover {
      //   transform: rotate(180deg);
      // }
    }
  }

  &__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);

      // 这里可以添加实际的视频组件
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: vw(48);
        height: vh(48);
        background: url(../../assets/images/SketchPngb3b734375de691a8ba794eee7807988d78f942877ab220ebea0aac3bbddccd8b.png) center/contain no-repeat;
        opacity: 0.3;
      }

      .video-time {
        position: absolute;
        // top: vh(8);
        // left: vw(8);
        padding: vh(4) vw(8);
        background: rgba(0, 0, 0, 0.6);
        border-radius: vw(4);
        color: var(--text-white);
        font-size: fs(12);
        font-family: monospace;
      }
    }

    .video-controls {
      display: flex;
      justify-content: center;
      // gap: vw(16);

      .control-btn {
        display: flex;
        align-items: center;
        gap: vw(6);
        padding: vh(6) vw(12);
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: vw(4);
        color: var(--text-white);
        font-size: fs(12);
        font-family: SourceHanSansCN-Regular, sans-serif;
        cursor: pointer;
        transition: all 0.3s;

        img {
          width: vw(14);
          height: vh(14);
        }

        &:hover {
          background: var(--primary-light);
          border-color: var(--primary-color);
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style>
