<template>
  <div class="financial-report-container">
    <el-row :gutter="20">
      <!-- 顶部统计卡片 -->
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-primary">
            <vab-icon icon="money-cny-circle-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">¥ 2,450,000</div>
            <div class="stat-label">本学年应收总额</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-success">
            <vab-icon icon="checkbox-circle-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">¥ 2,156,000</div>
            <div class="stat-label">实收金额 (88%)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-warning">
            <vab-icon icon="time-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">¥ 294,000</div>
            <div class="stat-label">待缴金额</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-danger">
            <vab-icon icon="refund-2-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">¥ 12,500</div>
            <div class="stat-label">本月退费金额</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 左侧收费构成 -->
      <el-col :span="8">
        <vab-card title="收费构成分析" class="chart-card">
          <vab-chart style="height: 300px;" :option="pieOptions" height="300px" />
        </vab-card>
      </el-col>
      
      <!-- 右侧缴费趋势 -->
      <el-col :span="16">
        <vab-card title="近12个月缴费趋势" class="chart-card">
          <vab-chart style="height: 300px;" :option="lineOptions" height="300px" />
        </vab-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 下方楼宇缴费率排名 -->
      <el-col :span="24">
        <vab-card title="各楼宇缴费率排名">
          <el-table :data="rankingData" border stripe>
            <el-table-column type="index" label="排名" width="80" align="center" />
            <el-table-column prop="building" label="楼宇名称" />
            <el-table-column prop="total" label="应收金额" align="right">
              <template #default="{ row }">¥ {{ row.total.toLocaleString() }}</template>
            </el-table-column>
            <el-table-column prop="actual" label="实收金额" align="right">
              <template #default="{ row }">¥ {{ row.actual.toLocaleString() }}</template>
            </el-table-column>
            <el-table-column prop="rate" label="缴费率" width="200">
              <template #default="{ row }">
                <el-progress :percentage="row.rate" :status="getRateStatus(row.rate)" />
              </template>
            </el-table-column>
          </el-table>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

defineOptions({
  name: 'FinancialReport',
})

// --- Mock Charts ---
const pieOptions = reactive({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [
    {
      name: '费用类型',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
      data: [
        { value: 1500000, name: '住宿费' },
        { value: 450000, name: '水电费' },
        { value: 120000, name: '网络费' },
        { value: 80000, name: '押金' },
      ]
    }
  ]
})

const lineOptions = reactive({
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '缴费金额',
      type: 'line',
      stack: 'Total',
      smooth: true,
      areaStyle: {},
      emphasis: { focus: 'series' },
      data: [12000, 15000, 8000, 9000, 11000, 5000, 350000, 1200000, 450000, 50000, 40000, 20000]
    }
  ]
})

// --- Mock Table Data ---
const rankingData = [
  { building: '北区1号楼', total: 480000, actual: 475200, rate: 99.0 },
  { building: '南区A栋', total: 320000, actual: 310400, rate: 97.0 },
  { building: '北区2号楼', total: 480000, actual: 456000, rate: 95.0 },
  { building: '教工公寓', total: 200000, actual: 180000, rate: 90.0 },
  { building: '南区B栋', total: 320000, actual: 256000, rate: 80.0 },
]

const getRateStatus = (rate) => {
  if (rate >= 95) return 'success'
  if (rate >= 85) return 'warning'
  return 'exception'
}
</script>

<style lang="scss" scoped>
.financial-report-container {
  .stat-card {
    margin-bottom: 20px;
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      padding: 20px;
    }

    .stat-icon {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      
      .vab-icon {
        font-size: 36px;
        color: #fff;
      }

      &.bg-primary { background: linear-gradient(135deg, #409eff, #79bbff); }
      &.bg-success { background: linear-gradient(135deg, #67c23a, #95d475); }
      &.bg-warning { background: linear-gradient(135deg, #e6a23c, #eebe77); }
      &.bg-danger { background: linear-gradient(135deg, #f56c6c, #f89898); }
    }

    .stat-info {
      .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1.2;
      }
      .stat-label {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }

  .chart-card {
    height: 380px;
    margin-bottom: 20px;
  }
}
</style>