<script setup lang="ts">
import { NGrid, NGridItem, NInput } from 'naive-ui'
import { ref } from 'vue'

// 模拟数据结构
const hardwareGroups = ref([
  {
    groupId: '01',
    pens: [
      { label: 'T1', sn: '', online: false },
      { label: 'T2', sn: '', online: true },
      { label: 'T3', sn: '', online: true },
      { label: 'T4', sn: '', online: false },
    ],
  },
  {
    groupId: '02',
    pens: [
      { label: 'T1', sn: '', online: true },
      { label: 'T2', sn: '', online: false },
      { label: 'T3', sn: '', online: false },
      { label: 'T4', sn: '', online: true },
    ],
  },
  {
    groupId: '03',
    pens: [
      { label: 'T1', sn: '', online: false },
      { label: 'T2', sn: '', online: false },
      { label: 'T3', sn: '', online: true },
      { label: 'T4', sn: '', online: true },
    ],
  },
])
</script>

<template>
  <div class="py-4">
    <!-- 状态提示栏 -->
    <div class="mb-6 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
      <div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" /> <!-- 图标占位 -->
      <div>
        <div class="text-sm text-indigo-900 font-bold">
          自动发现模式已开启
        </div>
        <div class="mt-1 text-xs text-indigo-400">
          系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
        </div>
      </div>
    </div>

    <!-- 硬件状态卡片 -->
    <NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
      <NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
        <div class="border border-gray-200 rounded-xl p-5">
          <div class="mb-4 text-gray-700 font-bold">
            分组 {{ group.groupId }} 硬件状态
          </div>

          <div class="flex flex-col gap-3">
            <div
              v-for="pen in group.pens"
              :key="pen.label"
              class="flex items-center gap-3 rounded bg-gray-50 p-2"
            >
              <div class="w-6 text-center text-gray-700 font-bold">
                {{ pen.label }}
              </div>
              <div class="flex-1">
                <NInput
                  size="small"
                  placeholder="笔SN编号"
                  :value="pen.sn"
                  readonly
                  class="bg-transparent"
                >
                  <template #prefix>
                    <span class="mr-2 text-xs text-gray-400">笔SN编号 (如: SN88219)</span>
                  </template>
                </NInput>
              </div>
              <!-- 状态点: 绿色在线，灰色离线 -->
              <div
                class="h-2.5 w-2.5 rounded-full"
                :class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
              />
            </div>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>

<style scoped>
/* 针对 Input 进行样式微调以匹配设计稿 */
:deep(.n-input) {
  background-color: transparent;
}
:deep(.n-input .n-input__input-el) {
  text-align: right;
}
</style>
