<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'

interface EquipDetail {
  id: string
  name: string
  type: string
  typeLabel: string
  model: string
  sn: string
  status: 'normal' | 'alarm' | 'offline'
  location: string
  installDate: string
  manufacturer: string
  range: string
  precision: string
  protocol: string
  ipRating: string
  lastData: string
  lastUpdateTime: string
  batteryLevel: number
  signalStrength: number
  maintenanceRecords: { date: string; type: string; result: string; operator: string }[]
}

const equipment = ref<EquipDetail>({
  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 statusCfg: Record<string, { label: string; color: string; bg: string }> = {
  normal: { label: '正常', color: '#07C160', bg: '#E8F8EF' },
  alarm: { label: '报警', color: '#EE0A24', bg: '#FDECEC' },
  offline: { label: '离线', color: '#969799', bg: '#F2F3F5' },
}

function isGoodResult(r: string) {
  return r === '正常' || r === '合格' || r === '已完成'
}
</script>

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

    <!-- Status Banner -->
    <div class="status-banner">
      <span
        class="status-badge"
        :style="{ color: statusCfg[equipment.status].color, background: statusCfg[equipment.status].bg }"
      >
        {{ statusCfg[equipment.status].label }}
      </span>
      <span class="status-name">{{ equipment.name }}</span>
    </div>

    <!-- Section: 基本信息 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">基本信息</span>
      </div>
      <div class="card">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">设备名称</span>
            <span class="info-value">{{ equipment.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备类型</span>
            <span class="info-value">{{ equipment.typeLabel }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备型号</span>
            <span class="info-value">{{ equipment.model }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备编号</span>
            <span class="info-value">{{ equipment.sn }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">安装位置</span>
            <span class="info-value">{{ equipment.location }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">安装日期</span>
            <span class="info-value">{{ equipment.installDate }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">生产厂家</span>
            <span class="info-value">{{ equipment.manufacturer }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Section: 技术参数 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">技术参数</span>
      </div>
      <div class="card">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">量程范围</span>
            <span class="info-value">{{ equipment.range }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">精度等级</span>
            <span class="info-value">{{ equipment.precision }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">通信协议</span>
            <span class="info-value">{{ equipment.protocol }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">防护等级</span>
            <span class="info-value">{{ equipment.ipRating }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Section: 运行数据 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">运行数据</span>
      </div>
      <div class="card">
        <div class="info-grid">
          <div class="info-item full-width highlight">
            <span class="info-label">最新数据</span>
            <span class="info-value data-highlight">{{ equipment.lastData }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">更新时间</span>
            <span class="info-value">{{ equipment.lastUpdateTime }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">电池电量</span>
            <span class="info-value">
              <van-progress
                :percentage="equipment.batteryLevel"
                :color="equipment.batteryLevel > 50 ? '#07C160' : '#FF976A'"
                :pivot-text="`${equipment.batteryLevel}%`"
                stroke-width="6"
              />
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">信号强度</span>
            <span class="info-value">
              <van-progress
                :percentage="equipment.signalStrength"
                color="#1E74FF"
                :pivot-text="`${equipment.signalStrength}%`"
                stroke-width="6"
              />
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Section: 维护记录 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">维护记录</span>
      </div>
      <div class="card">
        <div
          v-for="(record, idx) in equipment.maintenanceRecords"
          :key="idx"
          class="record-row"
          :class="{ 'record-last': idx === equipment.maintenanceRecords.length - 1 }"
        >
          <div class="record-left">
            <div class="record-date">{{ record.date }}</div>
            <div class="record-meta">{{ record.type }} · {{ record.operator }}</div>
          </div>
          <span
            class="record-tag"
            :class="{ 'record-good': isGoodResult(record.result) }"
          >
            {{ record.result }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;
}

// ── NavBar ──
:deep(.van-nav-bar) {
  background: #1E74FF;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
}

// ── Status Banner ──
.status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  margin: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

  .status-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
  }

  .status-name {
    font-size: 15px;
    font-weight: 500;
    color: #323233;
  }
}

// ── Section ──
.section {
  margin: 0 12px 10px;

  .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
  }

  .section-accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #323233;
  }
}

// ── Card ──
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

// ── Info Grid ──
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.info-item {
  padding: 10px 0;
  border-bottom: 1px solid #F2F3F5;
  display: flex;
  flex-direction: column;
  gap: 4px;

  &:nth-child(odd) {
    padding-right: 12px;
  }

  &.full-width {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  &.highlight {
    background: #F0F7FF;
    margin: -12px -16px;
    padding: 14px 16px;
    border-radius: 10px 10px 0 0;
  }

  .info-label {
    font-size: 12px;
    color: #969799;
  }

  .info-value {
    font-size: 14px;
    color: #323233;
    word-break: break-all;

    &.data-highlight {
      font-size: 22px;
      font-weight: 700;
      color: #1E74FF;
    }
  }
}

// ── Records ──
.record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F2F3F5;

  &.record-last {
    border-bottom: none;
    padding-bottom: 0;
  }

  .record-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .record-date {
    font-size: 14px;
    color: #323233;
    font-weight: 500;
  }

  .record-meta {
    font-size: 12px;
    color: #969799;
  }

  .record-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #FFF3ED;
    color: #FF976A;

    &.record-good {
      background: #E8F8EF;
      color: #07C160;
    }
  }
}
</style>
