<script setup lang="ts">
/**
 * 巡检记录详情页
 *
 * 展示巡检记录的基本信息、发现的问题列表及现场照片。
 * 可通过路由 query.id 获取记录 id。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

const recordId = route.query.id as string

/** 模拟记录详情 */
const record = ref({
  id: recordId || '2',
  taskName: '阀门巡检-高新区',
  inspector: '李工',
  startTime: '2025-06-15 14:00',
  endTime: '2025-06-15 16:00',
  duration: '2小时',
  result: 'abnormal',
  remark: '发现3处阀门漏水问题，已记录并上报。部分阀门存在锈蚀情况，建议尽快安排维修。',
})

/** 模拟问题列表 */
const problemList = ref([
  { id: 1, description: 'DN200闸阀密封圈老化漏水', level: '严重', location: '高新区创新路12号阀井', photos: [] },
  { id: 2, description: 'DN150蝶阀操作手柄锈蚀', level: '一般', location: '高新区创新路28号', photos: [] },
  { id: 3, description: 'DN100排气阀堵塞', level: '轻微', location: '高新区创新路45号', photos: [] },
])

const levelColorMap: Record<string, 'danger' | 'warning' | 'primary'> = {
  '严重': 'danger',
  '一般': 'warning',
  '轻微': 'primary',
}
</script>

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

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="任务名称" :value="record.taskName" />
      <van-cell title="巡检人员" :value="record.inspector" />
      <van-cell title="开始时间" :value="record.startTime" />
      <van-cell title="结束时间" :value="record.endTime" />
      <van-cell title="巡检时长" :value="record.duration" />
      <van-cell title="巡检结果">
        <template #value>
          <van-tag :type="record.result === 'normal' ? 'success' : 'danger'" size="medium">
            {{ record.result === 'normal' ? '正常' : '异常' }}
          </van-tag>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 备注 -->
    <van-cell-group v-if="record.remark" title="备注" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.remark }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 问题列表 -->
    <van-cell-group title="发现问题" class="info-group">
      <van-empty v-if="problemList.length === 0" description="未发现问题" />
      <div v-for="(problem, idx) in problemList" :key="problem.id" class="problem-item">
        <div class="problem-header">
          <span class="problem-index">#{{ idx + 1 }}</span>
          <van-tag :type="levelColorMap[problem.level]" size="medium">
            {{ problem.level }}
          </van-tag>
        </div>
        <p class="problem-desc">{{ problem.description }}</p>
        <p class="problem-location">📍 {{ problem.location }}</p>
      </div>
    </van-cell-group>

    <!-- 现场照片 -->
    <van-cell-group title="现场照片" class="info-group">
      <div class="photo-grid">
        <div class="photo-placeholder" v-for="i in 3" :key="i">
          <span>照片 {{ i }}</span>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.record-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;
  }
}

.info-group {
  margin-top: 8px;
}

.desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-regular);
  padding: 4px 0;
}

.problem-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);

  &:last-child {
    border-bottom: none;
  }
}

.problem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.problem-index {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.problem-desc {
  font-size: 14px;
  color: var(--color-text-regular);
  margin: 4px 0;
  line-height: 1.5;
}

.problem-location {
  font-size: 12px;
  color: var(--color-text-placeholder);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px;
}

.photo-placeholder {
  aspect-ratio: 1;
  background: var(--color-bg-page);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-placeholder);
  border: 1px dashed var(--color-border);
}
</style>
