<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'

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 },
])

/** 结果映射 */
const resultMap: Record<string, string> = { normal: '正常', abnormal: '异常' }
const resultColorMap: Record<string, 'success' | 'danger'> = { normal: 'success', abnormal: 'danger' }
</script>

<template>
  <div class="record-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">{{ 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.taskName }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">养护人员</span>
          <span class="info-row__value">{{ record.maintainer }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">开始时间</span>
          <span class="info-row__value">{{ record.startTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">结束时间</span>
          <span class="info-row__value">{{ record.endTime }}</span>
        </div>
        <div class="info-row">
          <span class="info-row__label">养护时长</span>
          <span class="info-row__value">{{ record.duration }}</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 checkItems" :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" :style="{ width: (item.score / item.maxScore * 100) + '%' }"></div>
          </div>
          <span class="score-row__text">{{ 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">
        <div class="photo-grid">
          <van-image
            v-for="i in 2"
            :key="'before-' + i"
            fit="cover"
            radius="8"
            class="photo-item"
            :src="`https://via.placeholder.com/300?text=养护前照片${i}`"
          >
            <template #loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template #error>
              <div class="photo-placeholder">暂无照片</div>
            </template>
          </van-image>
        </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 class="photo-grid">
          <van-image
            v-for="i in 2"
            :key="'after-' + i"
            fit="cover"
            radius="8"
            class="photo-item"
            :src="`https://via.placeholder.com/300?text=养护后照片${i}`"
          >
            <template #loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template #error>
              <div class="photo-placeholder">暂无照片</div>
            </template>
          </van-image>
        </div>
      </div>
    </div>

    <!-- 备注 Card -->
    <div v-if="record.remark" 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>
  </div>
</template>

<style lang="scss" scoped>
.record-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;
  color: #1E74FF;
}
.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: 90px; }
  &__bar-wrap { flex: 1; height: 6px; background: #E8ECF0; border-radius: 3px; overflow: hidden; }
  &__bar { height: 100%; background: #1E74FF; border-radius: 3px; transition: width 0.4s ease; }
  &__text { font-size: 12px; color: var(--color-text-secondary); min-width: 44px; text-align: right; }
}

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

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