<script setup lang="ts">
/**
 * 设备详情页
 *
 * 展示监测设备的详细信息，包含基本参数、运行状态、
 * 最新数据和维护记录。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const detailId = (route.query.id as string) || '1'

/** 模拟设备详情 */
const equipment = ref({
  id: detailId,
  name: '流量监测仪 A-01',
  type: 'flow_meter',
  typeLabel: '流量计',
  model: 'LDG-200S',
  sn: 'SN2024LDG00201',
  status: 'normal',
  location: '城北供水管网1号节点',
  installDate: '2025-01-15',
  manufacturer: '南方测控科技有限公司',
  range: '0-500 m³/h',
  precision: '±0.5%',
  protocol: 'Modbus RTU',
  ipRating: 'IP68',
  lastData: '125.6 m³/h',
  lastUpdateTime: '2025-06-15 08:30:00',
  batteryLevel: 85,
  signalStrength: 92,
  maintenanceRecords: [
    { date: '2025-05-20', type: '定期巡检', result: '正常', operator: '张维护员' },
    { date: '2025-04-15', type: '校准', result: '合格', operator: '李技术员' },
    { date: '2025-03-10', type: '电池更换', result: '已完成', operator: '王工程师' },
  ],
})

const statusMap: Record<string, string> = {
  normal: '正常',
  alarm: '报警',
  offline: '离线',
}

const statusColorMap: Record<string, string> = {
  normal: 'success',
  alarm: 'danger',
  offline: '#999',
}
</script>

<template>
  <div class="equipment-detail-page">
    <van-nav-bar title="设备详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 状态标签 -->
    <div class="status-bar">
      <van-tag :type="statusColorMap[equipment.status] as never" size="large">
        {{ statusMap[equipment.status] }}
      </van-tag>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="设备名称" :value="equipment.name" />
      <van-cell title="设备类型" :value="equipment.typeLabel" />
      <van-cell title="设备型号" :value="equipment.model" />
      <van-cell title="设备编号" :value="equipment.sn" />
      <van-cell title="安装位置" :value="equipment.location" />
      <van-cell title="安装日期" :value="equipment.installDate" />
      <van-cell title="生产厂家" :value="equipment.manufacturer" />
    </van-cell-group>

    <!-- 技术参数 -->
    <van-cell-group title="技术参数" class="info-group">
      <van-cell title="量程范围" :value="equipment.range" />
      <van-cell title="精度等级" :value="equipment.precision" />
      <van-cell title="通信协议" :value="equipment.protocol" />
      <van-cell title="防护等级" :value="equipment.ipRating" />
    </van-cell-group>

    <!-- 运行数据 -->
    <van-cell-group title="运行数据" class="info-group">
      <van-cell title="最新数据" :value="equipment.lastData" />
      <van-cell title="更新时间" :value="equipment.lastUpdateTime" />
      <van-cell title="电池电量" :value="`${equipment.batteryLevel}%`" />
      <van-cell title="信号强度" :value="`${equipment.signalStrength}%`" />
    </van-cell-group>

    <!-- 维护记录 -->
    <van-cell-group title="维护记录" class="info-group">
      <van-cell v-for="(record, idx) in equipment.maintenanceRecords" :key="idx" :title="record.date">
        <template #label>
          <span>{{ record.type }} - {{ record.operator }}</span>
        </template>
        <template #value>
          <van-tag :type="record.result === '正常' || record.result === '合格' || record.result === '已完成' ? 'success' : 'warning'" size="medium">
            {{ record.result }}
          </van-tag>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.equipment-detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 24px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.status-bar {
  padding: 12px 16px;
  background: var(--color-bg-card);
  text-align: center;
}

.info-group {
  margin-top: 8px;
}
</style>
