<template>
  <div class="chart-test-page">
    <h3>📊 图表组件测试</h3>

    <div class="chart-grid">
      <!-- 子弹图测试 -->
      <el-card shadow="never">
        <template #header><span>🔥 实际 vs 目标（子弹图）</span></template>
        <div class="chart-list">
          <BulletChart actual="1280000" target="1500000" label="销售额" unit="元" />
          <BulletChart actual="85" target="100" label="预算执行率" unit="%" />
          <BulletChart actual="309393" target="500000" label="净利润" unit="元" />
        </div>
      </el-card>

      <!-- 仪表盘测试 -->
      <el-card shadow="never">
        <template #header><span>🎯 达标率（仪表盘）</span></template>
        <div class="chart-list">
          <GaugeChart actual="95" target="100" label="销售额达标率" unit="%" />
          <GaugeChart actual="62" target="100" label="毛利率达标率" unit="%" />
          <GaugeChart actual="38" target="100" label="净利润达标率" unit="%" />
        </div>
      </el-card>
    </div>

    <!-- 瀑布图测试 -->
    <el-card shadow="never" class="waterfall-section">
      <template #header><span>🌊 瀑布图 — 利润拆解</span></template>
      <div class="chart-container">
        <WaterfallChart :data="profitData" totalUnit="元" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import BulletChart from '../components/charts/BulletChart.vue'
import GaugeChart from '../components/charts/GaugeChart.vue'
import WaterfallChart from '../components/charts/WaterfallChart.vue'

const profitData = [
  { name: '营收', value: 1280000 },
  { name: '成本', value: -850000 },
  { name: '费用', value: -320000 },
  { name: '其他收入', value: 50000 },
  { name: '净利润', value: 160000 },
]
</script>

<style scoped>
.chart-test-page { padding: 30px; max-width: 1000px; margin: 0 auto; }
.chart-test-page h3 { margin-bottom: 20px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chart-list { display: flex; flex-direction: column; gap: 24px; }
.waterfall-section { margin-top: 24px; }
.chart-container { height: 300px; }
</style>
