<template>
  <div class="erp-dashboard">
    <!-- 第一行统计卡片 -->
    <el-row :gutter="16" class="stat-row">
      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
        <div class="stat-card">
          <div class="stat-header">
            <span class="stat-label">{{ item.label }}</span>
            <el-icon class="stat-icon"><Info-Filled /></el-icon>
          </div>
          <div class="stat-value">
            <span class="currency">¥</span>
            <span class="number">{{ formatMoney(item.value) }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行统计卡片 -->
    <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
        <div class="stat-card">
          <div class="stat-header">
            <span class="stat-label">{{ item.label }}</span>
            <el-icon class="stat-icon"><Info-Filled /></el-icon>
          </div>
          <div class="stat-value">
            <span class="currency">¥</span>
            <span class="number">{{ formatMoney(item.value) }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
      <el-col :span="8">
        <div class="chart-card">
          <div class="chart-title">销售统计</div>
          <div ref="salesChartRef" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-card">
          <div class="chart-title">零售统计</div>
          <div ref="retailChartRef" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-card">
          <div class="chart-title">采购统计</div>
          <div ref="purchaseChartRef" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
import * as echarts from 'echarts';
import { InfoFilled } from '@element-plus/icons-vue';

// 统计卡片数据 - 第一行
const firstRowStats = ref([
  { label: '今日销售', value: 0 },
  { label: '今日零售', value: 0 },
  { label: '今日采购', value: 0 },
  { label: '本月累计销售', value: 0 },
  { label: '本月累计零售', value: 0 },
  { label: '本月累计采购', value: 0 },
]);

// 统计卡片数据 - 第二行
const secondRowStats = ref([
  { label: '昨日销售', value: 0 },
  { label: '昨日零售', value: 0 },
  { label: '昨日采购', value: 0 },
  { label: '今年累计销售', value: 0 },
  { label: '今年累计零售', value: 0 },
  { label: '今年累计采购', value: 0 },
]);

// 图表实例
const salesChartRef = ref<HTMLElement | null>(null);
const retailChartRef = ref<HTMLElement | null>(null);
const purchaseChartRef = ref<HTMLElement | null>(null);
const salesChartInstance = shallowRef<echarts.ECharts | null>(null);
const retailChartInstance = shallowRef<echarts.ECharts | null>(null);
const purchaseChartInstance = shallowRef<echarts.ECharts | null>(null);

// 格式化金额
const formatMoney = (value: number): string => {
  return value.toLocaleString();
};

// 生成最近6个月的月份标签
const getMonthLabels = (): string[] => {
  const labels: string[] = [];
  const now = new Date();
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    labels.push(`${year}-${month}`);
  }
  return labels;
};

// 初始化图表通用配置
const initChart = (refEl: HTMLElement, title: string, color: string) => {
  const chart = echarts.init(refEl);
  const months = getMonthLabels();
  
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLine: { lineStyle: { color: '#E0E6ED' } },
      axisLabel: { color: '#606266', fontSize: 11 }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#F2F6FC' } },
      axisLabel: { color: '#606266', fontSize: 11 }
    },
    series: [
      {
        name: title,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { color: color, width: 2 },
        itemStyle: { color: color },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: color + '40' },
            { offset: 1, color: color + '10' }
          ])
        },
        data: [0, 0, 0, 0, 0, 0]
      }
    ]
  });
  
  return chart;
};

// 初始化所有图表
const initCharts = () => {
  if (salesChartRef.value) {
    salesChartInstance.value = initChart(salesChartRef.value, '销售', '#409EFF');
  }
  if (retailChartRef.value) {
    retailChartInstance.value = initChart(retailChartRef.value, '零售', '#67C23A');
  }
  if (purchaseChartRef.value) {
    purchaseChartInstance.value = initChart(purchaseChartRef.value, '采购', '#E6A23C');
  }
};

// 加载数据（模拟接口调用）
const loadData = async () => {
  // TODO: 调用接口获取真实数据
  // const res = await getErpDashboard();
  
  // 模拟数据更新
  firstRowStats.value = [
    { label: '今日销售', value: 12580 },
    { label: '今日零售', value: 8560 },
    { label: '今日采购', value: 23400 },
    { label: '本月累计销售', value: 358600 },
    { label: '本月累计零售', value: 245800 },
    { label: '本月累计采购', value: 568900 },
  ];
  
  secondRowStats.value = [
    { label: '昨日销售', value: 15230 },
    { label: '昨日零售', value: 9870 },
    { label: '昨日采购', value: 18900 },
    { label: '今年累计销售', value: 2856000 },
    { label: '今年累计零售', value: 1985000 },
    { label: '今年累计采购', value: 4568000 },
  ];
  
  // 更新图表数据
  updateCharts();
};

// 更新图表数据
const updateCharts = () => {
  const salesData = [28000, 32000, 35000, 38000, 42000, 358600];
  const retailData = [18000, 21000, 22000, 25000, 28000, 245800];
  const purchaseData = [45000, 48000, 52000, 55000, 58000, 568900];
  
  if (salesChartInstance.value) {
    salesChartInstance.value.setOption({ series: [{ data: salesData }] });
  }
  if (retailChartInstance.value) {
    retailChartInstance.value.setOption({ series: [{ data: retailData }] });
  }
  if (purchaseChartInstance.value) {
    purchaseChartInstance.value.setOption({ series: [{ data: purchaseData }] });
  }
};

// 自适应窗口大小
const handleResize = () => {
  salesChartInstance.value?.resize();
  retailChartInstance.value?.resize();
  purchaseChartInstance.value?.resize();
};

onMounted(async () => {
  initCharts();
  await nextTick();
  await loadData();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  salesChartInstance.value?.dispose();
  retailChartInstance.value?.dispose();
  purchaseChartInstance.value?.dispose();
});
</script>

<style lang="less" scoped>
.erp-dashboard {
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.stat-row {
  .el-col {
    margin-bottom: 0;
  }
}

.stat-card {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  
  .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    .stat-label {
      font-size: 14px;
      color: #606266;
    }
    
    .stat-icon {
      font-size: 14px;
      color: #c0c4cc;
      cursor: help;
    }
  }
  
  .stat-value {
    display: flex;
    align-items: baseline;
    
    .currency {
      font-size: 14px;
      color: #303133;
      font-weight: 500;
      margin-right: 4px;
    }
    
    .number {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    }
  }
}

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

.chart-card {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  height: 320px;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .chart-container {
    flex: 1;
    min-height: 0;
  }
}
</style>
