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

const router = useRouter()
const route = useRoute()
const orderId = route.params.orderId || 'WO-2024-0001'

const regenerateAuth = ref(true)
const pushFirmware = ref(false)

const processRecords = [
  { time: '2024-02-25 14:35:00', person: '李工', action: '接单', detail: '开始处理' },
  { time: '2024-02-25 15:00:00', person: '李工', action: '确认板卡故障，准备更换' },
  { time: '2024-02-26 09:20:00', person: '李工', action: '更换板卡 AC-2024-0001→AC-2024-0003' },
  { time: '2024-02-26 10:00:00', person: '李工', action: '板卡更换完成，设备恢复正常' },
]
</script>

<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <div class="flex items-center gap-4">
        <button @click="router.go(-1)" class="p-2 rounded hover:bg-gray-100 transition-colors" style="color: rgba(0,0,0,0.65)">
          <ArrowLeft :size="20" />
        </button>
        <h2 class="text-2xl font-semibold">维修工单详情</h2>
        <span class="text-base" style="color: rgba(0,0,0,0.45)">{{ orderId }}</span>
      </div>
    </div>

    <!-- 工单信息 -->
    <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-semibold mb-4">工单信息</h3>
      <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
        <div>工单号：{{ orderId }}</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:20:00</div>
        <div>维修人员：李工</div>
        <div>预计修复：2024-02-28</div>
      </div>
    </div>

    <!-- 设备信息 -->
    <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-semibold mb-4">设备信息</h3>
      <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>固件版本：v3.2.0</div>
        <div>硬件版本：A1</div>
        <div>客户：XX地质勘探公司</div>
      </div>
    </div>

    <!-- 故障信息 -->
    <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-semibold mb-4">故障信息</h3>
      <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="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-semibold mb-4">处理记录</h3>
      <div class="space-y-3">
        <div v-for="(record, i) in processRecords" :key="i" class="text-sm" style="color: rgba(0,0,0,0.65)">
          {{ record.time }} {{ record.person }} {{ record.action }}
        </div>
      </div>
      <button class="text-sm mt-3" style="color: #4a7c59">添加记录</button>
    </div>

    <!-- 板卡更换记录 -->
    <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-semibold mb-4">板卡更换记录</h3>
      <div class="space-y-2 text-sm" style="color: rgba(0,0,0,0.65)">
        <div>原板卡：AC-2024-0001 硬件版本: A1 状态: 已换下</div>
        <div>新板卡：AC-2024-0003 硬件版本: A1 状态: 已安装</div>
        <div>更换时间：2024-02-26 09:20:00</div>
        <div>更换人员：李工</div>
      </div>
    </div>

    <!-- 授权处理 -->
    <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-semibold mb-4">授权处理</h3>
      <p class="text-sm mb-4" style="color: rgba(0,0,0,0.65)">板卡更换后，需要重新生成授权文件</p>
      <div class="space-y-3">
        <label class="flex items-center gap-2 cursor-pointer text-sm">
          <input type="checkbox" v-model="regenerateAuth" 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="pushFirmware" class="w-4 h-4" style="accent-color: #4a7c59" />
          推送适配固件
        </label>
      </div>
      <button class="mt-4 px-4 py-2 rounded text-white text-sm" style="background-color: #4a7c59">处理授权</button>
    </div>

    <!-- Action Bar -->
    <div class="flex items-center justify-center gap-4 p-4 bg-white rounded-lg sticky bottom-0" style="box-shadow: 0 -2px 8px rgba(0,0,0,0.05)">
      <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="router.go(-1)">取消</button>
      <button class="px-6 py-2 rounded text-white text-sm" style="background-color: #4a7c59">关闭工单</button>
      <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #FF4D4F; color: #FF4D4F" @click="router.push('/scrap')">申请报废</button>
    </div>
  </div>
</template>
