<template>
  <div class="app-container">

    <!-- 顶部存栏总数 -->
    <el-row :gutter="20" class="top-summary">
      <el-col :span="24">
        <el-card shadow="hover" class="summary-card">
          <div class="summary-content">
            <el-icon size="48" color="#409EFF"><Collection /></el-icon>
            <div>
              <div class="summary-title">存栏羊只总数</div>
              <div class="summary-value">{{ inGroupCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 羊只类别 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <span class="card-title">羊只类别分布</span>
          </template>
          <div ref="typePie" class="chart-box"></div>
        </el-card>
      </el-col>

      <!-- 泌乳羊胎次 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <span class="card-title">泌乳羊胎次分布</span>
          </template>
          <div ref="parityPie" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 繁育状态 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <span class="card-title">繁育状态分布</span>
          </template>
          <div ref="breedBar" class="chart-box"></div>
        </el-card>
      </el-col>

      <!-- 品种分布 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <span class="card-title">品种分布</span>
          </template>
          <div ref="varietyBar" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Collection } from '@element-plus/icons-vue'
import {
  getInGroupCount,
  getSheepTypeStat,
  getBreedStatusStat,
  getVarietyStat,
  getLactationParityStat
} from '@/api/fileManagement/sheep_file'

const inGroupCount = ref(0)
const typePie   = ref(null)
const parityPie = ref(null)
const breedBar  = ref(null)
const varietyBar = ref(null)

let chart1, chart2, chart3, chart4

onMounted(() => {
  chart1 = echarts.init(typePie.value)
  chart2 = echarts.init(parityPie.value)
  chart3 = echarts.init(breedBar.value)
  chart4 = echarts.init(varietyBar.value)

  loadCharts()
  window.addEventListener('resize', () => {
    chart1.resize(); chart2.resize(); chart3.resize(); chart4.resize()
  })
})

function loadCharts() {
  const pieOption = (data, title) => ({
    title: { text: title, left: 'center', textStyle: { fontWeight: 'bold' } },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        type: 'pie',
        radius: '60%',
        data,
        emphasis: {
          itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' }
        }
      }
    ]
  })

  const barOption = (data, title) => ({
    title: { text: title, left: 'center', textStyle: { fontWeight: 'bold' } },
    tooltip: {},
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: data.map(i => i.name) },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: data.map(i => i.value), itemStyle: { borderRadius: [4, 4, 0, 0] } }]
  })

  getInGroupCount().then(res => (inGroupCount.value = res.data))
  getSheepTypeStat().then(res => chart1.setOption(pieOption(res.data, '羊只类别分布')))
  getLactationParityStat().then(res => chart2.setOption(pieOption(res.data, '泌乳羊胎次分布')))
  getBreedStatusStat().then(res => chart3.setOption(barOption(res.data, '繁育状态分布')))
  getVarietyStat().then(res => chart4.setOption(barOption(res.data, '品种分布')))
}
</script>

<style scoped>
/* 顶部卡片 */
.top-summary {
  margin-bottom: 20px;
}
.summary-card {
  border-radius: 12px;
}
.summary-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.summary-title {
  font-size: 16px;
  color: #909399;
  margin-bottom: 6px;
}
.summary-value {
  font-size: 36px;
  font-weight: 700;
  color: #409EFF;
}

/* 图表卡片 */
.chart-row {
  margin-bottom: 20px;
}
.chart-card {
  border-radius: 12px;
  height: 100%;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.chart-box {
  height: 300px;
}
</style>