<script setup lang="ts">
/**
 * 项目管理列表页
 *
 * 展示所有工程项目，支持搜索和按状态筛选，
 * 每项显示进度条。
 */
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')
const activeTab = ref(0)

interface Project {
  id: number
  name: string
  no: string
  company: string
  progress: number
  status: 'building' | 'paused' | 'completed'
  manager: string
}

const projects: Project[] = [
  { id: 1, name: '城北雨水管网改造工程', no: 'XM-2025-001', company: '中建三局', progress: 75, status: 'building', manager: '赵工' },
  { id: 2, name: '东风路排水泵站新建项目', no: 'XM-2025-002', company: '水务工程公司', progress: 30, status: 'building', manager: '钱工' },
  { id: 3, name: '中山河河道整治工程', no: 'XM-2025-003', company: '市政建设集团', progress: 90, status: 'building', manager: '孙工' },
  { id: 4, name: '开发区污水管网铺设', no: 'XM-2025-004', company: '中交一公局', progress: 0, status: 'paused', manager: '李工' },
  { id: 5, name: '老城区雨污分流改造', no: 'XM-2025-005', company: '中铁十二局', progress: 100, status: 'completed', manager: '周工' },
  { id: 6, name: '南湖片区海绵城市试点', no: 'XM-2025-006', company: '葛洲坝集团', progress: 55, status: 'building', manager: '吴工' },
]

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 filteredList = computed(() => {
  let list = projects
  if (searchText.value) {
    const kw = searchText.value.toLowerCase()
    list = list.filter(p =>
      p.name.toLowerCase().includes(kw) ||
      p.no.toLowerCase().includes(kw) ||
      p.company.toLowerCase().includes(kw)
    )
  }
  if (activeTab.value === 1) list = list.filter(p => p.status === 'building')
  else if (activeTab.value === 2) list = list.filter(p => p.status === 'paused')
  else if (activeTab.value === 3) list = list.filter(p => p.status === 'completed')
  return list
})

function goDetail(id: number) {
  router.push(`/projectManagementDetail/${id}`)
}
</script>

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

    <!-- Search -->
    <van-search
      v-model="searchText"
      placeholder="搜索项目名称、编号、单位"
      shape="round"
      class="search-bar"
    />

    <!-- Status Tabs -->
    <van-tabs v-model:active="activeTab" sticky swipeable class="tabs-bar">
      <van-tab title="全部" />
      <van-tab title="在建" />
      <van-tab title="暂停" />
      <van-tab title="竣工" />
    </van-tabs>

    <!-- Project List -->
    <div class="content">
      <van-empty v-if="filteredList.length === 0" description="暂无项目" />

      <div
        v-for="item in filteredList"
        :key="item.id"
        class="proj-card"
        @click="goDetail(item.id)"
      >
        <div class="card-accent" :style="{ background: progressColor(item.progress) }" />

        <div class="card-body">
          <div class="card-header">
            <span class="card-title">{{ item.name }}</span>
            <span
              class="status-tag"
              :style="{ color: statusCfg[item.status].color, background: statusCfg[item.status].bg }"
            >
              {{ statusCfg[item.status].label }}
            </span>
          </div>

          <div class="card-info">
            <span class="info-text">{{ item.no }}</span>
            <span class="info-divider">|</span>
            <span class="info-text">{{ item.company }}</span>
            <span class="info-divider">|</span>
            <span class="info-text">负责人: {{ item.manager }}</span>
          </div>

          <van-progress
            :percentage="item.progress"
            :color="progressColor(item.progress)"
            :pivot-text="`${item.progress}%`"
            stroke-width="6"
          />

          <van-icon name="arrow" color="#C8C9CC" class="card-arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

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

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

// ── Search ──
.search-bar {
  :deep(.van-search__content) {
    background: #fff;
  }
}

// ── Tabs ──
.tabs-bar {
  :deep(.van-tabs__nav) {
    background: #fff;
  }
}

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

// ── Card ──
.proj-card {
  display: flex;
  position: relative;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;

  &:active {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.card-accent {
  width: 4px;
  flex-shrink: 0;
}

.card-body {
  flex: 1;
  padding: 14px 16px;
  position: relative;
  min-width: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #323233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
  }
}

.card-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;

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

  .info-divider {
    font-size: 12px;
    color: #EBEDF0;
  }
}

.card-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
