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

const router = useRouter()
const route = useRoute()
const detailId = computed(() => route.params.id as string | undefined)

interface ProjectDetail {
  id: string
  name: string
  no: string
  company: string
  progress: number
  status: 'building' | 'paused' | 'completed'
  manager: string
  phone: string
  startDate: string
  endDate: string
  budget: string
  address: string
  description: string
}

const project = ref<ProjectDetail>({
  id: detailId.value || '1',
  name: '城北雨水管网改造工程',
  no: 'XM-2025-001',
  company: '中建三局',
  progress: 75,
  status: 'building',
  manager: '赵工',
  phone: '13800001010',
  startDate: '2025-03-01',
  endDate: '2025-12-31',
  budget: '1250万元',
  address: '城北工业园区大道路段',
  description: '该项目对城北工业园区范围内雨水管网进行全面改造升级，包括主管网更换、检查井增设、雨水口改造等内容。改造完成后将显著提升区域排水能力，惠及周边30万居民。',
})

const statusCfg: Record<string, { label: string; color: string; bg: string }> = {
  building: { label: '在建', color: '#1E74FF', bg: '#E3F2FD' },
  paused: { label: '暂停', color: '#FF976A', bg: '#FFF3ED' },
  completed: { label: '竣工', color: '#07C160', bg: '#E8F8EF' },
}

function progressColor(pct: number): string {
  if (pct >= 80) return '#07C160'
  if (pct >= 40) return '#1E74FF'
  return '#FF976A'
}

/** 模拟现场照片 */
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' },
])

/** 模拟里程碑 */
const milestones = ref([
  { text: '项目立项', time: '2025-02-15', done: true },
  { text: '施工设计', time: '2025-03-15', done: true },
  { text: '管网铺设', time: '2025-06-30', done: true },
  { text: '泵站建设', time: '2025-09-30', done: false },
  { text: '竣工验收', time: '2025-12-31', done: false },
])

const activeStep = computed(() => milestones.value.filter(m => m.done).length - 1)
</script>

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

    <!-- Status Banner -->
    <div class="status-banner">
      <span
        class="status-badge"
        :style="{ color: statusCfg[project.status].color, background: statusCfg[project.status].bg }"
      >
        {{ statusCfg[project.status].label }}
      </span>
      <span class="status-name">{{ project.name }}</span>
    </div>

    <!-- Section: 基本信息 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">基本信息</span>
      </div>
      <div class="card">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">项目编号</span>
            <span class="info-value">{{ project.no }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">施工单位</span>
            <span class="info-value">{{ project.company }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">负责人</span>
            <span class="info-value">{{ project.manager }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">联系电话</span>
            <span class="info-value">{{ project.phone }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">施工地址</span>
            <span class="info-value">{{ project.address }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">计划工期</span>
            <span class="info-value">{{ project.startDate }} ~ {{ project.endDate }}</span>
          </div>
          <div class="info-item full-width">
            <span class="info-label">预算金额</span>
            <span class="info-value highlight">{{ project.budget }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Section: 项目描述 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">项目描述</span>
      </div>
      <div class="card">
        <p class="desc-text">{{ project.description }}</p>
      </div>
    </div>

    <!-- Section: 工程进度 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">工程进度</span>
      </div>
      <div class="card">
        <van-progress
          :percentage="project.progress"
          :color="progressColor(project.progress)"
          :pivot-text="`${project.progress}%`"
          stroke-width="10"
        />
      </div>
    </div>

    <!-- Section: 项目里程碑 -->
    <div class="section">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">项目里程碑</span>
      </div>
      <div class="card">
        <van-steps
          :active="activeStep"
          direction="vertical"
          active-color="#1E74FF"
        >
          <van-step v-for="(step, idx) in milestones" :key="idx">
            <template #active-icon>
              <van-icon name="checked" color="#1E74FF" />
            </template>
            <template #inactive-icon>
              <van-icon name="clock-o" color="#C8C9CC" />
            </template>
            <div class="step-content">
              <h4 :class="{ 'step-done': step.done }">{{ step.text }}</h4>
              <p>{{ step.time }}</p>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>

    <!-- Section: 现场照片 -->
    <div class="section" v-if="photos.length > 0">
      <div class="section-header">
        <span class="section-accent"></span>
        <span class="section-title">现场照片</span>
      </div>
      <div class="card photo-card">
        <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
            class="photo-item"
          />
        </div>
      </div>
    </div>

    <!-- Bottom spacing -->
    <div class="bottom-spacer" />
  </div>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F4F7F8;
  padding-bottom: 24px;
}

// ── NavBar ──
:deep(.van-nav-bar) {
  background: #1E74FF;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
}

// ── Status Banner ──
.status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  margin: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

  .status-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
  }

  .status-name {
    font-size: 15px;
    font-weight: 500;
    color: #323233;
  }
}

// ── Section ──
.section {
  margin: 0 12px 10px;

  .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
  }

  .section-accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #323233;
  }
}

// ── Card ──
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

// ── Info Grid ──
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.info-item {
  padding: 10px 0;
  border-bottom: 1px solid #F2F3F5;
  display: flex;
  flex-direction: column;
  gap: 4px;

  &:nth-child(odd) {
    padding-right: 12px;
  }

  &.full-width {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .info-label {
    font-size: 12px;
    color: #969799;
  }

  .info-value {
    font-size: 14px;
    color: #323233;
    word-break: break-all;

    &.highlight {
      font-weight: 700;
      color: #EE0A24;
    }
  }
}

// ── Description ──
.desc-text {
  font-size: 14px;
  color: #646566;
  line-height: 1.7;
  margin: 0;
}

// ── Steps ──
:deep(.van-step__title) {
  .step-content {
    h4 {
      margin: 0;
      font-size: 14px;
      color: #969799;
      font-weight: 400;

      &.step-done {
        color: #323233;
        font-weight: 500;
      }
    }

    p {
      margin: 4px 0 0;
      font-size: 12px;
      color: #C8C9CC;
    }
  }
}

// ── Photos ──
.photo-card {
  padding: 8px;
}

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

.photo-item {
  border-radius: 8px;
  overflow: hidden;
}

// ── Bottom Spacer ──
.bottom-spacer {
  height: 16px;
}
</style>
