<script setup lang="ts">
/**
 * 养护检查记录详情页
 *
 * 展示检查记录的详细信息，包含基本信息、评分详情、检查内容、照片和结论。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showImagePreview } from 'vant'

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

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

/** 模拟检查记录详情 */
const record = ref({
  id: detailId,
  project: '城北供水管网养护',
  inspector: '张检查员',
  result: 'qualified',
  score: 95,
  date: '2025-06-15',
  time: '14:00 - 16:30',
  address: '城北工业大道1-50号',
  content: '对城北片区供水管网养护工作进行验收检查，检查内容包括管道冲洗效果、阀门润滑情况、井盖完整性等。',
  conclusion: '养护工作总体良好，各项指标达标，同意验收。',
  remark: '建议加强井盖周围杂草清理。',
  createTime: '2025-06-15 17:00:00',
  scoreDetail: [
    { name: '管道冲洗', score: 18, maxScore: 20 },
    { name: '阀门润滑', score: 19, maxScore: 20 },
    { name: '井盖检查', score: 20, maxScore: 20 },
    { name: '防腐处理', score: 19, maxScore: 20 },
    { name: '安全措施', score: 19, maxScore: 20 },
  ],
  photos: [
    { id: 1, url: 'https://via.placeholder.com/400x300/4CAF50/white?text=Check+1', desc: '管道冲洗效果' },
    { id: 2, url: 'https://via.placeholder.com/400x300/2196F3/white?text=Check+2', desc: '阀门润滑情况' },
    { id: 3, url: 'https://via.placeholder.com/400x300/FF9800/white?text=Check+3', desc: '井盖完整性' },
    { id: 4, url: 'https://via.placeholder.com/400x300/9C27B0/white?text=Check+4', desc: '现场安全措施' },
  ],
})

const resultMap: Record<string, string> = {
  qualified: '合格',
  unqualified: '不合格',
}

const resultColorMap: Record<string, 'success' | 'danger'> = {
  qualified: 'success',
  unqualified: 'danger',
}

/** 评分颜色 */
function scoreColor(score: number): string {
  if (score >= 90) return '#4CAF50'
  if (score >= 70) return '#FF9800'
  return '#F44336'
}

/** 单项评分颜色 */
function itemScoreColor(score: number, maxScore: number): string {
  const ratio = score / maxScore
  if (ratio >= 0.9) return '#4CAF50'
  if (ratio >= 0.7) return '#FF9800'
  return '#F44336'
}

/** 预览照片 */
function previewPhoto(index: number) {
  showImagePreview({
    images: record.value.photos.map(p => p.url),
    startPosition: index,
  })
}
</script>

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

    <!-- 结果与评分 -->
    <div class="result-bar">
      <van-tag :type="resultColorMap[record.result]" size="large">
        {{ resultMap[record.result] }}
      </van-tag>
      <div class="total-score" :style="{ color: scoreColor(record.score) }">
        {{ record.score }} 分
      </div>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="检查项目" :value="record.project" />
      <van-cell title="检查员" :value="record.inspector" />
      <van-cell title="检查日期" :value="record.date" />
      <van-cell title="检查时间" :value="record.time" />
      <van-cell title="检查地址" :value="record.address" />
    </van-cell-group>

    <!-- 评分详情 -->
    <van-cell-group title="评分详情" class="info-group">
      <van-cell v-for="item in record.scoreDetail" :key="item.name" :title="item.name">
        <template #value>
          <span :style="{ color: itemScoreColor(item.score, item.maxScore), fontWeight: 'bold' }">
            {{ item.score }} / {{ item.maxScore }}
          </span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 检查内容 -->
    <van-cell-group title="检查内容" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.content }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 现场照片 -->
    <van-cell-group title="现场照片" class="info-group">
      <van-cell>
        <div class="photo-grid">
          <div
            v-for="(photo, index) in record.photos"
            :key="photo.id"
            class="photo-item"
            @click="previewPhoto(index)"
          >
            <van-image
              :src="photo.url"
              width="100%"
              height="100"
              fit="cover"
              radius="6"
            />
            <p class="photo-desc">{{ photo.desc }}</p>
          </div>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 结论与备注 -->
    <van-cell-group title="检查结论" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.conclusion }}</p>
      </van-cell>
    </van-cell-group>

    <van-cell-group 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-cell title="创建时间" :value="record.createTime" />
    </van-cell-group>
  </div>
</template>

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

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

.total-score {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
}

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

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

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

.photo-item {
  cursor: pointer;
}

.photo-desc {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: var(--color-text-placeholder);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
