<script setup lang="ts">
import { Plus, ArrowLeft } from 'lucide-vue-next'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const showDrawer = ref(false)
const showProcessDrawer = ref(false)
const showDetailDrawer = ref(false)
const detailOrderId = ref('')
const detailRegenAuth = ref(true)
const detailPushFw = ref(false)

const openDetail = (id: string) => {
  detailOrderId.value = id
  detailRegenAuth.value = true
  detailPushFw.value = false
  showDetailDrawer.value = true
}
const processOrderId = ref('')
const processAction = ref('')
const processNote = ref('')
const replaceBoardOld = ref('')
const replaceBoardNew = ref('')
const regenAuth = ref(true)
const pushFw = ref(false)
const scrapReason = ref('')

const openProcess = (id: string) => {
  processOrderId.value = id
  processAction.value = ''
  processNote.value = ''
  replaceBoardOld.value = ''
  replaceBoardNew.value = ''
  regenAuth.value = true
  pushFw.value = false
  scrapReason.value = ''
  showProcessDrawer.value = true
}
const deviceSN = ref('GD30-2024-000056')
const faultType = ref('板卡故障')
const faultDesc = ref('')
const faultPhenomenon = ref('')
const priority = ref('低')
const assignee = ref('李工')
const estimatedDate = ref('2024-02-28')
const note = ref('')

interface RepairOrder {
  id: string
  sn: string
  fault: string
  status: '处理中' | '已处理' | '待处理'
  priority: '高' | '中' | '低'
}

const orders: RepairOrder[] = [
  { id: 'WO-2024-0001', sn: 'GD30-xxxx', fault: '板卡故障', status: '处理中', priority: '高' },
  { id: 'WO-2024-0002', sn: 'GD30-xxxx', fault: '固件异常', status: '已处理', priority: '中' },
  { id: 'WO-2024-0003', sn: 'GD30-xxxx', fault: '通信异常', status: '待处理', priority: '低' },
]

const statusStyle = (s: RepairOrder['status']) => {
  if (s === '处理中') return { backgroundColor: '#eef5f0', color: '#4a7c59', border: '1px solid #a3c4ad' }
  if (s === '已处理') return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
  return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.65)', border: '1px solid #D9D9D9' }
}
const statusIcon = (s: RepairOrder['status']) => {
  if (s === '处理中') return '\u{1F527}'
  if (s === '已处理') return '\u2705'
  return '\u23F3'
}
const priorityStyle = (p: RepairOrder['priority']) => {
  if (p === '高') return { backgroundColor: '#FFF1F0', color: '#FF4D4F', border: '1px solid #FFCCC7' }
  if (p === '中') return { backgroundColor: '#FFF7E6', color: '#FA8C16', border: '1px solid #FFD591' }
  return { backgroundColor: '#F0F5FF', color: '#597EF7', border: '1px solid #ADC6FF' }
}
</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 text-white flex items-center gap-2" style="background-color: #4a7c59" @click="showDrawer = true">
            <Plus :size="16" /> 新建工单
          </button>
          <button class="px-4 py-2 rounded flex items-center gap-2" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="router.push('/repair/stats')">
            维修统计
          </button>
        </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)">
      <h3 class="text-base font-medium mb-4">筛选条件</h3>
      <div class="grid grid-cols-6 gap-4 mb-4">
        <div>
          <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">状态</label>
          <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
            <option>全部</option><option>处理中</option><option>已处理</option><option>待处理</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">优先级</label>
          <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
            <option>全部</option><option>高</option><option>中</option><option>低</option>
          </select>
        </div>
        <div class="col-span-2">
          <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">维修人员:</label>
          <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
            <option>全部</option><option>王工程师</option><option>李工程师</option><option>张工程师</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-6 gap-4 items-end">
        <div>
          <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">创建日期:</label>
          <input type="date" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="开始日期" />
        </div>
        <div class="flex items-center justify-center pt-5" style="color: rgba(0,0,0,0.45)">~</div>
        <div>
          <label class="block text-sm mb-1 opacity-0">.</label>
          <input type="date" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="结束日期" />
        </div>
        <div>
          <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">SN:</label>
          <input type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="搜索" />
        </div>
        <div>
          <button class="w-full px-4 py-2 rounded text-white text-sm" style="background-color: #4a7c59">搜索</button>
        </div>
        <div>
          <button class="w-full px-4 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.65)">重置</button>
        </div>
      </div>
    </div>

    <!-- Order 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">
        <span class="text-base font-semibold">维修工单列表</span>
        <span class="text-sm ml-2" style="color: rgba(0,0,0,0.45)">共 156 个工单</span>
      </div>

      <div class="divide-y" style="border-color: #F0F0F0">
        <div v-for="order in orders" :key="order.id" class="px-6 py-5">
          <!-- Order info row -->
          <div class="flex items-center gap-4 mb-3">
            <span class="font-semibold">{{ order.id }}</span>
            <span class="text-sm" style="color: rgba(0,0,0,0.65)">{{ order.sn }}</span>
            <span class="text-sm" style="color: rgba(0,0,0,0.65)">{{ order.fault }}</span>
            <span class="px-2 py-0.5 rounded text-xs inline-flex items-center gap-1" :style="statusStyle(order.status)">
              {{ statusIcon(order.status) }}{{ order.status }}
            </span>
            <span class="px-2 py-0.5 rounded text-xs" :style="priorityStyle(order.priority)">
              {{ order.priority }}
            </span>
          </div>
          <!-- Actions row -->
          <div class="flex items-center gap-1 text-sm">
            <span style="color: rgba(0,0,0,0.45)">操作:</span>
            <button style="color: #4a7c59" class="px-2" @click="openDetail(order.id)">详情</button>
            <template v-if="order.status === '处理中'">
              <button style="color: #4a7c59" class="px-2" @click="openProcess(order.id)">处理</button>
            </template>
            <template v-else-if="order.status === '已处理'">
            </template>
            <template v-else>
              <button style="color: #4a7c59" class="px-2" @click="openProcess(order.id)">处理</button>
            </template>
          </div>
        </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)">显示 1-10 / 共 156 条</div>
      <div class="flex items-center gap-2">
        <button class="px-3 py-1 rounded border text-sm" style="border-color: #D9D9D9; color: rgba(0,0,0,0.45)" disabled>&lt; 上一页</button>
        <button class="px-3 py-1 rounded text-sm" style="background-color: #4a7c59; color: #fff">1</button>
        <button class="px-3 py-1 rounded border text-sm" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">2</button>
        <button class="px-3 py-1 rounded border text-sm" 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 text-sm" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">16</button>
        <button class="px-3 py-1 rounded border text-sm" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">下一页 &gt;</button>
      </div>
    </div>

    <!-- New Repair Order Drawer -->
    <div v-if="showDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDrawer = false">
      <div class="bg-white w-[520px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <!-- Header -->
        <div class="flex items-center gap-3 p-5 border-b" style="border-color: #F0F0F0">
          <button @click="showDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.65)">
            <ArrowLeft :size="18" />
          </button>
          <h3 class="text-lg font-semibold">新建维修工单</h3>
        </div>

        <!-- Body -->
        <div class="flex-1 overflow-y-auto p-6 space-y-6">
          <!-- 设备信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">设备信息</h4>
            <div class="space-y-3">
              <div class="flex items-center gap-4">
                <div class="flex-1">
                  <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">设备SN:</label>
                  <select v-model="deviceSN" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                    <option>GD30-2024-000056</option>
                    <option>GD30-2024-000078</option>
                    <option>GT20-2024-000012</option>
                  </select>
                </div>
                <button class="text-sm mt-5" style="color: #4a7c59">查找设备</button>
              </div>
              <div class="text-sm space-y-1" style="color: rgba(0,0,0,0.65)">
                <div>设备型号：GD30-Supreme</div>
                <div>当前固件：v2.2.0</div>
                <div>硬件版本：A1</div>
                <div>客户：XX地质勘探公司</div>
              </div>
            </div>
          </div>

          <!-- 故障信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">故障信息</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.65)">故障类型:</label>
                <div class="space-y-1.5">
                  <label v-for="ft in ['板卡故障', '固件异常', '通信故障', '其他问题']" :key="ft" class="flex items-center gap-2 cursor-pointer text-sm">
                    <input type="radio" v-model="faultType" :value="ft" style="accent-color: #4a7c59" />
                    <span>{{ ft }}</span>
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">故障描述:</label>
                <textarea v-model="faultDesc" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; min-height: 70px; resize: vertical" placeholder="请输入故障描述..."></textarea>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">故障现象:</label>
                <textarea v-model="faultPhenomenon" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; min-height: 70px; resize: vertical" placeholder="请输入故障现象..."></textarea>
              </div>
            </div>
          </div>

          <!-- 工单信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">工单信息</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.65)">优先级</label>
                <div class="space-y-1.5">
                  <label v-for="p in ['低', '中', '高']" :key="p" class="flex items-center gap-2 cursor-pointer text-sm">
                    <input type="radio" v-model="priority" :value="p" style="accent-color: #4a7c59" />
                    <span :style="{ color: p === '高' ? '#FF4D4F' : p === '中' ? '#FA8C16' : '#597EF7' }">{{ p }}</span>
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">维修人员:</label>
                <select v-model="assignee" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>李工</option><option>王工</option><option>张工</option>
                </select>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">预计修复时间:</label>
                <input type="date" v-model="estimatedDate" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" />
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">备注:</label>
                <textarea v-model="note" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; min-height: 60px; resize: vertical" placeholder="请输入备注信息..."></textarea>
              </div>
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="flex items-center justify-center gap-4 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDrawer = false">取消</button>
          <button class="px-6 py-2 rounded text-white text-sm" style="background-color: #4a7c59" @click="showDrawer = false">创建工单</button>
        </div>
      </div>
    </div>

    <!-- Process Order Drawer -->
    <div v-if="showProcessDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showProcessDrawer = false">
      <div class="bg-white w-[520px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <div class="flex items-center gap-3 p-5 border-b" style="border-color: #F0F0F0">
          <button @click="showProcessDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.65)">
            <ArrowLeft :size="18" />
          </button>
          <h3 class="text-lg font-semibold">处理工单 {{ processOrderId }}</h3>
        </div>

        <div class="flex-1 overflow-y-auto p-6 space-y-6">
          <!-- 处理操作 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">处理操作</h4>
            <div class="space-y-2">
              <label v-for="a in ['更换板卡', '固件修复', '参数重置', '其他处理']" :key="a" class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="radio" v-model="processAction" :value="a" style="accent-color: #4a7c59" />
                <span>{{ a }}</span>
              </label>
            </div>
          </div>

          <!-- 板卡更换（条件显示） -->
          <div v-if="processAction === '更换板卡'" class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">板卡更换</h4>
            <div class="space-y-3">
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">原板卡SN:</label>
                <input v-model="replaceBoardOld" type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 AC-2024-0001" />
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">新板卡SN:</label>
                <input v-model="replaceBoardNew" type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 AC-2024-0003" />
              </div>
            </div>
          </div>

          <!-- 授权处理 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">授权处理</h4>
            <div class="space-y-2">
              <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" v-model="regenAuth" class="w-4 h-4" style="accent-color: #4a7c59" />
                <span>重新生成授权文件</span>
              </label>
              <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" v-model="pushFw" class="w-4 h-4" style="accent-color: #4a7c59" />
                <span>推送适配固件</span>
              </label>
            </div>
          </div>

          <!-- 处理备注 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">处理备注</h4>
            <textarea v-model="processNote" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; min-height: 80px; resize: vertical" placeholder="请输入处理说明..."></textarea>
          </div>

          <!-- 报废处理 -->
          <div class="p-5 rounded-lg" style="background-color: #FFF1F0; border: 1px solid #FFCCC7">
            <h4 class="text-base font-semibold mb-2" style="color: #CF1322">报废处理</h4>
            <p class="text-xs mb-3" style="color: #FF4D4F">如设备无法修复，可申请报废。报废操作不可逆，请谨慎操作。</p>
            <div class="mb-3">
              <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">报废原因:</label>
              <select v-model="scrapReason" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                <option value="">请选择报废原因</option>
                <option>主板损坏无法修复</option>
                <option>多个核心部件损坏</option>
                <option>维修成本超过设备价值</option>
                <option>设备老化严重</option>
              </select>
            </div>
            <button
              class="px-4 py-2 rounded text-sm"
              :style="{ border: '1px solid #FF4D4F', color: scrapReason ? '#FF4D4F' : '#D9D9D9' }"
              :disabled="!scrapReason"
              @click="showProcessDrawer = false; router.push('/scrap')"
            >申请报废</button>
          </div>
        </div>

        <div class="flex items-center justify-center gap-4 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showProcessDrawer = false">取消</button>
          <button class="px-6 py-2 rounded text-white text-sm" style="background-color: #4a7c59" @click="showProcessDrawer = false">提交处理</button>
        </div>
      </div>
    </div>

    <!-- Detail Drawer -->
    <div v-if="showDetailDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDetailDrawer = false">
      <div class="bg-white w-[540px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <div class="flex items-center gap-3 p-5 border-b" style="border-color: #F0F0F0">
          <button @click="showDetailDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.65)">
            <ArrowLeft :size="18" />
          </button>
          <h3 class="text-lg font-semibold">维修工单详情</h3>
          <span class="text-sm" style="color: rgba(0,0,0,0.45)">{{ detailOrderId }}</span>
        </div>

        <div class="flex-1 overflow-y-auto p-6 space-y-5">
          <!-- 工单信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">工单信息</h4>
            <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>工单号：{{ detailOrderId }}</div>
              <div>状态：<span class="px-2 py-0.5 rounded text-xs" style="background-color: #eef5f0; color: #4a7c59; border: 1px solid #a3c4ad">🔧 处理中</span></div>
              <div>优先级：<span style="color: #FF4D4F">高</span></div>
              <div>创建时间：2024-02-25 14:30:00</div>
              <div>维修人员：李工</div>
              <div>预计修复：2024-02-28</div>
            </div>
          </div>

          <!-- 设备信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">设备信息</h4>
            <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>设备SN：GD30-2024-000056</div>
              <div>设备型号：GD30-Supreme</div>
              <div>当前固件：v2.2.0</div>
              <div>硬件版本：A1</div>
              <div>客户：XX地质勘探公司</div>
            </div>
          </div>

          <!-- 故障信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">故障信息</h4>
            <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>故障类型：板卡故障</div>
              <div>故障描述：采集板AC-2024-0001无法正常工作，引起数据采集异常</div>
              <div>故障现象：启动后采集板指示灯不亮，无法获取测量数据</div>
            </div>
          </div>

          <!-- 处理记录 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">处理记录</h4>
            <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>2024-02-25 14:35:00 李工 接单，初步诊断</div>
              <div>2024-02-25 15:00:00 李工 确认板卡故障，准备更换</div>
              <div>2024-02-26 09:30:00 李工 更换板卡 AC-2024-0001→AC-2024-0003</div>
              <div>2024-02-26 10:00:00 李工 板卡更换完成，设备恢复正常</div>
            </div>
            <button class="text-sm mt-2" style="color: #4a7c59">添加记录</button>
          </div>

          <!-- 板卡更换记录 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">板卡更换记录</h4>
            <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>原板卡：AC-2024-0001 硬件版本: A1 状态: <span style="color: #FA8C16">已换下</span></div>
              <div>新板卡：AC-2024-0003 硬件版本: A1 状态: <span class="px-1.5 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">✅ 正常</span></div>
              <div>更换时间：2024-02-26 09:30:00</div>
              <div>更换人员：李工</div>
            </div>
          </div>

          <!-- 授权处理 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">授权处理</h4>
            <p class="text-sm mb-3" style="color: rgba(0,0,0,0.65)">板卡更换后，需要重新生成授权文件</p>
            <div class="space-y-2">
              <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" v-model="detailRegenAuth" class="w-4 h-4" style="accent-color: #4a7c59" />
                重新生成授权文件
              </label>
              <label class="flex items-center gap-2 cursor-pointer text-sm" style="color: rgba(0,0,0,0.65)">
                <input type="checkbox" v-model="detailPushFw" class="w-4 h-4" style="accent-color: #4a7c59" />
                推送适配固件
              </label>
            </div>
            <button class="mt-3 px-4 py-2 rounded text-white text-sm" style="background-color: #4a7c59">处理授权</button>
          </div>
        </div>

        <div class="flex items-center justify-center gap-4 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDetailDrawer = false">取消</button>
          <button class="px-6 py-2 rounded text-white text-sm" style="background-color: #4a7c59" @click="showDetailDrawer = false">关闭工单</button>
        </div>
      </div>
    </div>
  </div>
</template>
