<script setup lang="ts">
/**
 * 设备详情（二维码扫码入口）
 *
 * 通过扫码获取设备 ID，展示设备信息及养护记录入口。
 */
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const deviceId = computed(() => route.params.id as string | undefined)

interface DeviceDetail {
  id: string
  name: string
  type: string
  model: string
  location: string
  status: 'normal' | 'alarm' | 'offline'
  installDate: string
  lastMaintain: string
  protocol: string
  battery: string
}

const device = ref<DeviceDetail>({
  id: deviceId.value || 'DEV-001',
  name: '流量监测仪 A-01',
  type: '流量监测',
  model: 'FLOW-M200',
  location: '城北区东风路雨水管网检查井 J-12',
  status: 'normal',
  installDate: '2024-06-15',
  lastMaintain: '2025-05-20',
  protocol: 'MQTT',
  battery: '85%',
})

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 goMaintenance() {
  router.push('/maintenanceRecords')
}

function goBack() {
  router.back()
}
</script>

<template>
  <div class="page">
    <!-- NavBar -->
    <van-nav-bar
      title="设备详情"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    />

    <!-- Status Banner -->
    <div class="status-banner">
      <span class="status-dot" :style="{ background: statusCfg[device.status].color }"></span>
      <span
        class="status-text"
        :style="{ color: statusCfg[device.status].color }"
      >
        {{ statusCfg[device.status].label }}
      </span>
      <span class="status-name">{{ device.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">{{ device.id }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备类型</span>
            <span class="info-value">{{ device.type }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备型号</span>
            <span class="info-value">{{ device.model }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">通信协议</span>
            <span class="info-value">{{ device.protocol }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">安装日期</span>
            <span class="info-value">{{ device.installDate }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">电池电量</span>
            <span class="info-value highlight">{{ device.battery }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">安装位置</span>
            <span class="info-value">{{ device.location }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">上次养护</span>
            <span class="info-value">{{ device.lastMaintain }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Button -->
    <div class="action-area">
      <van-button type="primary" block round @click="goMaintenance">
        查看养护记录
      </van-button>
    </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: 8px;
  padding: 16px;
  margin: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

  .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .status-text {
    font-size: 15px;
    font-weight: 600;
  }

  .status-name {
    font-size: 14px;
    color: #646566;
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// ── 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;
  }

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

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

    &.highlight {
      font-weight: 600;
      color: #07C160;
    }
  }
}

// ── Action Button ──
.action-area {
  padding: 20px 28px;

  :deep(.van-button--primary) {
    background: #1E74FF;
    border-color: #1E74FF;
  }
}
</style>
