<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header><div class="card-header"><span>水利工程运行管理</span></div></template>
      <el-alert title="综合管理平台 - 集中展示水利工程运行数据" type="info" :closable="false" show-icon />
      <el-row :gutter="16" class="mt-16">
        <el-col :span="6" v-for="item in modules" :key="item.name">
          <el-card shadow="hover" class="module-card" @click="$router.push(item.path)">
            <div class="module-icon" :style="{background:item.color}"><el-icon :size="32" color="#fff"><component :is="item.icon" /></el-icon></div>
            <div class="module-name">{{ item.name }}</div>
            <div class="module-desc">{{ item.desc }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mt-16">
      <template #header><div class="card-header"><span>实时监测</span></div></template>
      <el-row :gutter="16" v-loading="portalLoading">
        <el-col :span="8" v-for="st in portalData" :key="st.stcd">
          <el-card shadow="hover" class="station-card">
            <div class="station-name">{{ st.stationName || st.name }}</div>
            <div class="station-body">
              <div class="station-row">
                <span class="station-label">当前水位</span>
                <span class="station-value">{{ formatStationValue(st.data, 'SW') }}</span>
              </div>
              <div class="station-row">
                <span class="station-label">今日引水</span>
                <span class="station-value">{{ formatStationValue(st.data, 'YSL') }}</span>
              </div>
              <div class="station-row">
                <span class="station-label">今日排水</span>
                <span class="station-value">{{ formatStationValue(st.data, 'PSL') }}</span>
              </div>
              <div class="station-row">
                <span class="station-label">监测时间</span>
                <span class="station-value">{{ formatStationValue(st.data, 'TM') }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mt-16">
      <template #header><div class="card-header"><span>实时监测视频</span></div></template>
      <div style="text-align:center;padding:12px 0">
        <iframe id="videoFrame" bordor="0" width="99%" height="500px" style="min-height:300px;border:none" :src="videoUrl"></iframe>
      </div>
    </el-card>
  </div>
</template>

<script setup name="Slgc">
import { TrendCharts, Switch, Setting, DataAnalysis, Document, Monitor, Guide, Warning } from '@element-plus/icons-vue'
import { getPortalData } from '@/api/slgc/zggc/index'

const modules = [
  { name:'工程资料', path:'/slgc/proj/gc', icon:DataAnalysis, color:'#409EFF', desc:'水库/堤防/水闸/泵站管理' },
  { name:'堤防管理', path:'/slgc/proj/dike', icon:TrendCharts, color:'#67C23A', desc:'堤防工程信息维护' },
  { name:'水库管理', path:'/slgc/proj/reservoir', icon:DataAnalysis, color:'#E6A23C', desc:'水库工程信息管理' },
  { name:'水闸管理', path:'/slgc/proj/pust', icon:Switch, color:'#F56C6C', desc:'水闸工程信息管理' },
  { name:'泵站管理', path:'/slgc/proj/waga', icon:Setting, color:'#909399', desc:'泵站工程信息管理' },
  { name:'文章列表', path:'/slgc/standard/article', icon:Document, color:'#409EFF', desc:'文章内容发布管理' },
  { name:'文档管理', path:'/slgc/legal/doc', icon:Guide, color:'#67C23A', desc:'技术文档归档管理' },
  { name:'监测管理', path:'/slgc/monitor', icon:Monitor, color:'#E6A23C', desc:'实时监测数据查看' },
  { name:'工程监管', path:'/slgc/zggc', icon:Warning, color:'#F56C6C', desc:'在建工程进度监管' },
]

const portalLoading = ref(true)
const portalData = ref([])
const videoUrl = ref('/slgc/video.html')

function formatStationValue(data, field) {
  if (!data || data.length === 0) return '-'
  const row = data[0]
  const val = row[field]
  if (val == null) return '-'
  if (typeof val === 'string' && val.includes('/')) {
    const parts = val.split('/')
    return parts[0] || '-'
  }
  return val
}

onMounted(() => {
  getPortalData().then(res => {
    portalData.value = res.data || []
    portalLoading.value = false
  }).catch(() => {
    portalLoading.value = false
  })
})
</script>

<style scoped>
.card-header { font-weight: 600; font-size: 16px; }
.mt-16 { margin-top: 16px; }
.module-card { text-align: center; cursor: pointer; margin-bottom: 16px; }
.module-card:hover { transform: translateY(-3px); transition: all .3s; }
.module-icon { width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:8px auto; }
.module-name { font-size:16px;font-weight:600;margin-top:8px; }
.module-desc { font-size:12px;color:#999;margin-top:4px; }
.station-card { margin-bottom:16px; }
.station-name { font-size:16px;font-weight:600;color:#409EFF;text-align:center;padding:8px 0;border-bottom:1px solid #eee; }
.station-body { padding:12px 8px; }
.station-row { display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #f0f0f0; }
.station-row:last-child { border-bottom:none; }
.station-label { color:#909399;font-size:14px; }
.station-value { color:#303133;font-weight:500;font-size:14px; }
</style>
