<script setup lang="ts">
/**
 * 排水户检查详情页
 *
 * 展示已提交的检查报告详情，包含检查项目、评分、
 * 综合评定、整改建议和现场照片等完整信息。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

const detailId = (route.params.detail || route.query.id) as string

/** 模拟检查详情数据 */
const checkDetail = ref({
  id: detailId || '1',
  pshName: '华丰食品厂',
  checkDate: '2025-06-15',
  inspector: '张检查员',
  items: [
    { name: '排水管道', description: '管道畅通，无堵塞现象，接口密封良好。', score: 5 },
    { name: '预处理设备', description: '设备运行正常，格栅无破损，沉砂池定期清理。', score: 4 },
    { name: '油脂分离器', description: '分离器工作正常，油脂收集记录完整。', score: 5 },
    { name: '雨污分流', description: '雨污分流管道清晰，无混接现象。', score: 4 },
  ],
  overall: '合格',
  overallScore: '4分 - 良好',
  suggestion: '建议加强日常巡检频次，定期清理隔油池，保持排水管道畅通。',
  photos: [] as string[],
  createTime: '2025-06-15 10:30:00',
  updateTime: '2025-06-15 10:30:00',
})

/** 结果颜色映射 */
const resultColorMap: Record<string, string> = {
  '合格': '#07c160',
  '不合格': '#ee0a24',
}

/** 分数颜色 */
function getScoreColor(score: number): string {
  if (score >= 5) return '#07c160'
  if (score >= 3) return '#ff976a'
  return '#ee0a24'
}
</script>

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

    <!-- 检查结果状态 -->
    <div class="result-bar">
      <span
        class="result-tag"
        :style="{ color: resultColorMap[checkDetail.overall], borderColor: resultColorMap[checkDetail.overall] }"
      >
        {{ checkDetail.overall }}
      </span>
      <span class="result-score">{{ checkDetail.overallScore }}</span>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="排水户" :value="checkDetail.pshName" />
      <van-cell title="检查日期" :value="checkDetail.checkDate" />
      <van-cell title="检查人" :value="checkDetail.inspector" />
    </van-cell-group>

    <!-- 检查项目 -->
    <van-cell-group title="检查项目" class="info-group">
      <van-cell
        v-for="(item, index) in checkDetail.items"
        :key="index"
        :title="`${index + 1}. ${item.name}`"
        :label="item.description"
      >
        <template #value>
          <span class="score-badge" :style="{ background: getScoreColor(item.score) }">
            {{ item.score }} 分
          </span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 综合评定 -->
    <van-cell-group title="综合评定" class="info-group">
      <van-cell title="评定结果" :value="checkDetail.overall" />
      <van-cell title="综合评分" :value="checkDetail.overallScore" />
    </van-cell-group>

    <!-- 整改建议 -->
    <van-cell-group title="整改建议" class="info-group">
      <van-cell>
        <p class="desc-text">{{ checkDetail.suggestion || '无' }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 现场照片 -->
    <van-cell-group title="现场照片" class="info-group">
      <van-cell>
        <div v-if="checkDetail.photos.length === 0" class="no-photo">
          <span>暂无现场照片</span>
        </div>
        <div v-else class="photo-grid">
          <van-image
            v-for="(photo, idx) in checkDetail.photos"
            :key="idx"
            :src="photo"
            width="100"
            height="100"
            fit="cover"
            radius="8"
          />
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 时间信息 -->
    <van-cell-group title="操作记录" class="info-group">
      <van-cell title="创建时间" :value="checkDetail.createTime" />
      <van-cell title="更新时间" :value="checkDetail.updateTime" />
    </van-cell-group>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button type="primary" block round @click="router.back()">
        返回列表
      </van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-card);
}

.result-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border: 2px solid;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
}

.result-score {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-regular);
}

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

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

.score-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  font-size: 13px;
  color: var(--color-text-placeholder);
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.action-buttons {
  padding: 24px 16px;
}
</style>
