<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,
  supervisorName: '张监督',
  project: '城北供水改造工程',
  type: 'daily',
  result: 'qualified',
  date: '2025-06-15',
  time: '09:30 - 11:00',
  address: '城北工业大道12号施工段',
  content: '对管道焊接质量进行日常监督，检查焊缝外观、焊接参数记录、焊工资质等。焊接质量良好，符合规范要求。',
  conclusion: '合格。焊接作业规范，焊接参数符合设计要求，建议继续保持。',
  remark: '现场焊接环境良好，防护措施到位。',
  createTime: '2025-06-15 11:15:00',
  photos: [
    { id: 1, url: 'https://via.placeholder.com/400x300/4CAF50/white?text=Photo+1', desc: '焊接现场全景' },
    { id: 2, url: 'https://via.placeholder.com/400x300/2196F3/white?text=Photo+2', desc: '焊缝细节' },
    { id: 3, url: 'https://via.placeholder.com/400x300/FF9800/white?text=Photo+3', desc: '焊工资质核查' },
  ],
})

const typeMap: Record<string, string> = {
  daily: '日常监督',
  special: '专项监督',
  rectify: '整改复查',
}

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

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

/** 预览照片 */
function previewPhoto(index: number) {
  showImagePreview({
    images: record.value.photos.map(p => p.url),
    startPosition: index,
  })
}
</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 Bar -->
    <div class="result-bar">
      <van-tag :type="resultColorMap[record.result]" size="large" round>
        {{ resultMap[record.result] }}
      </van-tag>
      <div class="result-bar__name">{{ record.supervisorName }}</div>
      <div class="result-bar__sub">{{ typeMap[record.type] }} · {{ record.date }}</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.supervisorName }}</span>
        </div>
        <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">{{ typeMap[record.type] }}</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">
        <p class="desc-text">{{ record.content }}</p>
      </div>
    </div>

    <!-- 现场照片 Card -->
    <div class="info-card" v-if="record.photos.length > 0">
      <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"
              width="100%"
              height="100"
              fit="cover"
              radius="6"
            />
            <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>
.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: 20px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-bottom: 10px;

  &__name {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  &__sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
}

// 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;
  }
}

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

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

.photo-item {
  cursor: pointer;

  :deep(.van-image) {
    aspect-ratio: 4 / 3;
  }
}

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