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

/** 模拟设备详情 */
const device = ref({
  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 statusMap: Record<string, string> = {
  normal: '正常',
  alarm: '告警',
  offline: '离线',
}

const statusColorMap: Record<string, string> = {
  normal: '#07c160',
  alarm: '#ee0a24',
  offline: '#999',
}

function goBack() {
  router.back()
}

function goMaintenance() {
  // 跳转到养护记录
  router.push('/maintenanceRecords')
}
</script>

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

    <!-- 状态卡片 -->
    <div class="status-card">
      <span class="status-dot" :style="{ backgroundColor: statusColorMap[device.status] }" />
      <span class="status-text" :style="{ color: statusColorMap[device.status] }">
        {{ statusMap[device.status] }}
      </span>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" inset>
      <van-cell title="设备编号" :value="device.id" />
      <van-cell title="设备名称" :value="device.name" />
      <van-cell title="设备类型" :value="device.type" />
      <van-cell title="设备型号" :value="device.model" />
      <van-cell title="安装位置" :label="device.location" />
      <van-cell title="安装日期" :value="device.installDate" />
      <van-cell title="通信协议" :value="device.protocol" />
      <van-cell title="电池电量" :value="device.battery" />
    </van-cell-group>

    <!-- 最近养护 -->
    <van-cell-group title="最近养护" inset>
      <van-cell title="上次养护日期" :value="device.lastMaintain" />
    </van-cell-group>

    <!-- 操作按钮 -->
    <div class="action-section">
      <van-button type="primary" block round @click="goMaintenance">
        查看养护记录
      </van-button>
    </div>
  </div>
</template>

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

  :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;
  }

  :deep(.van-cell-group) {
    margin: 12px 8px;
  }

  :deep(.van-cell-group__title) {
    padding: 12px 16px 8px;
  }
}

.status-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 16px;
  padding: 16px;
  background: var(--color-bg-card);
  border-radius: 10px;

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

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

.action-section {
  padding: 20px 16px;
}
</style>
