EmailBill/Web/src/components/Budget/BudgetChartAnalysis.vue

<template>
  <div class="chart-analysis-container">
    <!-- 仪表盘：整体健康度 -->
    <div class="gauges-row">
      <!-- 月度仪表盘 -->
      <div class="chart-card gauge-card">
        <div class="chart-header">
          <div class="chart-title">
            <!-- 月度健康度 -->
            {{ activeTab === BudgetCategory.Expense ? '使用情况' : '完成情况' }}
            (月度)
          </div>
        </div>
        <div
          ref="monthGaugeRef"
          class="chart-body gauge-chart"
          :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
        />
        <div class="gauge-footer compact">
          <div class="gauge-item">
            <span class="label">
              {{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
            </span>
            <span class="value expense">¥{{ formatMoney(overallStats.month.current) }}</span>
          </div>
          <div class="gauge-item">
            <span class="label">
              {{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
            </span>
            <span class="value">¥{{ formatMoney(overallStats.month.limit) }}</span>
          </div>
        </div>
      </div>

      <!-- 年度仪表盘 -->
      <div class="chart-card gauge-card">
        <div class="chart-header">
          <div class="chart-title">
            {{ activeTab === BudgetCategory.Expense ? '使用情况' : '完成情况' }}
            (年度)
          </div>
        </div>
        <div
          ref="yearGaugeRef"
          class="chart-body gauge-chart"
          :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
        />
        <div class="gauge-footer compact">
          <div class="gauge-item">
            <span class="label">
              {{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
            </span>
            <span class="value expense">¥{{ formatMoney(overallStats.year.current) }}</span>
          </div>
          <div class="gauge-item">
            <span class="label">
              {{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
            </span>
            <span class="value">¥{{ formatMoney(overallStats.year.limit) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 月度预算进度 -->
    <div
      v-if="budgets.length > 0"
      class="chart-card"
    >
      <div class="chart-header">
        <div class="chart-title">
          预算进度（月度）
        </div>
        <div class="chart-subtitle">
          预算剩余消耗趋势
        </div>
      </div>
      <div
        ref="burndownChartRef"
        class="chart-body burndown-chart"
      />
      <div class="expand-toggle-row">
        <div
          class="expand-toggle"
          @click="monthVarianceExpanded = !monthVarianceExpanded"
        >
          <span
            class="expand-icon"
            :class="{ expanded: monthVarianceExpanded }"
          >
            ▼
          </span>
          <span class="expand-text">{{ monthVarianceExpanded ? '收起偏差分析' : '展开偏差分析' }}</span>
        </div>
      </div>
      <div
        v-if="monthVarianceExpanded"
        ref="monthVarianceChartRef"
        class="chart-body variance-chart"
        :style="{ height: calculateChartHeight(monthBudgets) + 'px' }"
      />
    </div>

    <!-- 年度预算进度 -->
    <div
      v-if="budgets.length > 0"
      class="chart-card"
      style="margin-top: 12px"
    >
      <div class="chart-header">
        <div class="chart-title">
          预算进度（年度）
        </div>
        <div class="chart-subtitle">
          本年各预算执行情况
        </div>
      </div>
      <div
        ref="yearBurndownChartRef"
        class="chart-body burndown-chart"
      />
      <div class="expand-toggle-row">
        <div
          class="expand-toggle"
          @click="yearVarianceExpanded = !yearVarianceExpanded"
        >
          <span
            class="expand-icon"
            :class="{ expanded: yearVarianceExpanded }"
          >
            ▼
          </span>
          <span class="expand-text">{{ yearVarianceExpanded ? '收起偏差分析' : '展开偏差分析' }}</span>
        </div>
      </div>
      <div
        v-if="yearVarianceExpanded"
        ref="yearVarianceChartRef"
        class="chart-body variance-chart"
        :style="{ height: calculateChartHeight(yearBudgets) + 'px' }"
      />
    </div>

    <!-- 空状态占位 -->
    <div
      v-else-if="budgets.length === 0"
      class="chart-card empty-card"
    >
      <van-empty
        description="暂无预算数据"
        image="search"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted, computed } from 'vue'
import * as echarts from 'echarts'
import { BudgetCategory } from '@/constants/enums'
import { getCssVar } from '@/utils/theme'

const props = defineProps({
  overallStats: {
    type: Object,
    required: true
  },
  budgets: {
    type: Array,
    default: () => []
  },
  activeTab: {
    type: [Number, String],
    default: BudgetCategory.Expense
  }
})

const monthGaugeRef = ref(null)
const yearGaugeRef = ref(null)
const monthVarianceChartRef = ref(null)
const yearVarianceChartRef = ref(null)
const burndownChartRef = ref(null)
const yearBurndownChartRef = ref(null)

const monthVarianceExpanded = ref(false)
const yearVarianceExpanded = ref(false)

let monthGaugeChart = null
let yearGaugeChart = null
let monthVarianceChart = null
let yearVarianceChart = null
let burndownChart = null
let yearBurndownChart = null

const monthBudgets = computed(() => (props.budgets || []).filter(b => b.type === 1))
const yearBudgets = computed(() => (props.budgets || []).filter(b => b.type === 2))

const formatMoney = (val) => {
  if (Math.abs(val) >= 10000) {
    return (val / 10000).toFixed(1) + 'w'
  }
  return parseFloat(val || 0).toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  })
}

const initGaugeChart = (chartInstance, dom, data, isExpense) => {
  if (!dom) { return null }

  const chart = echarts.init(dom)
  updateSingleGauge(chart, data, isExpense)
  return chart
}

const updateSingleGauge = (chart, data, isExpense) => {
  if (!chart) { return }

  const rate = parseFloat(data.rate || 0)
  // 展示逻辑：支出显示剩余，收入显示已积累
  let displayRate
  if (isExpense) {
    // 支出：显示剩余容量 (100% - 已消耗%)，随支出增大逐渐消耗
    displayRate = Math.max(0, 100 - rate)
  } else {
    // 收入：显示已积累 (%)，随收入增多逐渐增多
    displayRate = Math.min(100, rate)
  }

  // 颜色逻辑：支出从绿色消耗到红色，收入从红色积累到绿色
  let color
  if (isExpense) {
    // 支出：满格绿色，随消耗逐渐变红 (根据剩余容量)
    if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
    else if (displayRate <= 65) { color = getCssVar('--chart-warning') } // 橙色
    else { color = getCssVar('--chart-success') } // 绿色
  } else {
    // 收入：空红色，随积累逐渐变绿 (根据已积累)
    if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
    else if (displayRate <= 65) { color = getCssVar('--chart-warning') } // 橙色
    else { color = getCssVar('--chart-success') } // 绿色
  }

  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        radius: '110%', // 放大一点以适应小卡片
        center: ['50%', '75%'],
        itemStyle: {
          color: color,
          shadowColor: getCssVar('--chart-shadow'),
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        progress: {
          show: true,
          roundCap: true,
          width: 12 // 变细一点
        },
        pointer: { show: false },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 12,
            color: [[1, getCssVar('--chart-axis')]]
          }
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        detail: {
          valueAnimation: true,
          fontSize: 24, // 字体调小
          offsetCenter: [0, -5],
          color: 'var(--van-text-color)',
          formatter: '{value}%',
          fontWeight: 'bold',
          fontFamily: 'DIN Alternate, system-ui'
        },
        data: [{ value: displayRate }]
      }
    ]
  }

  chart.setOption(option)
}

const updateCharts = () => {
  const isExpense = props.activeTab === BudgetCategory.Expense
  updateSingleGauge(monthGaugeChart, props.overallStats.month, isExpense)
  updateSingleGauge(yearGaugeChart, props.overallStats.year, isExpense)

  if (props.budgets.length > 0) {
    // Update Variance Charts
    if (!monthVarianceChart && monthVarianceChartRef.value && monthVarianceExpanded.value) {
      monthVarianceChart = echarts.init(monthVarianceChartRef.value)
    }
    if (monthVarianceChart) {
      updateVarianceChart(monthVarianceChart, monthBudgets.value)
    }

    if (!yearVarianceChart && yearVarianceChartRef.value && yearVarianceExpanded.value) {
      yearVarianceChart = echarts.init(yearVarianceChartRef.value)
    }
    if (yearVarianceChart) {
      updateVarianceChart(yearVarianceChart, yearBudgets.value)
    }

    // 更新燃尽图/积累图
    if (!burndownChart && burndownChartRef.value) {
      burndownChart = echarts.init(burndownChartRef.value)
    }
    updateBurndownChart()

    if (!yearBurndownChart && yearBurndownChartRef.value) {
      yearBurndownChart = echarts.init(yearBurndownChartRef.value)
    }
    updateYearBurndownChart()
  }
}

const updateVarianceChart = (chart, budgets) => {
  if (!chart || !budgets || budgets.length === 0) { return }

  const data = budgets.map(b => {
    const limit = b.limit || 0
    const current = b.current || 0
    const diff = current - limit
    return {
      name: b.name,
      value: diff,
      limit: limit,
      current: current
    }
  })

  // Sort by absolute variance
  data.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))

  const categories = data.map(item => item.name)
  const values = data.map(item => item.value)
  const maxVal = Math.max(...values.map(v => Math.abs(v))) || 1

  const textColor = getCssVar('--van-text-color')
  const splitLineColor = getCssVar('--chart-split')

  const option = {
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const item = data[params[0].dataIndex]
        let html = `${item.name}<br/>`
        html += `预算: ¥${formatMoney(item.limit)}<br/>`
        html += `实际: ¥${formatMoney(item.current)}<br/>`
        const diffText = item.value > 0 ? `超支: ¥${formatMoney(item.value)}` : `结余: ¥${formatMoney(Math.abs(item.value))}`
        const color = item.value > 0 ? getCssVar('--van-danger-color') : getCssVar('--van-success-color')
        html += `<span style="color:${color};font-weight:bold">${diffText}</span>`
        return html
      }
    },
    xAxis: {
      type: 'value',
      position: 'top',
      axisLine: { show: false },
      axisLabel: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: splitLineColor
        }
      }
    },
    yAxis: {
      type: 'category',
      axisTick: { show: false },
      axisLine: { show: false },
      data: categories,
      axisLabel: {
        color: textColor,
        width: 60,
        overflow: 'truncate'
      }
    },
    series: [
      {
        name: '偏差',
        type: 'bar',
        stack: 'Total',
        barWidth: 20, // Fixed bar width
        data: values.map((val) => {
          // 如果柱子太短（小于25%），文字显示在外部，否则显示在内部
          const ratio = Math.abs(val) / maxVal
          const isShort = ratio < 0.25
          let position
          let color

          if (val >= 0) {
            position = isShort ? 'right' : 'insideLeft'
          } else {
            position = isShort ? 'left' : 'insideRight'
          }

          // eslint-disable-next-line prefer-const
          color = isShort ? textColor : '#fff'

          return {
            value: val,
            label: {
              position: position,
              color: color
            }
          }
        }),
        label: {
          show: true,
          formatter: (params) => {
            const val = params.value
            return val > 0 ? `+${formatMoney(val)}` : formatMoney(val)
          },
          color: textColor
        },
        itemStyle: {
          borderRadius: 4,
          color: (params) => {
            const val = params.value
            if (props.activeTab === BudgetCategory.Expense) {
              return val > 0 ? getCssVar('--van-danger-color') : getCssVar('--van-success-color')
            } else {
              return val > 0 ? getCssVar('--van-success-color') : getCssVar('--van-danger-color')
            }
          }
        }
      }
    ]
  }

  chart.setOption(option)
}

const calculateChartHeight = (budgets) => {
  if (!budgets) { return 100 }
  const dataCount = budgets.length
  const minHeight = 100
  const heightPerItem = 30 // Fixed height per bar item
  const calculatedHeight = Math.max(minHeight, dataCount * heightPerItem)
  return calculatedHeight
}

const updateBurndownChart = () => {
  if (!burndownChart) { return }

  // 获取当前月份的日期
  const today = new Date()
  const year = today.getFullYear()
  const month = today.getMonth()
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  const currentDay = today.getDate()
  const isExpense = props.activeTab === BudgetCategory.Expense

  // 生成日期和理想燃尽线/积累线
  const dates = []
  const idealBurndown = []
  const actualBurndown = []

  const totalBudget = props.overallStats.month.limit || 0
  const currentExpense = props.overallStats.month.current || 0
  const trend = props.overallStats.month.trend || []

  for (let i = 1; i <= daysInMonth; i++) {
    dates.push(`${i}日`)

    if (isExpense) {
      // 支出：燃尽图（向下走）
      // 理想燃尽：每天均匀消耗
      const idealRemaining = Math.max(0, totalBudget * (1 - i / daysInMonth))
      idealBurndown.push(Math.round(idealRemaining))

      // 实际燃尽：根据当前日期显示
      if (trend.length > 0) {
        const dayValue = trend[i - 1]
        if (dayValue !== undefined && dayValue !== null) {
          const actualRemaining = Math.max(0, totalBudget - dayValue)
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      } else {
        if (i <= currentDay && totalBudget > 0) {
          const actualRemaining = Math.max(0, totalBudget - (currentExpense * i / currentDay))
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      }
    } else {
      // 收入：积累图（向上走）
      // 理想积累：每天均匀积累
      const idealAccumulated = Math.min(totalBudget, totalBudget * (i / daysInMonth))
      idealBurndown.push(Math.round(idealAccumulated))

      // 实际积累：根据当前日期显示
      if (trend.length > 0) {
        const dayValue = trend[i - 1]
        if (dayValue !== undefined && dayValue !== null) {
          actualBurndown.push(Math.round(dayValue))
        } else {
          actualBurndown.push(null)
        }
      } else {
        if (i <= currentDay && totalBudget > 0) {
          const actualAccumulated = Math.min(totalBudget, currentExpense * i / currentDay)
          actualBurndown.push(Math.round(actualAccumulated))
        } else {
          actualBurndown.push(null)
        }
      }
    }
  }

  const splitLineColor = getCssVar('--chart-split')
  const axisLabelColor = getCssVar('--chart-text-muted')

  const idealSeriesName = isExpense ? '理想燃尽' : '理想积累'
  const actualSeriesName = isExpense ? '实际燃尽' : '实际积累'

  const option = {
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        color: axisLabelColor,
        interval: 'auto',
        rotate: 0
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: splitLineColor
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: axisLabelColor,
        formatter: (value) => {
          if (value >= 10000) { return (value / 10000).toFixed(0) + 'w' }
          return value
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: splitLineColor
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let result = params[0].name + '<br/>'
        params.forEach(param => {
          if (param.value !== null && param.value !== undefined) {
            result += param.marker + param.seriesName + ': ¥' + (param.value >= 10000 ? (param.value / 10000).toFixed(1) + 'w' : param.value) + '<br/>'
          }
        })
        return result
      }
    },
    series: [
      {
        name: idealSeriesName,
        type: 'line',
        data: idealBurndown,
        smooth: false,
        lineStyle: {
          color: getCssVar('--chart-warning'),
          width: 2,
          type: 'dashed'
        },
        itemStyle: {
          color: getCssVar('--chart-warning')
        },
        z: 1
      },
      {
        name: actualSeriesName,
        type: 'line',
        data: actualBurndown,
        smooth: false,
        lineStyle: {
          color: getCssVar('--chart-primary'),
          width: 2
        },
        itemStyle: {
          color: getCssVar('--chart-primary')
        },
        z: 2
      }
    ]
  }

  burndownChart.setOption(option)
}

const updateYearBurndownChart = () => {
  if (!yearBurndownChart) { return }

  // 获取当前年份的日期
  const today = new Date()
  const year = today.getFullYear()
  const currentMonth = today.getMonth()
  const currentDay = today.getDate()
  const daysInCurrentMonth = new Date(year, currentMonth + 1, 0).getDate()
  const isExpense = props.activeTab === BudgetCategory.Expense

  // 生成月份和理想燃尽线/积累线
  const months = []
  const idealBurndown = []
  const actualBurndown = []

  const totalBudget = props.overallStats.year.limit || 0
  const currentExpense = props.overallStats.year.current || 0
  const trend = props.overallStats.year.trend || []

  for (let i = 0; i < 12; i++) {
    months.push(`${i + 1}月`)

    // 计算当前时间进度（基于天数）
    let daysPassedInYear = 0
    let daysInYear = 0

    for (let j = 0; j < i; j++) {
      daysInYear += new Date(year, j + 1, 0).getDate()
    }

    if (i < currentMonth) {
      // 之前的月份都已完成
      daysPassedInYear = daysInYear + new Date(year, i + 1, 0).getDate()
    } else if (i === currentMonth) {
      // 当前月份
      daysPassedInYear = daysInYear + currentDay
      daysInYear += daysInCurrentMonth
    } else {
      // 未来的月份
      daysInYear += new Date(year, i + 1, 0).getDate()
    }

    // 全年总天数（365或366）
    const daysInYearTotal = new Date(year, 12, 0).getDate() === 29 ? 366 : 365
    const yearProgress = i === 11 ? 1 : daysPassedInYear / daysInYearTotal

    if (isExpense) {
      // 支出：燃尽图（向下走）
      // 理想燃尽：每月均匀消耗
      const idealRemaining = Math.max(0, totalBudget * (1 - (i + 1) / 12))
      idealBurndown.push(Math.round(idealRemaining))

      // 实际燃尽：根据当前日期显示
      if (trend.length > 0) {
        const monthValue = trend[i]
        if (monthValue !== undefined && monthValue !== null) {
          const actualRemaining = Math.max(0, totalBudget - monthValue)
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      } else {
        if ((i < currentMonth || (i === currentMonth && currentDay > 0)) && totalBudget > 0) {
          const actualRemaining = Math.max(0, totalBudget - (currentExpense * yearProgress))
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      }
    } else {
      // 收入：积累图（向上走）
      // 理想积累：每月均匀积累
      const idealAccumulated = Math.min(totalBudget, totalBudget * ((i + 1) / 12))
      idealBurndown.push(Math.round(idealAccumulated))

      // 实际积累：根据当前日期显示
      if (trend.length > 0) {
        const monthValue = trend[i]
        if (monthValue !== undefined && monthValue !== null) {
          actualBurndown.push(Math.round(monthValue))
        } else {
          actualBurndown.push(null)
        }
      } else {
        if ((i < currentMonth || (i === currentMonth && currentDay > 0)) && totalBudget > 0) {
          const actualAccumulated = Math.min(totalBudget, currentExpense * yearProgress)
          actualBurndown.push(Math.round(actualAccumulated))
        } else {
          actualBurndown.push(null)
        }
      }
    }
  }

  const splitLineColor = getCssVar('--chart-split')
  const axisLabelColor = getCssVar('--chart-text-muted')

  const idealSeriesName = isExpense ? '理想支出' : '理想收入'
  const actualSeriesName = isExpense ? '实际支出' : '实际收入'

  const option = {
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLabel: {
        color: axisLabelColor
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: splitLineColor
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: axisLabelColor,
        formatter: (value) => {
          if (value >= 10000) { return (value / 10000).toFixed(0) + 'w' }
          return value
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: splitLineColor
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let result = params[0].name + '<br/>'
        params.forEach(param => {
          if (param.value !== null && param.value !== undefined) {
            result += param.marker + param.seriesName + ': ¥' + (param.value >= 10000 ? (param.value / 10000).toFixed(1) + 'w' : param.value) + '<br/>'
          }
        })
        return result
      }
    },
    series: [
      {
        name: idealSeriesName,
        type: 'line',
        data: idealBurndown,
        smooth: false,
        lineStyle: {
          color: getCssVar('--chart-warning'),
          width: 2,
          type: 'dashed'
        },
        itemStyle: {
          color: getCssVar('--chart-warning')
        },
        z: 1
      },
      {
        name: actualSeriesName,
        type: 'line',
        data: actualBurndown,
        smooth: false,
        lineStyle: {
          color: getCssVar('--chart-primary'),
          width: 2
        },
        itemStyle: {
          color: getCssVar('--chart-primary')
        },
        z: 2
      }
    ]
  }

  yearBurndownChart.setOption(option)
}

watch(() => props.overallStats, () => nextTick(updateCharts), { deep: true })
watch(() => props.budgets, () => {
  nextTick(() => {
    updateCharts()
  })
}, { deep: true })

watch(() => props.activeTab, () => {
  nextTick(() => {
    updateCharts()
    // 切换标签后延迟 resize，确保 DOM 已更新
    setTimeout(() => {
      burndownChart?.resize()
      yearBurndownChart?.resize()
      monthVarianceChart?.resize()
      yearVarianceChart?.resize()
    }, 100)
  })
})

// 监听展开/折叠状态
watch(() => monthVarianceExpanded.value, (expanded) => {
  if (expanded) {
    nextTick(() => {
      if (monthVarianceChartRef.value) {
        if (!monthVarianceChart) {
          monthVarianceChart = echarts.init(monthVarianceChartRef.value)
        }
        updateVarianceChart(monthVarianceChart, monthBudgets.value)
        monthVarianceChart.resize()
      }
    })
  } else {
    // 收起时销毁图表实例，释放内存
    if (monthVarianceChart) {
      monthVarianceChart.dispose()
      monthVarianceChart = null
    }
  }
})

watch(() => yearVarianceExpanded.value, (expanded) => {
  if (expanded) {
    nextTick(() => {
      if (yearVarianceChartRef.value) {
        if (!yearVarianceChart) {
          yearVarianceChart = echarts.init(yearVarianceChartRef.value)
        }
        updateVarianceChart(yearVarianceChart, yearBudgets.value)
        yearVarianceChart.resize()
      }
    })
  } else {
    // 收起时销毁图表实例，释放内存
    if (yearVarianceChart) {
      yearVarianceChart.dispose()
      yearVarianceChart = null
    }
  }
})

const handleResize = () => {
  monthGaugeChart?.resize()
  yearGaugeChart?.resize()
  monthVarianceChart?.resize()
  yearVarianceChart?.resize()
  burndownChart?.resize()
  yearBurndownChart?.resize()
}

onMounted(() => {
  nextTick(() => {
    const isExpense = props.activeTab === BudgetCategory.Expense
    monthGaugeChart = initGaugeChart(monthGaugeChart, monthGaugeRef.value, props.overallStats.month, isExpense)
    yearGaugeChart = initGaugeChart(yearGaugeChart, yearGaugeRef.value, props.overallStats.year, isExpense)
    // 只在有数据时初始化柱状图
    if (props.budgets.length > 0) {
      // Variance charts are initialized when expanded, or if we want to init them eagerly?
      // Based on watch logic, we init when expanded.
      // But updateCharts logic tries to update if exists.

      // 初始化燃尽图/积累图
      if (burndownChartRef.value) {
        burndownChart = echarts.init(burndownChartRef.value)
        updateBurndownChart()
      }

      if (yearBurndownChartRef.value) {
        yearBurndownChart = echarts.init(yearBurndownChartRef.value)
        updateYearBurndownChart()
      }
    }
    window.addEventListener('resize', handleResize)
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  monthGaugeChart?.dispose()
  yearGaugeChart?.dispose()
  monthVarianceChart?.dispose()
  yearVarianceChart?.dispose()
  burndownChart?.dispose()
  yearBurndownChart?.dispose()
})
</script>

<style scoped>
.chart-analysis-container {
  padding: 12px;
  padding-bottom: 80px;
}

.gauges-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-card {
  background: var(--van-background-2);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gauge-card {
  flex: 1;
  min-width: 0;
  /* 防止 flex 子项溢出 */
  padding: 12px;
  /* 减小内边距 */
}

.chart-header {
  margin-bottom: 12px;
}

.chart-title {
  font-size: 14px;
  /* 调小标题 */
  font-weight: 600;
  color: var(--van-text-color);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-subtitle {
  font-size: 10px;
  color: var(--van-text-color-2);
}

.chart-body {
  width: 100%;
}

.gauge-chart {
  height: 120px;
  /* 调小高度 */
}

.variance-chart {
  min-height: 200px;
}

.burndown-chart {
  height: 230px;
}

.gauge-footer {
  display: flex;
  justify-content: space-around;
  /* 分散对齐 */
  align-items: center;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gauge-item .label {
  font-size: 10px;
  color: var(--van-text-color-2);
  transform: scale(0.9);
  /* 视觉上更小 */
}

.gauge-item .value {
  font-size: 12px;
  font-weight: 600;
  font-family: DIN Alternate, system-ui;
  color: var(--van-text-color);
}

.gauge-item .value.expense {
  color: var(--van-primary-color);
}

.expand-toggle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.expand-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  user-select: none;
}

.expand-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.expand-toggle:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.expand-icon {
  display: inline-block;
  font-size: 12px;
  color: var(--van-text-color-2);
  transition: transform 0.2s ease;
  transform-origin: center;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.expand-text {
  font-size: 12px;
  color: var(--van-text-color-2);
  transition: color 0.2s ease;
}

.expand-toggle:hover .expand-text {
  color: var(--van-text-color);
}
</style>