<template>
  <div class="order-analysis-dashboard">
    <!-- 顶部：3 张summary卡片 -->
    <el-row :gutter="20" class="top-row">
      <el-col :span="24">
        <OrderSummary :data-info="orderSummaryData" />
      </el-col>
    </el-row>

    <!-- 第二行：3 个图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="8">
        <OrderCompletion :completion-rate="orderSummaryData.completionRate" />
      </el-col>
      <el-col :span="8">
        <ProductSales :product-sales="productSalesData" />
      </el-col>
      <el-col :span="8">
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OrderSummary from './components/OrderSummary.vue'
import OrderCompletion from './components/OrderCompletion.vue'
import ProductSales from './components/ProductSales.vue'
import { getDashboardData } from '@/api/wms/order'

export default {
  name: 'OrderAnalysisDashboard',
  components: {
    OrderSummary,
    OrderCompletion,
    ProductSales,
  },
  data() {
    return {
      orderSummaryData: {
        totalOrders: 0,
        completedThisMonth: 0,
        completionRate: 0
      },
      productSalesData: [],
      materialAnalysisData: {
        categories: [],
        usageFrequency: [],
        stockQuantity: [],
        bundleRate: [],
        purchaseCycle: [],
        yAxisUsageMax: 0
      },
      customerClusterData: []
    }
  },
  created() {
    this.fetchAllData()
  },
  methods: {
    async fetchAllData() {
      const res = await getDashboardData()
      console.log(res)
    }
  }
}
</script>

<style scoped>
.order-analysis-dashboard {
  padding: 24px;
  background-color: #f7f8fa;
  box-sizing: border-box;
}

.top-row,
.chart-row {
  margin-bottom: 20px;
}

.chart-row > .el-col {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
</style>
