<template>
  <div class="summary-stat-container" v-loading="loading">
    <el-card class="summary-card" shadow="hover">
      <div class="summary-list">
        <div class="summary-item">
          <span class="item-label">总订单数</span>
          <span class="item-value">{{ summaryData.totalOrderCount || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="item-label">总销售金额(万元)</span>
          <span class="item-value">{{ formatAmount(summaryData.totalSalesAmount) }}</span>
        </div>
        <div class="summary-item">
          <span class="item-label">已完成订单数</span>
          <span class="item-value">{{ summaryData.completedOrderCount || 0 }}</span>
        </div>
        <div class="summary-item">
          <span class="item-label">已完成销售金额(万元)</span>
          <span class="item-value">{{ formatAmount(summaryData.completedSalesAmount) }}</span>
        </div>
        <div class="summary-item">
          <span class="item-label">未结款总金额(万元)</span>
          <span class="item-value">{{ formatAmount(summaryData.totalUnpaidAmount) }}</span>
        </div>
        <div class="summary-item">
          <span class="item-label">平均订单金额(万元)</span>
          <span class="item-value">{{ formatAmount(summaryData.avgOrderAmount) }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SalesReportSummaryCard",
  props: {
    // 汇总数据
    summaryData: {
      type: Object,
      default: () => ({})
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 金额格式化方法（从父组件传入，保证一致性）
    formatAmount: {
      type: Function,
      required: true
    }
  }
};
</script>

<style scoped>
.summary-stat-container {
  margin-bottom: 20px;
}

.summary-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}

.summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 15px 0;
}

.summary-item {
  width: calc(16.666% - 20px);
  text-align: center;
  padding: 15px 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.item-label {
  display: block;
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.item-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #1f2d3d;
}
</style>