<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space><el-button text @click="$router.back()">← 返回</el-button><span>工程详情</span></el-space>
        </div>
      </template>
      <el-descriptions :column="2" border v-loading="loading">
        <el-descriptions-item label="工程名称">{{ detail.stnm || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工程编码">{{ detail.stcd || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工程类型">{{ detail.type || '-' }}</el-descriptions-item>
        <el-descriptions-item label="所在区域">{{ detail.area || '-' }}</el-descriptions-item>
        <el-descriptions-item label="建设年份">{{ detail.buildYear || '-' }}</el-descriptions-item>
        <el-descriptions-item label="管理单位">{{ detail.manageUnit || '-' }}</el-descriptions-item>
        <el-descriptions-item label="运行状态" :span="2">
          <el-tag :type="detail.status === '正常' ? 'success' : 'warning'">{{ detail.status || '-' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="工程简介" :span="2">{{ detail.intro || '暂无' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script setup name="GcDetail">
import { getProjectDetail } from '@/api/slgc/zggc/index'

const route = useRoute()
const detail = ref({})
const loading = ref(true)

onMounted(() => {
  const query = route.query
  const params = {}
  if (query.stcd) params.stcd = query.stcd

  if (Object.keys(params).length > 0) {
    getProjectDetail(params).then(res => {
      detail.value = res.data || res.rows || {}
    }).catch(() => {
      detail.value = buildFallback(query)
    }).finally(() => {
      loading.value = false
    })
  } else {
    detail.value = buildFallback(query)
    loading.value = false
  }
})

function buildFallback(query) {
  return {
    stcd: query.stcd || '',
    stnm: query.stnm || '',
    type: query.type || '',
    area: query.area || '',
    buildYear: query.buildYear || '',
    manageUnit: query.manageUnit || '',
    status: query.status || '',
    intro: query.intro || ''
  }
}
</script>
<style scoped>.card-header { font-weight: 600; font-size: 16px; }</style>
