<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 48 48"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <!-- 多波束 -->
    <g v-if="type === 'multibeam'">
      <path d="M24 8L28 16H36L29.5 21.5L31.5 30L24 25.5L16.5 30L18.5 21.5L12 16H20L24 8Z" fill="url(#stat-blue)" opacity="0.25"/>
      <path d="M8 34C12 28 20 26 24 26C28 26 36 28 40 34" stroke="url(#stat-blue)" stroke-width="2.2" stroke-linecap="round"/>
      <path d="M16 34C18 31 22 30 24 30C26 30 30 31 32 34" stroke="url(#stat-blue)" stroke-width="1.8" stroke-linecap="round" opacity="0.7"/>
      <circle cx="24" cy="14" r="2.5" fill="url(#stat-blue)"/>
      <path d="M24 16.5V22" stroke="url(#stat-blue)" stroke-width="2" stroke-linecap="round"/>
    </g>

    <!-- 地震数据 -->
    <g v-else-if="type === 'seismic'">
      <rect x="8" y="10" width="32" height="28" rx="4" fill="url(#stat-orange)" opacity="0.15"/>
      <path d="M10 30L16 22L22 28L28 16L34 24L38 18" stroke="url(#stat-orange)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="16" cy="22" r="2" fill="#e67e22"/>
      <circle cx="28" cy="16" r="2" fill="#e67e22"/>
      <circle cx="34" cy="24" r="2" fill="#e67e22"/>
      <path d="M10 36H38" stroke="url(#stat-orange)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
    </g>

    <!-- 磁力数据 -->
    <g v-else-if="type === 'magnetic'">
      <circle cx="24" cy="24" r="14" stroke="url(#stat-green)" stroke-width="2" opacity="0.35"/>
      <path d="M24 10V14M24 34V38M10 24H14M34 24H38" stroke="url(#stat-green)" stroke-width="2" stroke-linecap="round"/>
      <path d="M18 18L21 21M27 27L30 30M30 18L27 21M21 27L18 30" stroke="url(#stat-green)" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
      <circle cx="24" cy="24" r="5" fill="url(#stat-green)"/>
      <path d="M24 19V29M19 24H29" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
    </g>

    <!-- 侧扫数据 -->
    <g v-else-if="type === 'sidescan'">
      <path d="M6 24H42" stroke="url(#stat-purple)" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
      <path d="M24 8C30 14 34 20 34 24C34 28 30 34 24 40C18 34 14 28 14 24C14 20 18 14 24 8Z" stroke="url(#stat-purple)" stroke-width="2.2" fill="url(#stat-purple)" fill-opacity="0.12"/>
      <path d="M24 14C28 18 30 21 30 24C30 27 28 30 24 34C20 30 18 27 18 24C18 21 20 18 24 14Z" stroke="url(#stat-purple)" stroke-width="1.6" opacity="0.7"/>
      <circle cx="24" cy="24" r="2.5" fill="url(#stat-purple)"/>
    </g>

    <!-- 数据集 -->
    <g v-else-if="type === 'dataset'">
      <rect x="10" y="8" width="22" height="28" rx="3" fill="url(#stat-blue)" opacity="0.15"/>
      <rect x="14" y="12" width="22" height="28" rx="3" fill="#fff" stroke="url(#stat-blue)" stroke-width="2"/>
      <path d="M20 20H30M20 26H28M20 32H26" stroke="url(#stat-blue)" stroke-width="2" stroke-linecap="round"/>
      <circle cx="32" cy="32" r="8" fill="url(#stat-blue)"/>
      <path d="M29 32L31 34L35 30" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <!-- 重力数据 -->
    <g v-else-if="type === 'gravity'">
      <circle cx="24" cy="26" r="12" stroke="url(#stat-teal)" stroke-width="2" fill="url(#stat-teal)" fill-opacity="0.1"/>
      <ellipse cx="24" cy="26" rx="12" ry="4" stroke="url(#stat-teal)" stroke-width="1.5" opacity="0.5"/>
      <path d="M24 14V18" stroke="url(#stat-teal)" stroke-width="2" stroke-linecap="round"/>
      <circle cx="24" cy="12" r="2" fill="url(#stat-teal)"/>
      <path d="M18 22L20 24M28 28L30 30M30 22L28 24M20 28L18 30" stroke="url(#stat-teal)" stroke-width="1.5" stroke-linecap="round" opacity="0.55"/>
    </g>

    <!-- 海洋观测 -->
    <g v-else-if="type === 'ocean'">
      <path d="M6 32C10 28 14 30 18 28C22 26 26 30 30 28C34 26 38 28 42 32" stroke="url(#stat-cyan)" stroke-width="2.2" stroke-linecap="round"/>
      <path d="M6 38C10 34 14 36 18 34C22 32 26 36 30 34C34 32 38 34 42 38" stroke="url(#stat-cyan)" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
      <rect x="20" y="10" width="8" height="18" rx="2" fill="url(#stat-cyan)" opacity="0.2" stroke="url(#stat-cyan)" stroke-width="1.8"/>
      <circle cx="24" cy="14" r="2" fill="url(#stat-cyan)"/>
      <path d="M22 20H26M22 24H26" stroke="url(#stat-cyan)" stroke-width="1.5" stroke-linecap="round"/>
    </g>

    <!-- 数据记录 -->
    <g v-else>
      <rect x="8" y="10" width="32" height="28" rx="4" fill="url(#stat-indigo)" opacity="0.12"/>
      <path d="M14 18H34M14 24H30M14 30H26" stroke="url(#stat-indigo)" stroke-width="2.2" stroke-linecap="round"/>
      <rect x="28" y="8" width="12" height="12" rx="3" fill="url(#stat-indigo)"/>
      <path d="M31 14H37M34 11V17" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>
      <circle cx="18" cy="18" r="1.5" fill="url(#stat-indigo)" opacity="0.5"/>
      <circle cx="18" cy="24" r="1.5" fill="url(#stat-indigo)" opacity="0.5"/>
      <circle cx="18" cy="30" r="1.5" fill="url(#stat-indigo)" opacity="0.5"/>
    </g>

    <defs>
      <linearGradient id="stat-blue" x1="8" y1="8" x2="40" y2="40" gradientUnits="userSpaceOnUse">
        <stop stop-color="#1a8fd4"/>
        <stop offset="1" stop-color="#0056a4"/>
      </linearGradient>
      <linearGradient id="stat-orange" x1="8" y1="10" x2="40" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-color="#f5a623"/>
        <stop offset="1" stop-color="#e67e22"/>
      </linearGradient>
      <linearGradient id="stat-green" x1="10" y1="10" x2="38" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-color="#2ecc71"/>
        <stop offset="1" stop-color="#1a9d5c"/>
      </linearGradient>
      <linearGradient id="stat-purple" x1="14" y1="8" x2="34" y2="40" gradientUnits="userSpaceOnUse">
        <stop stop-color="#9b59b6"/>
        <stop offset="1" stop-color="#7a1ad4"/>
      </linearGradient>
      <linearGradient id="stat-teal" x1="12" y1="12" x2="36" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-color="#1ad4a8"/>
        <stop offset="1" stop-color="#0c8a6a"/>
      </linearGradient>
      <linearGradient id="stat-cyan" x1="6" y1="10" x2="42" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-color="#4dc9f6"/>
        <stop offset="1" stop-color="#1296db"/>
      </linearGradient>
      <linearGradient id="stat-indigo" x1="8" y1="8" x2="40" y2="38" gradientUnits="userSpaceOnUse">
        <stop stop-color="#667eea"/>
        <stop offset="1" stop-color="#4a5fc1"/>
      </linearGradient>
    </defs>
  </svg>
</template>

<script setup>
/**
 * 首页统计卡片精美图标
 */
defineProps({
  type: { type: String, required: true },
  size: { type: [Number, String], default: 40 }
})
</script>
