<script setup lang="ts">
/**
 * 监督记录详情页
 *
 * 展示监督记录的详细信息，包含基本信息、监督内容、现场照片和结论。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, 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">
    <van-nav-bar title="记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <!-- 结果标签 -->
    <div class="result-bar">
      <van-tag :type="resultColorMap[record.result]" size="large">
        {{ resultMap[record.result] }}
      </van-tag>
    </div>

    <!-- 基本信息 -->
    <van-cell-group title="基本信息" class="info-group">
      <van-cell title="监督人" :value="record.supervisorName" />
      <van-cell title="所属项目" :value="record.project" />
      <van-cell title="监督类型" :value="typeMap[record.type]" />
      <van-cell title="监督日期" :value="record.date" />
      <van-cell title="监督时间" :value="record.time" />
      <van-cell title="监督地址" :value="record.address" />
    </van-cell-group>

    <!-- 监督内容 -->
    <van-cell-group title="监督内容" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.content }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 现场照片 -->
    <van-cell-group title="现场照片" class="info-group">
      <van-cell>
        <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>
      </van-cell>
    </van-cell-group>

    <!-- 结论与备注 -->
    <van-cell-group title="监督结论" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.conclusion }}</p>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="备注" class="info-group">
      <van-cell>
        <p class="desc-text">{{ record.remark }}</p>
      </van-cell>
    </van-cell-group>

    <!-- 时间信息 -->
    <van-cell-group title="时间信息" class="info-group">
      <van-cell title="创建时间" :value="record.createTime" />
    </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;
  }
}

.result-bar {
  padding: 12px 16px;
  background: var(--color-bg-card);
  text-align: center;
}

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

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

.photo-item {
  cursor: pointer;
}

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