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

    <!-- 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="mt-6 pt-4" style="border-top: 1px solid #F0F0F0">
        <div class="text-sm font-medium mb-3">授权功能模块</div>
        <div class="flex flex-wrap gap-2">
          <span v-for="m in authModules" :key="m" class="px-3 py-1 rounded text-xs" style="background-color: #eef5f0; color: #4a7c59; border: 1px solid #a3c4ad">{{ m }}</span>
        </div>
      </div>
      <div class="mt-4 flex items-center gap-4">
        <div class="text-sm" style="color: rgba(0,0,0,0.45)">授权文件：</div>
        <button class="text-sm" style="color: #4a7c59">auth_gd30_v2.3.lic</button>
      </div>
    </div>

    <!-- Assembly Record Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div style="display: flex; justify-content: space-between;">
<h3 class="text-lg font-semibold mb-6">装配记录</h3>
      <button>
        <span style="color: #52C41A;">
          查看
        </span>
      </button>
      </div>
      
      <div class="grid grid-cols-3 gap-x-12 gap-y-4 mb-6">
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配工单</div>
          <div class="text-sm">ASM-2025-000001</div>
        </div>
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配人员</div>
          <div class="text-sm">张工程师</div>
        </div>
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">装配日期</div>
          <div class="text-sm">2025-01-15</div>
        </div>
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">测试人员</div>
          <div class="text-sm">李工程师</div>
        </div>
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">测试结果</div>
          <span class="px-2 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">通过</span>
        </div>
        <div>
          <div class="text-sm mb-1" style="color: rgba(0,0,0,0.45)">Checklist完成</div>
          <div class="text-sm">22/22 项</div>
        </div>
      </div>
      <!-- Checklist摘要 -->
      <div class="p-4 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
        <div class="text-sm font-medium mb-2">装配Checklist摘要</div>
        <div class="grid grid-cols-2 gap-2">
          <div v-for="item in checklistSummary" :key="item.name" class="flex items-center gap-2 text-sm">
            <span style="color: #52C41A">✓</span>
            <span style="color: rgba(0,0,0,0.65)">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Sub-Device List 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="overflow-x-auto">
        <table class="w-full">
          <thead style="background-color: #FAFAFA">
            <tr>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">板卡类型</th>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">SN号</th>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">硬件版本</th>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">固件版本</th>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">校准状态</th>
              <th class="px-4 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="sub in subDevices" :key="sub.sn" class="border-b" style="border-color: #F0F0F0">
              <td class="px-4 py-3 text-sm">{{ sub.type }}</td>
              <td class="px-4 py-3 text-sm" style="color: #4a7c59">{{ sub.sn }}</td>
              <td class="px-4 py-3 text-sm" style="color: rgba(0,0,0,0.65)">{{ sub.hwVersion }}</td>
              <td class="px-4 py-3 text-sm" style="color: rgba(0,0,0,0.65)">{{ sub.fwVersion }}</td>
              <td class="px-4 py-3">
                <span class="px-2 py-0.5 rounded text-xs" :style="sub.calibration === '已校准' ? { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' } : { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }">{{ sub.calibration }}</span>
              </td>
              <td class="px-4 py-3">
                <span class="px-2 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">{{ sub.status }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </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>
        <router-link to="/repair" class="text-sm" style="color: #4a7c59">查看全部</router-link>
      </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: #eef5f0; border: 2px solid #4a7c59"
              >
                <Clock :size="20" style="color: #4a7c59" />
              </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: '#eef5f0', color: '#4a7c59' },
  { 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: '清洁设备，检查线路连接，测试功能正常' },
]

const authModules = ['1D SP', '2D SP', '3D SP', '1D VES', '2D ERT', '3D ERT', '1D IP', '2D IP', '3D IP']

const checklistSummary = [
  { name: '主板SN扫码绑定主机' }, { name: '采集板SN录入' }, { name: '发射板SN录入' },
  { name: '内置升压模块检查' }, { name: 'GPS/北斗检测' }, { name: '电池安装与容量检测' },
  { name: '系统启动正常' }, { name: '采集APP连接' }, { name: 'IP66防护与密封' }, { name: '出厂装箱核对' },
]

const subDevices = [
  { type: '主板', sn: 'MB20240308001', hwVersion: 'A1', fwVersion: 'v2.3.5', calibration: '无需校准', status: '正常' },
  { type: '采集板', sn: 'RX20240308002', hwVersion: 'A1', fwVersion: 'v1.8.2', calibration: '已校准', status: '正常' },
  { type: '发射板', sn: 'TX20240308003', hwVersion: 'A1', fwVersion: 'v1.5.0', calibration: '无需校准', status: '正常' },
  { type: '测控板', sn: 'MC20240308004', hwVersion: 'A1', fwVersion: 'v1.5.1', calibration: '无需校准', status: '正常' },
  { type: '升压板', sn: 'BO20240308005', hwVersion: 'A1', fwVersion: 'v1.0.0', calibration: '无需校准', status: '正常' },
]
</script>
