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 ? '使用情况（月度）' : '完成情况（月度）' }}
            <van-icon
              name="info-o"
              size="16"
              color="var(--van-primary-color)"
              style="margin-left: auto; cursor: pointer"
              @click="showDescriptionPopup = true; activeDescTab = 'month'"
            />
          </div>
        </div>
        <div class="gauge-wrapper">
          <BaseChart
            type="doughnut"
            :data="monthGaugeData"
            :options="monthGaugeOptions"
            :plugins="[chartjsGaugePlugin]"
            :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
          />
          <div class="gauge-text-overlay">
            <div
              class="remaining-label"
            >
              {{
                activeTab === BudgetCategory.Expense
                  ? (
                    overallStats.month.current > overallStats.month.limit
                      ? '超支'
                      : '余额'
                  )
                  : overallStats.month.current > overallStats.month.limit
                    ? '超额'
                    : '差额'
              }}
            </div>
            <div
              class="remaining-value"
              :style="{ color:
                overallStats.month.current > overallStats.month.limit
                  ? activeTab === BudgetCategory.Expense ? 'var(--van-danger-color)' : 'var(--van-success-color)'
                  : ''
              }"
            >
              ¥{{ formatMoney(Math.abs(overallStats.month.limit - overallStats.month.current)) }}
            </div>
          </div>
        </div>
        <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 ? '使用情况（年度）' : '完成情况（年度）' }}
            <van-icon
              name="info-o"
              size="16"
              color="var(--van-primary-color)"
              style="margin-left: auto; cursor: pointer"
              @click="showDescriptionPopup = true; activeDescTab = 'year'"
            />
          </div>
        </div>
        <div class="gauge-wrapper">
          <BaseChart
            type="doughnut"
            :data="yearGaugeData"
            :options="yearGaugeOptions"
            :plugins="[chartjsGaugePlugin]"
            :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
          />
          <div class="gauge-text-overlay">
            <div
              class="remaining-label"
            >
              {{ activeTab === BudgetCategory.Expense ? (overallStats.year.current > overallStats.year.limit ? '超支' : '余额') : '差额' }}
            </div>
            <div
              class="remaining-value"
              :style="{ color: activeTab === BudgetCategory.Expense && overallStats.year.current > overallStats.year.limit ? 'var(--van-danger-color)' : '' }"
            >
              ¥{{ formatMoney(Math.abs(overallStats.year.limit - overallStats.year.current)) }}
            </div>
          </div>
        </div>
        <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>
      <BaseChart
        type="line"
        :data="burndownChartData"
        :options="burndownChartOptions"
        class="chart-body burndown-chart"
      />
    </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>
      <BaseChart
        type="line"
        :data="yearBurndownChartData"
        :options="yearBurndownChartOptions"
        class="chart-body burndown-chart"
      />
    </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>
      <BaseChart
        type="bar"
        :data="varianceChartData"
        :options="varianceChartOptions"
        class="chart-body variance-chart"
        :style="{ height: calculateChartHeight(budgets) + 'px' }"
      />
    </div>

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

  <!-- 详细描述弹窗 -->
  <PopupContainer
    v-model="showDescriptionPopup"
    :title="activeDescTab === 'month' ? '预算额度/实际详情（月度）' : '预算额度/实际详情（年度）'"
    height="70%"
  >
    <div
      class="rich-html-content"
      style="padding: 16px"
      v-html="activeDescTab === 'month' ? (overallStats.month?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>') : (overallStats.year?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>')"
    />
  </PopupContainer>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted, computed } from 'vue'
import { BudgetCategory, BudgetPeriodType } from '@/constants/enums'
import { getCssVar } from '@/utils/theme'
import PopupContainer from '@/components/PopupContainer.vue'
import BaseChart from '@/components/Charts/BaseChart.vue'
import { useChartTheme } from '@/composables/useChartTheme'
import { chartjsGaugePlugin } from '@/plugins/chartjs-gauge-plugin'

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

// 弹窗状态
const showDescriptionPopup = ref(false)
const activeDescTab = ref('month')

// Chart.js 相关
const { getChartOptions } = useChartTheme()

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 monthGaugeData = computed(() => {
  const rate = parseFloat(props.overallStats.month.rate || 0)
  const isExpense = props.activeTab === BudgetCategory.Expense

  let displayRate
  if (isExpense) {
    displayRate = Math.max(0, 100 - rate)
    if (rate > 100) {
      displayRate = rate - 100
    }
  } else {
    displayRate = rate
  }

  let color
  if (isExpense) {
    if (rate > 100) {
      color = getCssVar('--chart-danger')
    } else 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 maxValue = isExpense && rate > 100 ? 50 : 100
  const remaining = 100 - displayRate

  return {
    datasets: [
      {
        data: [displayRate, remaining],
        backgroundColor: [color, getCssVar('--chart-axis')],
        borderWidth: 0,
        circumference: 180,
        rotation: 270
      }
    ]
  }
})

const monthGaugeOptions = computed(() => {
  return {
    cutout: '75%',
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    }
  }
})

// 年度仪表盘数据
const yearGaugeData = computed(() => {
  const rate = parseFloat(props.overallStats.year.rate || 0)
  const isExpense = props.activeTab === BudgetCategory.Expense

  let displayRate
  if (isExpense) {
    displayRate = Math.max(0, 100 - rate)
    if (rate > 100) {
      displayRate = rate - 100
    }
  } else {
    displayRate = rate
  }

  let color
  if (isExpense) {
    if (rate > 100) {
      color = getCssVar('--chart-danger')
    } else 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 remaining = 100 - displayRate

  return {
    datasets: [
      {
        data: [displayRate, remaining],
        backgroundColor: [color, getCssVar('--chart-axis')],
        borderWidth: 0,
        circumference: 180,
        rotation: 270
      }
    ]
  }
})

const yearGaugeOptions = computed(() => {
  return {
    cutout: '75%',
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    }
  }
})

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

// 偏差分析图表数据
const varianceChartData = computed(() => {
  if (!props.budgets || props.budgets.length === 0) {
    return { labels: [], datasets: [] }
  }

  const data = props.budgets.map(b => {
    const limit = b.limit || 0
    const current = b.current || 0
    const diff = current - limit
    return {
      name: b.name + (b.type === BudgetPeriodType.Year ? ' (年)' : ''),
      value: diff,
      limit: limit,
      current: current,
      type: b.type
    }
  })

  const monthlyData = data.filter(item => item.type === BudgetPeriodType.Month)
  const annualData = data.filter(item => item.type === BudgetPeriodType.Year)

  monthlyData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
  annualData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))

  const sortedData = [...annualData, ...monthlyData]

  return {
    labels: sortedData.map(item => item.name),
    datasets: [
      {
        label: '偏差',
        data: sortedData.map(item => item.value),
        backgroundColor: sortedData.map(item => {
          if (props.activeTab === BudgetCategory.Expense) {
            return item.value > 0 ? getCssVar('--van-danger-color') : getCssVar('--van-success-color')
          } else {
            return item.value > 0 ? getCssVar('--van-success-color') : getCssVar('--van-danger-color')
          }
        }),
        borderRadius: 4,
        barThickness: 20,
        _meta: sortedData
      }
    ]
  }
})

const varianceChartOptions = computed(() => {
  return getChartOptions({
    indexAxis: 'y',
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            const item = context.dataset._meta[context.dataIndex]
            const diffText = item.value > 0
              ? `超支: ¥${formatMoney(item.value)}`
              : `结余: ¥${formatMoney(Math.abs(item.value))}`
            return [
              `预算: ¥${formatMoney(item.limit)}`,
              `实际: ¥${formatMoney(item.current)}`,
              diffText
            ]
          }
        }
      }
    },
    scales: {
      x: {
        display: false
      },
      y: {
        ticks: {
          autoSkip: false,
          callback: function (value, index) {
            const label = this.getLabelForValue(index)
            return label.length > 10 ? label.substring(0, 10) + '...' : label
          }
        }
      }
    }
  })
})

// 月度燃尽图数据
const burndownChartData = computed(() => {
  const refDate = props.selectedDate
  const year = refDate.getFullYear()
  const month = refDate.getMonth()
  const daysInMonth = new Date(year, month + 1, 0).getDate()

  const now = new Date()
  const isCurrentMonth = now.getFullYear() === year && now.getMonth() === month
  const isPastMonth =
    now.getFullYear() > year || (now.getFullYear() === year && now.getMonth() > month)
  const currentDay = isCurrentMonth ? now.getDate() : isPastMonth ? daysInMonth : 0
  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 = 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 = totalBudget - dayValue
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      } else {
        if (i <= currentDay && totalBudget > 0) {
          const actualRemaining = 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 idealSeriesName = isExpense ? '理想燃尽' : '理想积累'
  const actualSeriesName = isExpense ? '实际燃尽' : '实际积累'

  return {
    labels: dates,
    datasets: [
      {
        label: idealSeriesName,
        data: idealBurndown,
        borderColor: getCssVar('--chart-warning'),
        backgroundColor: getCssVar('--chart-warning'),
        borderWidth: 2,
        borderDash: [5, 5],
        tension: 0,
        pointRadius: 0
      },
      {
        label: actualSeriesName,
        data: actualBurndown,
        borderColor: getCssVar('--chart-primary'),
        backgroundColor: getCssVar('--chart-primary'),
        borderWidth: 2,
        tension: 0,
        pointRadius: 0
      }
    ]
  }
})

const burndownChartOptions = computed(() => {
  return getChartOptions({
    plugins: {
      legend: {
        display: true,
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            const value = context.parsed.y
            if (value !== null && value !== undefined) {
              return `${context.dataset.label}: ¥${formatMoney(value)}`
            }
            return ''
          }
        }
      }
    },
    scales: {
      y: {
        ticks: {
          callback: (value) => {
            if (value >= 10000) {
              return (value / 10000).toFixed(0) + 'w'
            }
            return value
          }
        }
      }
    }
  })
})

// 年度燃尽图数据
const yearBurndownChartData = computed(() => {
  const refDate = props.selectedDate
  const year = refDate.getFullYear()

  const now = new Date()
  const currentYear = now.getFullYear()
  const currentMonth = now.getMonth()
  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}月`)

    if (isExpense) {
      const idealRemaining = 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 = totalBudget - monthValue
          actualBurndown.push(Math.round(actualRemaining))
        } else {
          actualBurndown.push(null)
        }
      } else {
        const isFuture = year > currentYear || (year === currentYear && i > currentMonth)
        if (!isFuture && totalBudget > 0) {
          const progress = (i + 1) / 12
          const actualRemaining = totalBudget - (currentExpense * progress)
          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 {
        const isFuture = year > currentYear || (year === currentYear && i > currentMonth)
        if (!isFuture && totalBudget > 0) {
          const progress = (i + 1) / 12
          const actualAccumulated = Math.min(totalBudget, currentExpense * progress)
          actualBurndown.push(Math.round(actualAccumulated))
        } else {
          actualBurndown.push(null)
        }
      }
    }
  }

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

  return {
    labels: months,
    datasets: [
      {
        label: idealSeriesName,
        data: idealBurndown,
        borderColor: getCssVar('--chart-warning'),
        backgroundColor: getCssVar('--chart-warning'),
        borderWidth: 2,
        borderDash: [5, 5],
        tension: 0,
        pointRadius: 0
      },
      {
        label: actualSeriesName,
        data: actualBurndown,
        borderColor: getCssVar('--chart-primary'),
        backgroundColor: getCssVar('--chart-primary'),
        borderWidth: 2,
        tension: 0,
        pointRadius: 0
      }
    ]
  }
})

const yearBurndownChartOptions = computed(() => {
  return getChartOptions({
    plugins: {
      legend: {
        display: true,
        position: 'top'
      },
      tooltip: {
        callbacks: {
          label: (context) => {
            const value = context.parsed.y
            if (value !== null && value !== undefined) {
              return `${context.dataset.label}: ¥${formatMoney(value)}`
            }
            return ''
          }
        }
      }
    },
    scales: {
      y: {
        ticks: {
          callback: (value) => {
            if (value >= 10000) {
              return (value / 10000).toFixed(0) + 'w'
            }
            return value
          }
        }
      }
    }
  })
})
</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;
  /* 减小内边距 */
}

.gauge-wrapper {
  position: relative;
  width: 100%;
  height: 120px;
}

.gauge-text-overlay {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.remaining-value {
  font-size: 24px;
  font-weight: bold;
  font-family: DIN Alternate, system-ui;
  color: var(--van-text-color);
  line-height: 1;
  transform-origin: center;
}

.remaining-label {
  font-size: 10px;
  color: var(--van-text-color-2);
  margin-top: 4px;
  font-family: system-ui;
  transform-origin: center;
}

.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: 190px;
}

.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 styles removed as they are no longer used */
</style>