<template>
  <div class="dashboard-container">
    <div class="chart-row">
      <div class="chart-container">
        <h2>用户增长趋势</h2>
        <div ref="lineChart" class="chart"></div>
      </div>

      <div class="chart-container">
        <h2>产品销售统计</h2>
        <div ref="barChart" class="chart"></div>
      </div>
    </div>

    <div class="chart-row">
      <div class="chart-container">
        <h2>用户分布比例</h2>
        <div ref="pieChart" class="chart"></div>
      </div>

      <div class="info-cards">
        <div class="info-card">
          <h3>总用户数</h3>
          <p class="number">12,345</p>
          <p class="trend up">↑ 12% 同比</p>
        </div>
        <div class="info-card">
          <h3>本月销售额</h3>
          <p class="number">¥ 456,789</p>
          <p class="trend up">↑ 8% 环比</p>
        </div>
        <div class="info-card">
          <h3>活跃用户</h3>
          <p class="number">8,642</p>
          <p class="trend down">↓ 3% 环比</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'Dashboard',
    mounted() {
      this.initLineChart();
      this.initBarChart();
      this.initPieChart();
    },
    methods: {
      initLineChart() {
        const chart = echarts.init(this.$refs.lineChart);
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新增用户', '活跃用户', '付费用户']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '新增用户',
              type: 'line',
              data: [120, 132, 101, 134, 90, 230, 210],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#5470C6'
              },
              itemStyle: {
                color: '#5470C6'
              }
            },
            {
              name: '活跃用户',
              type: 'line',
              data: [220, 182, 191, 234, 290, 330, 310],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#91CC75'
              },
              itemStyle: {
                color: '#91CC75'
              }
            },
            {
              name: '付费用户',
              type: 'line',
              data: [150, 232, 201, 154, 190, 330, 410],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#EE6666'
              },
              itemStyle: {
                color: '#EE6666'
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', function() {
          chart.resize();
        });
      },
      initBarChart() {
        const chart = echarts.init(this.$refs.barChart);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2022', '2023']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['产品A', '产品B', '产品C', '产品D', '产品E']
          },
          series: [
            {
              name: '2022',
              type: 'bar',
              data: [320, 302, 341, 374, 390],
              itemStyle: {
                color: '#91CC75'
              }
            },
            {
              name: '2023',
              type: 'bar',
              data: [420, 432, 401, 454, 590],
              itemStyle: {
                color: '#5470C6'
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', function() {
          chart.resize();
        });
      },
      initPieChart() {
        const chart = echarts.init(this.$refs.pieChart);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: '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: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '华北地区' },
                { value: 735, name: '华东地区' },
                { value: 580, name: '华南地区' },
                { value: 484, name: '西部地区' },
                { value: 300, name: '东北地区' }
              ],
              color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', function() {
          chart.resize();
        });
      }
    }
  };
</script>

<style scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  h1 {
    color: #333;
    margin-bottom: 30px;
  }

  .chart-row {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;
  }

  .chart-container {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .chart {
    height: 350px;
  }

  .info-cards {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-card {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .info-card h3 {
    color: #666;
    margin-bottom: 10px;
    font-size: 16px;
  }

  .info-card .number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }

  .info-card .trend {
    font-size: 14px;
  }

  .trend.up {
    color: #67C23A;
  }

  .trend.down {
    color: #F56C6C;
  }

  @media (max-width: 1200px) {
    .chart-row {
      flex-direction: column;
    }

    .info-cards {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .info-card {
      flex: 1;
      min-width: 200px;
    }
  }
</style>
