import { ref, onMounted } from 'vue'

export function useSalesChart() {
  // 销量对比数据
  const salesData = ref([])
  const loading = ref(true)  // 添加 loading 状态

  // 模拟异步数据加载
  const fetchData = async () => {
    loading.value = true
    try {
      // 模拟 API 延迟
      await new Promise(resolve => setTimeout(resolve, 1500))
      
      salesData.value = [
        {
          productName: '手机',
          lastMonthSales: 120,
          currentMonthSales: 140,
          growthRate: 16.7
        },
        {
          productName: '耳机',
          lastMonthSales: 120,
          currentMonthSales: 140,
          growthRate: 16.7
        },
        {
          productName: '手机',
          lastMonthSales: 120,
          currentMonthSales: 140,
          growthRate: 16.7
        },
        {
          productName: '手机',
          lastMonthSales: 120,
          currentMonthSales: 140,
          growthRate: 16.7
        },
        // ... 其他数据
      ]
    } finally {
      loading.value = false
    }
  }

  // 组件挂载时加载数据
  onMounted(() => {
    fetchData()
  })

  // 图表配置
  const chartConfig = {
    xField: 'productName',
    series: [
      {
        name: '上月销量',
        field: 'lastMonthSales',
        type: 'bar',
        color: '#409EFF',
        showLabel: true,
        labelFormatter: '{c}台',
        show: true,
      },
      {
        name: '本月销量',
        field: 'currentMonthSales',
        type: 'bar',
        color: '#67C23A',
        showLabel: true,
        labelFormatter: '{c}台',
        show: true,
        tooltip: {
          show: false
        }
      },
      {
        name: '环比增长',
        field: 'growthRate',
        type: 'line',
        yAxisIndex: 1,
        color: '#E6A23C',
        showLabel: true,
        labelFormatter: '{c}%',
        tooltip: {
          show: true
        }
      }
    ],
    yAxis: [
      {
        name: '销量',
        min: 0
      },
      {
        name: '增长率',
        min: 0,
        max: 100,
        axisLabel: '{value}%'
      }
    ]
  }

  return {
    salesData,
    chartConfig,
    loading
  }
}
