<template>
  <div class="dashboard-container">
    <div v-if="loading" class="chart-wrapper">加载中...</div>
    <div v-else>
      <panel-group 
        :panel-data="panelData"
        @handleSetLineChartData="handleSetLineChartData" 
      />

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;border-radius:12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);">
        <line-chart :chart-data="lineChartData" />
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <pie-chart :chart-data="pieChartData" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bar-chart :chart-data="barChartData" />
          </div>
        </el-col>
      </el-row>
      <div v-if="error" class="chart-wrapper">{{ error }}</div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import { getDashboardStats } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      loading: true,
      error: '',
      lineChartData: {
        expectedData: [],
        actualData: [],
        xAxis: []
      },
      allLineChartData: {}, // Store all fetched line chart data
      panelData: {
        students: 0,
        organizations: 0,
        projects: 0,
        coupons: 0,
        projects_active: 0,
        banners_active: 0,
        showcases_active: 0
      },
      pieChartData: [],
      barChartData: {
        title: '热门机构',
        names: [],
        counts: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      this.error = ''
      getDashboardStats().then(response => {
        const data = response.data
        this.panelData = data.panel_data
        this.allLineChartData = data.line_chart_data
        // Default to organizations line chart
        this.lineChartData = this.allLineChartData.organizations || this.allLineChartData.students
        this.pieChartData = data.pie_chart_data
        this.barChartData = data.bar_chart_data
        this.loading = false
      }).catch(error => {
        console.error('Failed to fetch dashboard stats:', error)
        this.error = '数据加载失败，请稍后重试'
        this.loading = false
      })
    },
    handleSetLineChartData(type) {
      if (this.allLineChartData[type]) {
        this.lineChartData = this.allLineChartData[type]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
