<script setup lang="ts">
import { ref, onMounted, shallowRef } from 'vue'
import {
  ShoppingCart,
  Money,
  User,
  Goods,
  TrendCharts
} from '@element-plus/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 数据统计
const stats = ref({
  todayOrders: 128,
  todaySales: 8965.5,
  totalUsers: 2356,
  totalProducts: 312
})

const trendOption = shallowRef({})
const pieOption = shallowRef({})
const barOption = shallowRef({})

function buildCharts() {
  // 销售趋势（近 7 天）
  trendOption.value = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, top: 30, bottom: 30 },
    xAxis: {
      type: 'category',
      data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7'],
      axisLine: { lineStyle: { color: '#E5E7EB' } },
      axisLabel: { color: '#6B7280' }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#F3F4F6' } },
      axisLabel: { color: '#6B7280' }
    },
    series: [
      {
        name: '销售额',
        data: [6200, 5800, 7100, 8500, 9200, 7800, 8965],
        type: 'line',
        smooth: true,
        lineStyle: { color: '#3B82F6', width: 3 },
        itemStyle: { color: '#3B82F6' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
              { offset: 1, color: 'rgba(59, 130, 246, 0)' }
            ]
          }
        }
      }
    ]
  }

  // 订单状态饼图
  pieOption.value = {
    tooltip: { trigger: 'item' },
    legend: { bottom: 0, icon: 'circle' },
    series: [
      {
        type: 'pie',
        radius: ['50%', '75%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
        label: { show: false },
        data: [
          { value: 28, name: '待付款', itemStyle: { color: '#F59E0B' } },
          { value: 35, name: '待发货', itemStyle: { color: '#3B82F6' } },
          { value: 22, name: '待收货', itemStyle: { color: '#1E40AF' } },
          { value: 18, name: '已完成', itemStyle: { color: '#10B981' } },
          { value: 7, name: '已取消', itemStyle: { color: '#9CA3AF' } }
        ]
      }
    ]
  }

  // 热销商品 Top10
  barOption.value = {
    tooltip: { trigger: 'axis' },
    grid: { left: 80, right: 30, top: 20, bottom: 30 },
    xAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false } },
    yAxis: {
      type: 'category',
      data: ['夏威夷果', '芒果干', '猪肉脯', '薯片', '巧克力', '瓜子', '核桃', '葡萄干', '开心果', '牛肉干'],
      axisLine: { lineStyle: { color: '#E5E7EB' } },
      axisLabel: { color: '#6B7280' }
    },
    series: [
      {
        type: 'bar',
        data: [320, 280, 260, 240, 220, 200, 180, 160, 140, 120],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
              { offset: 0, color: '#60A5FA' },
              { offset: 1, color: '#1E40AF' }
            ]
          },
          borderRadius: [0, 4, 4, 0]
        }
      }
    ]
  }
}

onMounted(() => {
  buildCharts()
})

const cards = [
  { key: 'todayOrders', title: '今日订单数', icon: ShoppingCart, color: '#3B82F6', suffix: '单' },
  { key: 'todaySales', title: '今日销售额', icon: Money, color: '#10B981', prefix: '¥' },
  { key: 'totalUsers', title: '总用户数', icon: User, color: '#F59E0B', suffix: '人' },
  { key: 'totalProducts', title: '总商品数', icon: Goods, color: '#1E40AF', suffix: '件' }
]
</script>

<template>
  <div class="dashboard">
    <div class="page-header">
      <h2>仪表盘</h2>
      <p>欢迎回来，这是您的运营概览</p>
    </div>

    <!-- 数据卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col v-for="c in cards" :key="c.key" :xs="12" :sm="12" :md="6">
        <el-card shadow="never" class="stat-card">
          <div class="stat-icon" :style="{ background: c.color + '15', color: c.color }">
            <el-icon :size="24"><component :is="c.icon" /></el-icon>
          </div>
          <div class="stat-body">
            <div class="stat-title">{{ c.title }}</div>
            <div class="stat-value">
              {{ c.prefix || '' }}{{ stats[c.key as keyof typeof stats] }}{{ c.suffix || '' }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="16">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-radio-group size="small">
                <el-radio-button label="7d">近 7 天</el-radio-button>
                <el-radio-button label="30d">近 30 天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart :option="trendOption" autoresize style="height: 320px" />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>订单状态</span>
              <el-icon><TrendCharts /></el-icon>
            </div>
          </template>
          <v-chart :option="pieOption" autoresize style="height: 320px" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>热销商品 Top 10</span>
              <el-tag size="small" type="info">按销量</el-tag>
            </div>
          </template>
          <v-chart :option="barOption" autoresize style="height: 360px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  h2 {
    margin: 0;
    font-size: 22px;
    color: $color-text-primary;
  }
  p {
    margin: 4px 0 0;
    color: $color-text-secondary;
    font-size: 13px;
  }
}

.stat-cards {
  margin-bottom: 0;
}

.stat-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-title {
  font-size: 13px;
  color: $color-text-secondary;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: $color-text-primary;
}

.chart-row {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: $color-text-primary;
}
</style>
