<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-2xl font-semibold">设备列表</h2>
        <div class="flex items-center gap-3">
          <button
            class="px-4 py-2 rounded flex items-center gap-2"
            style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
          >
            <Download :size="16" />
            导出
          </button>
          <button
            class="px-4 py-2 rounded text-white flex items-center gap-2"
            style="background-color: #4a7c59"
            @click="router.push('/registration')"
          >
            <Plus :size="16" />
            登记设备
          </button>
        </div>
      </div>
      <p class="text-sm" style="color: rgba(0, 0, 0, 0.45)">管理所有设备信息</p>
    </div>

    <!-- Filter Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div class="grid grid-cols-5 gap-4">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">设备型号</label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
          >
            <option>全部</option>
            <option>GD30 高密度电法仪</option>
            <option>GT20 瞬变电磁仪</option>
            <option>GM10 大地电磁仪</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">设备状态</label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
          >
            <option>全部</option>
            <option>已激活</option>
            <option>已出厂</option>
            <option>装配中</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">生产日期</label>
          <input
            type="date"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">产品型号</label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
          >
            <option>全部</option>
            <option>GD30-2024</option>
            <option>GT20-2023</option>
            <option>GTXD-2022</option>
          </select>
        </div>
        <div class="flex items-end">
          <button
            class="w-full px-4 py-2 rounded text-white flex items-center justify-center gap-2"
            style="background-color: #4a7c59"
          >
            <Search :size="16" />
            搜索
          </button>
        </div>
      </div>
    </div>

    <!-- Device List -->
    <div class="space-y-4 mb-6">
      <div
        v-for="(device, index) in devices"
        :key="index"
        class="bg-white rounded-lg p-6"
        style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)"
      >
        <div class="flex items-start justify-between mb-4">
          <div class="flex-1 grid grid-cols-5 gap-4">
            <div>
              <div class="text-xs mb-1" style="color: rgba(0, 0, 0, 0.45)">设备SN号</div>
              <div class="font-medium">{{ device.sn }}</div>
            </div>
            <div>
              <div class="text-xs mb-1" style="color: rgba(0, 0, 0, 0.45)">型号</div>
              <div>{{ device.model }}</div>
            </div>
            <div>
              <div class="text-xs mb-1" style="color: rgba(0, 0, 0, 0.45)">状态</div>
              <span
                class="inline-block px-2 py-1 rounded text-xs"
                :style="getStatusStyle(device.status)"
              >
                {{ device.status }}
              </span>
            </div>
            <div>
              <div class="text-xs mb-1" style="color: rgba(0, 0, 0, 0.45)">主机版本</div>
              <div>{{ device.version }}</div>
            </div>
            <div>
              <div class="text-xs mb-1" style="color: rgba(0, 0, 0, 0.45)">生产日期</div>
              <div style="color: rgba(0, 0, 0, 0.65)">{{ device.registrationDate }}</div>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-3 pt-4 border-t" style="border-color: #F0F0F0">
          <button class="text-sm" style="color: #4a7c59" @click="router.push('/devices/' + device.sn)">详情</button>
          <template v-if="device.status === '已激活'">
            <span style="color: #D9D9D9">|</span>
            <button class="text-sm flex items-center gap-1" style="color: #FF4D4F">
              <StopCircle :size="14" />
              下线
            </button>
          </template>
        </div>
      </div>
    </div>

    <!-- Pagination -->
    <div
      class="bg-white p-4 rounded-lg flex items-center justify-between"
      style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)"
    >
      <div class="text-sm" style="color: rgba(0, 0, 0, 0.65)">
        显示 {{ startIndex }}-{{ endIndex }} / 共 {{ totalDevices.toLocaleString() }} 台
      </div>
      <div class="flex items-center gap-2">
        <button
          class="px-3 py-1 rounded border"
          style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.45)"
          disabled
        >
          上一页
        </button>
        <button class="px-3 py-1 rounded" style="background-color: #4a7c59; color: #fff">1</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">2</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">3</button>
        <span style="color: rgba(0, 0, 0, 0.45)">...</span>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">524</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">下一页</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Plus, Upload, Download, Search, StopCircle } from 'lucide-vue-next'

const router = useRouter()

interface Device {
  sn: string
  model: string
  status: '已激活' | '已出厂' | '装配中'
  version: string
  registrationDate: string
}

const currentPage = ref(1)
const pageSize = ref(10)
const totalDevices = 5234

const devices: Device[] = [
  {
    sn: 'GD30-20240308-001',
    model: 'GD30 高密度电法仪',
    status: '已激活',
    version: 'v2.3.5',
    registrationDate: '2024-03-08 14:30',
  },
  {
    sn: 'GT20-20240307-045',
    model: 'GT20 瞬变电磁仪',
    status: '已出厂',
    version: 'v1.8.2',
    registrationDate: '2024-03-07 10:15',
  },
  {
    sn: 'GD30-20240308-002',
    model: 'GD30 高密度电法仪',
    status: '装配中',
    version: 'v2.3.4',
    registrationDate: '2024-03-08 16:20',
  },
]

function getStatusStyle(status: Device['status']) {
  switch (status) {
    case '已激活':
      return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
    case '已出厂':
      return { backgroundColor: '#FFF7E6', color: '#FA8C16', border: '1px solid #FFD591' }
    case '装配中':
      return { backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }
  }
}

const startIndex = computed(() => (currentPage.value - 1) * pageSize.value + 1)
const endIndex = computed(() => Math.min(currentPage.value * pageSize.value, totalDevices))
</script>
