<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <div class="flex items-center gap-4 mb-2">
        <button
          class="p-2 rounded hover:bg-gray-100 transition-colors"
          style="color: rgba(0, 0, 0, 0.65)"
          @click="router.go(-1)"
        >
          <ArrowLeft :size="20" />
        </button>
        <h2 class="text-2xl font-semibold">GD30-2025-000001</h2>
        <span
          class="px-3 py-1 rounded text-sm"
          style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
        >
          已激活
        </span>
      </div>
    </div>

    <!-- Basic Info Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">基本信息</h3>
      <div class="grid grid-cols-3 gap-x-12 gap-y-6">
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">设备型号</div>
          <div>GD30 高密度电法仪</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">主机SN号</div>
          <div>GD30-2025-000001</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">设备状态</div>
          <span
            class="inline-block px-2 py-1 rounded text-xs"
            style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
          >
            已激活
          </span>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">生产日期</div>
          <div>2025-01-15</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">出厂日期</div>
          <div>2025-02-01</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">激活日期</div>
          <div>2025-02-10</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">装配人员</div>
          <div>张工程师</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">测试人员</div>
          <div>李工程师</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">客户名称</div>
          <div>北京地质研究院</div>
        </div>
      </div>
    </div>

    <!-- Hardware Topology Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">硬件拓扑</h3>
      <div class="flex items-center justify-center gap-6">
        <template v-for="(board, i) in boards" :key="board.name">
          <div class="flex items-center gap-6">
            <div class="text-center">
              <div
                class="w-28 h-28 rounded-lg flex flex-col items-center justify-center mb-3"
                :style="{ backgroundColor: board.bg, border: '2px solid ' + board.color }"
              >
                <div class="text-base font-semibold" :style="{ color: board.color }">{{ board.name }}</div>
                <div class="text-xs mt-2" :style="{ color: board.color }">{{ board.version }}</div>
              </div>
              <div class="text-xs" style="color: rgba(0, 0, 0, 0.45)">{{ board.sn }}</div>
            </div>
            <div v-if="Number(i) < boards.length - 1" style="color: #D9D9D9; font-size: 24px">→</div>
          </div>
        </template>
      </div>
    </div>

    <!-- License Info Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">授权信息</h3>
      <div class="grid grid-cols-3 gap-x-12 gap-y-6">
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权ID</div>
          <div>LIC-2025-0001</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权状态</div>
          <span
            class="inline-block px-2 py-1 rounded text-xs"
            style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F"
          >
            已激活
          </span>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权类型</div>
          <div>正式授权</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">生效日期</div>
          <div>2025-02-10</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">到期日期</div>
          <div>2026-02-10</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">剩余天数</div>
          <div style="color: #52C41A">317天</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权功能模块</div>
          <div>1D(SP/VES/IP) / 2D(SP/ERT/IP) / 3D(SP/ERT/IP)</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">授权文件</div>
          <button class="text-sm" style="color: #1890FF">auth_gd30_v2.3.lic</button>
        </div>
      </div>
    </div>

    <!-- Firmware Info Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">固件信息</h3>
      <div class="grid grid-cols-3 gap-x-12 gap-y-6">
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">当前固件版本</div>
          <div>v2.3.5</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">最后更新时间</div>
          <div>2024-03-01 10:30</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">更新方式</div>
          <div>远程OTA</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置文件版本</div>
          <div>v1.2.0</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置同步时间</div>
          <div>2024-03-01 10:35</div>
        </div>
      </div>
    </div>

    <!-- Maintenance History Card -->
    <div class="bg-white p-6 rounded-lg" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold">维修历史</h3>
        <button class="text-sm" style="color: #1890FF">查看全部</button>
      </div>
      <div class="relative">
        <!-- Timeline line -->
        <div
          class="absolute left-6 top-6 bottom-6 w-0.5"
          style="background-color: #F0F0F0"
        ></div>

        <div class="space-y-6">
          <div v-for="(entry, index) in maintenanceHistory" :key="index" class="flex gap-4">
            <div class="flex flex-col items-center flex-shrink-0">
              <div
                class="w-12 h-12 rounded-full flex items-center justify-center relative z-10"
                style="background-color: #E6F7FF; border: 2px solid #1890FF"
              >
                <Clock :size="20" style="color: #1890FF" />
              </div>
            </div>
            <div class="flex-1 pt-2">
              <div class="flex items-center gap-3 mb-2">
                <span class="font-medium">{{ entry.type }}</span>
                <span class="text-sm" style="color: rgba(0, 0, 0, 0.45)">{{ entry.date }}</span>
                <span class="text-sm" style="color: rgba(0, 0, 0, 0.45)">操作人：{{ entry.operator }}</span>
              </div>
              <div class="text-sm" style="color: rgba(0, 0, 0, 0.65)">
                {{ entry.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ArrowLeft, StopCircle, Edit2, Download, Clock } from 'lucide-vue-next'

const router = useRouter()

const boards = [
  { name: '主板', version: 'MB-V2.3', sn: 'MB20240308001', bg: '#E6F7FF', color: '#1890FF' },
  { name: '采集板', version: 'RX-V1.8', sn: 'RX20240308002', bg: '#F0F5FF', color: '#597EF7' },
  { name: '发射板', version: 'TX-V1.2', sn: 'TX20240308003', bg: '#FFF7E6', color: '#FA8C16' },
  { name: '测控板', version: 'MC-V1.5', sn: 'MC20240308004', bg: '#F6FFED', color: '#52C41A' },
  { name: '升压板', version: 'BO-V1.0', sn: 'BO20240308005', bg: '#FFF0F6', color: '#EB2F96' },
]

const maintenanceHistory = [
  { date: '2024-03-01', type: '固件升级', operator: '王工程师', description: '升级固件至v2.3.5，解决数据采集异常问题' },
  { date: '2024-02-15', type: '主板更换', operator: '李工程师', description: '更换主控板（旧：MB20231215001 → 新：MB20240215001）' },
  { date: '2024-01-20', type: '常规保养', operator: '张工程师', description: '清洁设备，检查线路连接，测试功能正常' },
]
</script>
