<template>
  <svg viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-2xl">
    <defs>
      <linearGradient id="cm-frame" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#0E7490" />
        <stop offset="100%" stop-color="#155E75" />
      </linearGradient>
      <linearGradient id="cm-active" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#06B6D4" />
        <stop offset="100%" stop-color="#22D3EE" />
      </linearGradient>
      <clipPath id="cm-screen-clip">
        <rect x="68" y="24" width="504" height="300" rx="4" />
      </clipPath>
    </defs>

    <rect x="44" y="10" width="552" height="322" rx="16" fill="url(#cm-frame)" />
    <rect x="54" y="18" width="532" height="306" rx="8" fill="#0C4A6E" />
    <rect x="68" y="24" width="504" height="296" rx="4" fill="#F8FAFC" />
    <circle cx="320" cy="16" r="3" fill="#155E75" />
    <path d="M24 332 L616 332 L636 358 Q636 372 622 372 L18 372 Q4 372 4 358 Z" fill="url(#cm-frame)" />
    <rect x="270" y="336" width="100" height="6" rx="3" fill="#155E75" />
    <ellipse cx="320" cy="382" rx="84" ry="6" fill="#0C4A6E" opacity="0.25" />

    <g clip-path="url(#cm-screen-clip)">
      <rect x="68" y="24" width="504" height="296" fill="#F1F5F9" />

      <rect x="68" y="24" width="504" height="44" fill="white" />
      <line x1="68" y1="68" x2="572" y2="68" stroke="#E2E8F0" stroke-width="1" />
      <text x="84" y="52" font-size="11" font-weight="bold" fill="#0F172A">三年级（2）班</text>
      <text x="84" y="62" font-size="7" fill="#64748B">课堂管控 · 监控中</text>
      <rect x="468" y="36" width="52" height="20" rx="6" fill="#FEE2E2" />
      <text x="494" y="50" text-anchor="middle" font-size="7" font-weight="600" fill="#DC2626">停止监控</text>
      <rect x="526" y="36" width="38" height="20" rx="6" fill="#E0F2FE" />
      <text x="545" y="50" text-anchor="middle" font-size="7" font-weight="600" fill="#0369A1">刷新</text>

      <rect x="80" y="80" width="480" height="36" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <rect x="92" y="90" width="44" height="16" rx="8" fill="#DCFCE7" />
      <text x="114" y="102" text-anchor="middle" font-size="7" font-weight="600" fill="#16A34A">监控中</text>
      <text x="148" y="94" font-size="7" fill="#64748B">开始</text>
      <text x="148" y="106" font-size="8" font-weight="600" fill="#0F172A">14:32:08</text>
      <text x="220" y="94" font-size="7" fill="#64748B">采集间隔</text>
      <text x="220" y="106" font-size="8" font-weight="600" fill="#0F172A">5000ms</text>
      <text x="300" y="94" font-size="7" fill="#64748B">在线学生</text>
      <text x="300" y="106" font-size="8" font-weight="600" fill="#0891B2">32</text>

      <text x="80" y="136" font-size="9" font-weight="bold" fill="#0F172A">学生监控信息</text>
      <text x="520" y="136" text-anchor="end" font-size="7" fill="#0891B2">5 秒自动刷新</text>

      <g v-for="(card, i) in snapshotCards" :key="i">
        <rect
          :x="card.x"
          :y="148"
          width="112"
          height="128"
          rx="10"
          fill="white"
          stroke="#E2E8F0"
          stroke-width="1"
        />
        <rect :x="card.x + 8" :y="156" width="96" height="68" rx="6" :fill="card.fill" />
        <rect v-if="card.live" :x="card.x + 88" :y="160" width="10" height="10" rx="5" fill="#22C55E" />
        <circle v-if="card.live" :cx="card.x + 93" :cy="165" r="3" fill="white" opacity="0.9" />
        <circle :cx="card.x + 20" :cy="242" r="10" :fill="card.avatar" />
        <text :x="card.x + 20" :y="246" text-anchor="middle" font-size="8" font-weight="bold" fill="white">{{ card.initial }}</text>
        <text :x="card.x + 36" :y="238" font-size="8" font-weight="600" fill="#0F172A">{{ card.name }}</text>
        <text :x="card.x + 36" :y="250" font-size="6" fill="#64748B">延迟 {{ card.delay }}秒</text>
      </g>
    </g>
  </svg>
</template>

<script setup lang="ts">
const snapshotCards = [
  { x: 80, name: '张同学', initial: '张', delay: 2, live: true, fill: '#E0F2FE', avatar: '#0891B2' },
  { x: 204, name: '李同学', initial: '李', delay: 1, live: true, fill: '#DBEAFE', avatar: '#4F46E5' },
  { x: 328, name: '王同学', initial: '王', delay: 4, live: false, fill: '#F1F5F9', avatar: '#64748B' },
  { x: 452, name: '赵同学', initial: '赵', delay: 2, live: true, fill: '#CCFBF1', avatar: '#0D9488' },
]
</script>
