<script setup lang="ts">
/**
 * 工程项目详情
 *
 * 展示工程项目的详细信息，包括基本信息、
 * 施工进度、现场照片等。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

/** 模拟项目详情 */
const project = {
  id: route.params.id,
  name: '城北雨水管网改造工程',
  no: 'XM-2025-001',
  company: '中建三局',
  manager: '赵工',
  phone: '13800001010',
  progress: 75,
  status: 'building',
  startDate: '2025-03-01',
  endDate: '2025-09-30',
  budget: '1250万元',
  address: '城北工业园区大道路段',
  description: '该项目对城北工业园区范围内雨水管网进行全面改造升级，包括主管网更换、检查井增设、雨水口改造等内容。改造完成后将显著提升区域排水能力。',
}

/** 模拟现场照片 */
const photos = ref([
  { url: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { url: 'https://img.yzcdn.cn/vant/apple-1.jpg' },
  { url: 'https://img.yzcdn.cn/vant/apple-2.jpg' },
  { url: 'https://img.yzcdn.cn/vant/apple-3.jpg' },
])

function progressColor(pct: number): string {
  if (pct >= 80) return '#07c160'
  if (pct >= 40) return '#1989fa'
  return '#ff976a'
}

const statusMap: Record<string, string> = {
  building: '在建',
  paused: '暂停',
  completed: '竣工',
}
</script>

<template>
  <div class="page-container">
    <van-nav-bar
      title="项目详情"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <van-cell-group inset>
      <van-cell title="项目名称" :value="project.name" />
      <van-cell title="项目编号" :value="project.no" />
      <van-cell title="施工单位" :value="project.company" />
      <van-cell title="项目负责人" :value="project.manager" />
      <van-cell title="联系电话" :value="project.phone" />
      <van-cell title="项目状态">
        <template #value>
          <van-tag type="primary" size="medium">{{ statusMap[project.status] }}</van-tag>
        </template>
      </van-cell>
      <van-cell title="施工地址" :value="project.address" />
      <van-cell title="开工日期" :value="project.startDate" />
      <van-cell title="计划竣工" :value="project.endDate" />
      <van-cell title="项目预算" :value="project.budget" />
    </van-cell-group>

    <van-cell-group inset style="margin-top: 12px">
      <van-cell title="施工进度" />
      <div class="progress-section">
        <van-progress
          :percentage="project.progress"
          :color="progressColor(project.progress)"
          :pivot-text="`${project.progress}%`"
          stroke-width="12"
        />
      </div>
    </van-cell-group>

    <van-cell-group inset style="margin-top: 12px">
      <van-cell title="项目概述" />
      <div class="content-block">{{ project.description }}</div>
    </van-cell-group>

    <div class="photo-section" v-if="photos.length > 0">
      <div class="section-title">现场照片</div>
      <div class="photo-grid">
        <van-image
          v-for="(photo, idx) in photos"
          :key="idx"
          :src="photo.url"
          width="100%"
          height="100"
          fit="cover"
          radius="8"
          lazy-load
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  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;
  }
}

.progress-section {
  padding: 12px 16px;
  background: var(--color-bg-card);
}

.content-block {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-regular);
  background: var(--color-bg-card);
  white-space: pre-wrap;
}

.photo-section {
  margin-top: 12px;
  padding: 12px 16px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
</style>
