<script setup lang="ts">
import { Download, Info } from 'lucide-vue-next'

interface CalibrationRecord {
  boardSn: string
  calibrationDate: string
  calibrator: string
  expiryDate: string
  status: '合格' | '不合格' | '待校准'
}

const calibrationRecords: CalibrationRecord[] = [
  {
    boardSn: 'RX20240308001',
    calibrationDate: '2024-03-01',
    calibrator: '王工程师',
    expiryDate: '2025-03-01',
    status: '合格',
  },
  {
    boardSn: 'RX20240308002',
    calibrationDate: '2024-03-05',
    calibrator: '李工程师',
    expiryDate: '2025-03-05',
    status: '合格',
  },
  {
    boardSn: 'RX20240308003',
    calibrationDate: '2024-03-08',
    calibrator: '张工程师',
    expiryDate: '2025-03-08',
    status: '合格',
  },
]

const getStatusStyle = (status: CalibrationRecord['status']) => {
  switch (status) {
    case '合格':
      return {
        backgroundColor: '#F6FFED',
        color: '#52C41A',
        border: '1px solid #B7EB8F',
      }
    case '不合格':
      return {
        backgroundColor: '#FFF1F0',
        color: '#FF4D4F',
        border: '1px solid #FFCCC7',
      }
    case '待校准':
      return {
        backgroundColor: '#FFFBE6',
        color: '#FAAD14',
        border: '1px solid #FFE58F',
      }
  }
}
</script>

<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>
        </div>
      </div>
      <p class="text-sm" style="color: rgba(0, 0, 0, 0.45)">管理采集板校准数据</p>
    </div>

    <!-- Info Banner -->
    <div
      class="mb-6 p-4 rounded-lg flex items-start gap-3"
      style="background-color: #F9F0FF; border: 1px solid #D3ADF7"
    >
      <Info :size="20" style="color: #722ED1; flex-shrink: 0; margin-top: 2px" />
      <div style="color: #531DAB">
        <div class="font-medium">校准说明</div>
        <div class="text-sm mt-1">
          校准仅针对采集板，其他板卡无需校准。
        </div>
      </div>
    </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-4 gap-4">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">采集板SN号</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            placeholder="输入采集板SN号搜索"
          />
        </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>
          <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 class="flex items-end">
          <button class="w-full px-4 py-2 rounded text-white" style="background-color: #4a7c59">
            查询
          </button>
        </div>
      </div>
    </div>

    <!-- Calibration Records List -->
    <div class="bg-white rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div class="p-6 border-b" style="border-color: #F0F0F0">
        <h3 class="text-lg font-semibold">校准记录</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead style="background-color: #FAFAFA">
            <tr>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">采集板SN号</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">校准日期</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">到期日期</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">校准人员</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">状态</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(record, index) in calibrationRecords"
              :key="index"
              class="border-b"
              style="border-color: #F0F0F0"
            >
              <td class="px-6 py-4">{{ record.boardSn }}</td>
              <td class="px-6 py-4" style="color: rgba(0, 0, 0, 0.65)">{{ record.calibrationDate }}</td>
              <td class="px-6 py-4" style="color: rgba(0, 0, 0, 0.65)">{{ record.expiryDate }}</td>
              <td class="px-6 py-4" style="color: rgba(0, 0, 0, 0.65)">{{ record.calibrator }}</td>
              <td class="px-6 py-4">
                <span class="px-2 py-1 rounded text-xs" :style="getStatusStyle(record.status)">
                  {{ record.status }}
                </span>
              </td>
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <button class="text-sm" style="color: #4a7c59">详情</button>
                  <button class="text-sm" style="color: #4a7c59">校准文件</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </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)">显示 1-10 / 共 1,245 条</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>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">下一页</button>
      </div>
    </div>
  </div>
</template>
