<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>总订单数</span>
          </div>
          <div class="card-body">
            <h2>{{ statistics.totalOrders }}</h2>
            <p>累计订单数量</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>总佣金</span>
          </div>
          <div class="card-body">
            <h2>¥{{ statistics.totalCommission }}</h2>
            <p>累计佣金收入</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>今日订单</span>
          </div>
          <div class="card-body">
            <h2>{{ statistics.todayOrders }}</h2>
            <p>今日新增订单</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>今日佣金</span>
          </div>
          <div class="card-body">
            <h2>¥{{ statistics.todayCommission }}</h2>
            <p>今日佣金收入</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>订单状态分布</span>
          </div>
          <div class="chart-container">
            <div ref="statusChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>佣金趋势</span>
          </div>
          <div class="chart-container">
            <div ref="trendChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>热门商品排行</span>
          </div>
          <el-table :data="hotProducts" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80" align="center" />
            <el-table-column prop="skuName" label="商品名称" :show-overflow-tooltip="true" />
            <el-table-column prop="orderCount" label="订单数量" width="120" align="center" />
            <el-table-column prop="totalAmount" label="总金额" width="120" align="center">
              <template slot-scope="scope">
                ¥{{ scope.row.totalAmount }}
              </template>
            </el-table-column>
            <el-table-column prop="totalCommission" label="总佣金" width="120" align="center">
              <template slot-scope="scope">
                ¥{{ scope.row.totalCommission }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "OrderStatistics",
  data() {
    return {
      statistics: {
        totalOrders: 4307,
        totalCommission: 125680.50,
        todayOrders: 45,
        todayCommission: 2340.80
      },
      hotProducts: [
        {
          rank: 1,
          skuName: "海尔【小红花套系】消毒柜EB150十口之家150L",
          orderCount: 156,
          totalAmount: 358944,
          totalCommission: 21536.64
        },
        {
          rank: 2,
          skuName: "京东京造 快调哑铃可调节 男士家用 运动锻炼健身器材",
          orderCount: 89,
          totalAmount: 53311,
          totalCommission: 1599.33
        },
        {
          rank: 3,
          skuName: "惠普HP 暗影精灵11台式电脑 游戏台式机主机",
          orderCount: 67,
          totalAmount: 428733,
          totalCommission: 3429.86
        },
        {
          rank: 4,
          skuName: "梦龙 【王嘉尔推荐】柚子山茶花蜜口味冰淇淋",
          orderCount: 234,
          totalAmount: 13314.6,
          totalCommission: 931.02
        },
        {
          rank: 5,
          skuName: "海尔彩屏家用麦浪消毒碗柜嵌入式 130L大容量",
          orderCount: 45,
          totalAmount: 85455,
          totalCommission: 5127.3
        }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.initStatusChart()
      this.initTrendChart()
    },
    initStatusChart() {
      const chartDom = this.$refs.statusChart
      const myChart = echarts.init(chartDom)
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 2153, name: '已完成' },
              { value: 1076, name: '已确认' },
              { value: 861, name: '待确认' },
              { value: 217, name: '已取消' }
            ]
          }
        ]
      }
      
      myChart.setOption(option)
    },
    initTrendChart() {
      const chartDom = this.$refs.trendChart
      const myChart = echarts.init(chartDom)
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单数量', '佣金收入']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: [
          {
            type: 'value',
            name: '订单数量'
          },
          {
            type: 'value',
            name: '佣金(元)',
            position: 'right'
          }
        ],
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '佣金收入',
            type: 'line',
            yAxisIndex: 1,
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.card-body {
  text-align: center;
}

.card-body h2 {
  color: #409EFF;
  margin: 10px 0;
  font-size: 28px;
}

.card-body p {
  color: #666;
  margin: 5px 0;
}

.chart-container {
  padding: 10px;
}
</style> 