<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: '阀门养护-高新区',
  maintainer: '陈工',
  startTime: '2025-06-15 14:00',
  endTime: '2025-06-15 16:00',
  duration: '2小时',
  result: 'abnormal',
  score: 72,
  remark: '完成高新区阀门养护工作，发现2处阀门存在轻微锈蚀，已进行防锈处理并记录。整体养护效果良好。',
})

/** 养护项目明细 */
const checkItems = ref([
  { name: '阀门操作灵活性', score: 4, maxScore: 5 },
  { name: '密封性检查', score: 3, maxScore: 5 },
  { name: '外观清洁度', score: 4, maxScore: 5 },
  { name: '螺栓紧固', score: 5, maxScore: 5 },
  { name: '润滑保养', score: 2, maxScore: 5 },
])
</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.maintainer" />
      <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 title="综合评分">
        <template #value>
          <span class="score-value">{{ record.score }} 分</span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 评分明细 -->
    <van-cell-group title="评分明细" class="info-group">
      <van-cell v-for="item in checkItems" :key="item.name" :title="item.name">
        <template #value>
          <span class="item-score">{{ item.score }} / {{ item.maxScore }}</span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 养护前照片 -->
    <van-cell-group title="养护前照片" class="info-group">
      <div class="photo-grid">
        <van-image
          v-for="i in 2"
          :key="'before-' + i"
          width="100%"
          height="100%"
          fit="cover"
          radius="8"
          src="https://via.placeholder.com/300?text=养护前照片{{ i }}"
          class="photo-item"
        >
          <template #loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template #error>
            <div class="photo-placeholder">暂无照片</div>
          </template>
        </van-image>
      </div>
    </van-cell-group>

    <!-- 养护后照片 -->
    <van-cell-group title="养护后照片" class="info-group">
      <div class="photo-grid">
        <van-image
          v-for="i in 2"
          :key="'after-' + i"
          width="100%"
          height="100%"
          fit="cover"
          radius="8"
          src="https://via.placeholder.com/300?text=养护后照片{{ i }}"
          class="photo-item"
        >
          <template #loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template #error>
            <div class="photo-placeholder">暂无照片</div>
          </template>
        </van-image>
      </div>
    </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>
  </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;
}

.score-value {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 15px;
}

.item-score {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.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(2, 1fr);
  gap: 8px;
  padding: 12px 16px;
}

.photo-item {
  aspect-ratio: 4 / 3;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  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>
