<script setup lang="ts">
/**
 * 养护检查记录详情页
 *
 * 展示检查记录的详细信息，包含基本信息、评分详情、检查内容、照片和结论。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
 */
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' }

/** 评分颜色 class */
function scoreClass(score: number): string {
  if (score >= 90) return 'score-green'
  if (score >= 70) return 'score-orange'
  return 'score-red'
}

/** 单项评分颜色 class */
function itemScoreClass(score: number, maxScore: number): string {
  const ratio = score / maxScore
  if (ratio >= 0.9) return 'score-green'
  if (ratio >= 0.7) return 'score-orange'
  return 'score-red'
}

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

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

    <!-- Result & Score Bar -->
    <div class="result-bar">
      <van-tag :type="resultColorMap[record.result]" size="large" round>
        {{ resultMap[record.result] }}
      </van-tag>
      <div class="score-display">
        <span class="score-number" :class="scoreClass(record.score)">{{ record.score }}</span>
        <span class="score-unit">分</span>
      </div>
    </div>

    <!-- 基本信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">基本信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">检查项目</span>
          <span class="info-row__value">{{ record.project }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">检查员</span>
          <span class="info-row__value">{{ record.inspector }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">检查日期</span>
          <span class="info-row__value">{{ record.date }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">检查时间</span>
          <span class="info-row__value">{{ record.time }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">检查地址</span>
          <span class="info-row__value">{{ record.address }}</span>
        </div>
      </div>
    </div>

    <!-- 评分详情 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">评分详情</h5>
      </div>
      <div class="card-body">
        <div v-for="item in record.scoreDetail" :key="item.name" class="score-row">
          <span class="score-row__name">{{ item.name }}</span>
          <div class="score-row__bar-wrap">
            <div
              class="score-row__bar"
              :class="itemScoreClass(item.score, item.maxScore)"
              :style="{ width: (item.score / item.maxScore * 100) + '%' }"
            ></div>
          </div>
          <span class="score-row__text" :class="itemScoreClass(item.score, item.maxScore)">
            {{ item.score }} / {{ item.maxScore }}
          </span>
        </div>
      </div>
    </div>

    <!-- 检查内容 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">检查内容</h5>
      </div>
      <div class="card-body">
        <p class="desc-text">{{ record.content }}</p>
      </div>
    </div>

    <!-- 现场照片 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">现场照片</h5>
      </div>
      <div class="card-body">
        <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"
              fit="cover"
              radius="6"
              class="photo-img"
            />
            <p class="photo-desc">{{ photo.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 检查结论 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">检查结论</h5>
      </div>
      <div class="card-body">
        <p class="desc-text">{{ record.conclusion }}</p>
      </div>
    </div>

    <!-- 备注 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">备注</h5>
      </div>
      <div class="card-body">
        <p class="desc-text">{{ record.remark }}</p>
      </div>
    </div>

    <!-- 时间信息 Card -->
    <div class="info-card">
      <div class="card-header">
        <span class="card-header__accent"></span>
        <h5 class="card-header__title">时间信息</h5>
      </div>
      <div class="card-body">
        <div class="info-row">
          <span class="info-row__label">创建时间</span>
          <span class="info-row__value">{{ record.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

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

  :deep(.van-nav-bar) { background: #1E74FF; }
  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
  :deep(.van-nav-bar__text),
  :deep(.van-nav-bar__arrow) { color: #fff; }
  :deep(.van-nav-bar .van-icon) { color: #fff; }
}

// Result Bar
.result-bar {
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.score-display { margin-top: 8px; }
.score-number {
  font-size: 32px;
  font-weight: 700;
  &.score-green { color: #4CAF50; }
  &.score-orange { color: #FF9800; }
  &.score-red { color: #F44336; }
}
.score-unit {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-left: 2px;
}

// Info Card
.info-card {
  background: #fff;
  border-radius: 10px;
  margin: 10px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
}
.card-body { padding: 0 16px 14px; }

// Info Rows
.info-row {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  & + & { border-top: 1px solid var(--color-border-light); }
  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
}

// Score Rows
.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  &__name { font-size: 13px; color: var(--color-text-regular); min-width: 76px; }
  &__bar-wrap { flex: 1; height: 6px; background: #E8ECF0; border-radius: 3px; overflow: hidden; }
  &__bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; background: #1E74FF; }
  &__bar.score-green { background: #4CAF50; }
  &__bar.score-orange { background: #FF9800; }
  &__bar.score-red { background: #F44336; }
  &__text {
    font-size: 12px;
    font-weight: 600;
    min-width: 52px;
    text-align: right;
    color: var(--color-text-secondary);
    &.score-green { color: #4CAF50; }
    &.score-orange { color: #FF9800; }
    &.score-red { color: #F44336; }
  }
}

// Photos
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.photo-item { cursor: pointer; }
.photo-img {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.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;
}

// Description
.desc-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-regular);
  padding: 4px 0;
}
</style>
