<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: '阀门巡检-高新区',
  inspector: '李工',
  startTime: '2025-06-15 14:00',
  endTime: '2025-06-15 16:00',
  duration: '2小时',
  result: 'abnormal',
  remark: '发现3处阀门漏水问题，已记录并上报。部分阀门存在锈蚀情况，建议尽快安排维修。',
})

/** 模拟问题列表 */
const problemList = ref([
  { id: 1, description: 'DN200闸阀密封圈老化漏水', level: '严重', location: '高新区创新路12号阀井', photos: ['p1', 'p2'] },
  { id: 2, description: 'DN150蝶阀操作手柄锈蚀', level: '一般', location: '高新区创新路28号', photos: ['p3'] },
  { id: 3, description: 'DN100排气阀堵塞', level: '轻微', location: '高新区创新路45号', photos: [] },
])

const levelColorMap: Record<string, 'danger' | 'warning' | 'primary'> = {
  '严重': 'danger',
  '一般': 'warning',
  '轻微': 'primary',
}
</script>

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

    <div class="detail-content">
      <!-- Section: 基本信息 -->
      <div class="section-card">
        <div class="section-title">
          <span class="accent-bar"></span>
          <span class="title-text">基本信息</span>
        </div>
        <div class="info-grid">
          <div class="info-cell">
            <span class="info-label">任务名称</span>
            <span class="info-value">{{ record.taskName }}</span>
          </div>
          <div class="info-cell">
            <span class="info-label">巡检人员</span>
            <span class="info-value">{{ record.inspector }}</span>
          </div>
          <div class="info-cell">
            <span class="info-label">开始时间</span>
            <span class="info-value">{{ record.startTime }}</span>
          </div>
          <div class="info-cell">
            <span class="info-label">结束时间</span>
            <span class="info-value">{{ record.endTime }}</span>
          </div>
          <div class="info-cell">
            <span class="info-label">巡检时长</span>
            <span class="info-value">{{ record.duration }}</span>
          </div>
          <div class="info-cell">
            <span class="info-label">巡检结果</span>
            <van-tag
              :type="record.result === 'normal' ? 'success' : 'danger'"
              size="medium"
              round
            >
              {{ record.result === 'normal' ? '正常' : '异常' }}
            </van-tag>
          </div>
        </div>
      </div>

      <!-- Section: 备注 -->
      <div v-if="record.remark" class="section-card">
        <div class="section-title">
          <span class="accent-bar"></span>
          <span class="title-text">备注信息</span>
        </div>
        <div class="remark-content">
          <van-icon name="info-o" size="14" color="#969799" class="remark-icon" />
          <p class="remark-text">{{ record.remark }}</p>
        </div>
      </div>

      <!-- Section: 发现问题 -->
      <div class="section-card">
        <div class="section-title">
          <span class="accent-bar"></span>
          <span class="title-text">发现问题</span>
          <span class="title-badge">{{ problemList.length }}</span>
        </div>
        <van-empty
          v-if="problemList.length === 0"
          image="search"
          description="未发现问题"
        />
        <div v-for="(problem, idx) in problemList" :key="problem.id" class="problem-item">
          <div class="problem-header">
            <span class="problem-index">#{{ idx + 1 }}</span>
            <van-tag :type="levelColorMap[problem.level]" size="medium" round>
              {{ problem.level }}
            </van-tag>
          </div>
          <p class="problem-desc">{{ problem.description }}</p>
          <p class="problem-location">
            <van-icon name="location-o" size="12" color="#969799" />
            {{ problem.location }}
          </p>
          <!-- Problem photos -->
          <div v-if="problem.photos.length > 0" class="problem-photos">
            <div
              v-for="(_, pi) in problem.photos"
              :key="pi"
              class="problem-photo-thumb"
            >
              <van-icon name="photo-o" size="16" color="#C8C9CC" />
            </div>
          </div>
        </div>
      </div>

      <!-- Section: 现场照片 -->
      <div class="section-card">
        <div class="section-title">
          <span class="accent-bar"></span>
          <span class="title-text">现场照片</span>
          <span class="title-badge">3</span>
        </div>
        <div class="photo-grid">
          <div class="photo-item" v-for="i in 3" :key="i">
            <van-icon name="photo-o" size="28" color="#C8C9CC" />
            <span class="photo-label">照片 {{ i }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Action -->
    <div class="bottom-action">
      <van-button type="primary" block round>分享记录</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 80px;

  // NavBar — brand blue bg, white text
  :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;
  }
}

// Content
.detail-content {
  padding: 8px 12px;
}

// Section Card
.section-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

// Section Title with accent bar
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.accent-bar {
  width: 4px;
  height: 18px;
  background: #1E74FF;
  border-radius: 2px;
  flex-shrink: 0;
}

.title-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}

.title-badge {
  font-size: 12px;
  font-weight: 600;
  color: #1E74FF;
  background: #E3F2FD;
  padding: 2px 10px;
  border-radius: 999px;
}

// Info Grid
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.info-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: var(--color-text-placeholder);
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

// Remark
.remark-content {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #F7F8FA;
  border-radius: 8px;
  padding: 12px;
}

.remark-icon {
  margin-top: 1px;
  flex-shrink: 0;
}

.remark-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-regular);
}

// Problem Items
.problem-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.problem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.problem-index {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.problem-desc {
  font-size: 14px;
  color: var(--color-text-regular);
  margin-bottom: 4px;
  line-height: 1.5;
}

.problem-location {
  font-size: 12px;
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

// Problem Photos
.problem-photos {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.problem-photo-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.photo-item {
  aspect-ratio: 1;
  background: #F2F3F5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.photo-label {
  font-size: 11px;
  color: var(--color-text-placeholder);
}

// Bottom Action
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);

  :deep(.van-button--primary) {
    height: 44px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
