<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 表格 -->
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <span>岸线功能区统计</span>
          </template>
          <el-table v-loading="loading" :data="tableData" border stripe>
            <el-table-column prop="TYPE" label="类别" width="120" />
            <el-table-column prop="BELONG" label="所属" width="150" />
            <el-table-column prop="LINELENG" label="岸线长度(km)" width="140" />
            <el-table-column prop="LINEGN" label="功能区长度(km)" width="140" />
            <el-table-column prop="COUNT" label="功能区数量" width="120" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 图表 -->
      <el-col :span="24" style="margin-top:20px">
        <el-card shadow="hover">
          <template #header>
            <span>岸线长度分布图</span>
          </template>
          <div ref="chartRef" style="width:100%;height:400px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getShorelineStats } from '@/api/hzz/shoreline'
import * as echarts from 'echarts'

const loading = ref(false)
const tableData = ref([])
const chartRef = ref(null)

onMounted(async () => {
  loading.value = true
  try {
    const res = await getShorelineStats()
    tableData.value = res.data || []
    await nextTick()
    initChart()
  } finally {
    loading.value = false
  }
})

const initChart = () => {
  if (!chartRef.value || !tableData.value.length) return
  const chart = echarts.init(chartRef.value)
  const categories = tableData.value.map(r => r.BELONG || r.TYPE)
  const lineLeng = tableData.value.map(r => Number(r.LINELENG) || 0)
  const funcLeng = tableData.value.map(r => Number(r.LINEGN) || 0)

  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['岸线长度(km)', '功能区长度(km)'] },
    xAxis: { type: 'category', data: categories, axisLabel: { rotate: 30 } },
    yAxis: { type: 'value', name: 'km' },
    series: [
      { name: '岸线长度(km)', type: 'bar', data: lineLeng, itemStyle: { color: '#409EFF' } },
      { name: '功能区长度(km)', type: 'bar', data: funcLeng, itemStyle: { color: '#67C23A' } }
    ]
  })
  window.addEventListener('resize', () => chart.resize())
}
</script>
