<template>
  <page-container>
    <div class="dashboard">
      <a-row :gutter="{ xs: 8, sm: 16, md: 24 }" class="data-overview">
        <!-- 用户数据卡片 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="data-card-col">
          <a-card class="data-card user-card">
            <template #title>
              <span class="card-title">
                <span class="icon-wrapper user-icon">
                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                    <path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" fill="currentColor"></path>
                  </svg>
                </span>
                总用户
              </span>
            </template>
            <div class="main-stat-row">
              <a-statistic 
                title="总用户数" 
                :value="dashboardData.total_user_count || 0"
                class="main-stat"
                :value-style="{ color: '#722ed1' }"
              />
              <a-statistic 
                title="下单用户数" 
                :value="dashboardData.has_order_user_count || 0"
                class="main-stat"
                :value-style="{ color: '#722ed1' }"
              />
            </div>
            <div class="sub-stats">
              <a-statistic 
                title="完成配送用户数" 
                :value="dashboardData.has_order_completed_user_count || 0"
                :value-style="{ color: '#722ed1' }"
              />
              <a-statistic 
                title="复购用户数" 
                :value="dashboardData.repeat_user_count || 0"
                :value-style="{ color: '#722ed1' }"
              />
              <a-statistic 
                title="今日增加用户" 
                :value="dashboardData.today_user_count || 0"
                :value-style="{ color: '#722ed1' }"
              />
            </div>
          </a-card>
        </a-col>

        <!-- 配送订单数据卡片 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="data-card-col">
          <a-card class="data-card order-card">
            <template #title>
              <span class="card-title">
                <span class="icon-wrapper order-icon">
                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                    <path d="M832 312H696v-16c0-101.6-82.4-184-184-184s-184 82.4-184 184v16H192c-17.7 0-32 14.3-32 32v536c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V344c0-17.7-14.3-32-32-32z m-432-16c0-61.9 50.1-112 112-112s112 50.1 112 112v16H400v-16z m392 544H232V384h96v88c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-88h224v88c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-88h96v456z" fill="currentColor"></path>
                  </svg>
                </span>
                配送订单
              </span>
            </template>
            <div class="main-stat-row">
              <a-statistic 
                title="配送订单数" 
                :value="dashboardData.order_count || 0"
                class="main-stat"
                :value-style="{ color: '#fa8c16' }"
              />
              <a-statistic 
                title="完成订单数" 
                :value="dashboardData.order_completed_count || 0"
                class="main-stat"
                :value-style="{ color: '#fa8c16' }"
              />
            </div>
            <div class="sub-stats">
              <a-statistic 
                title="今日订单数" 
                :value="dashboardData.today_order_count || 0"
                :value-style="{ color: '#fa8c16' }"
              />
              <a-statistic 
                title="昨日订单数" 
                :value="dashboardData.yesterday_order_count || 0"
                :value-style="{ color: '#fa8c16' }"
              />
            </div>
          </a-card>
        </a-col>

        <!-- 订单金额数据卡片 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="data-card-col">
          <a-card class="data-card amount-card">
            <template #title>
              <span class="card-title">
                <span class="icon-wrapper amount-icon">
                  <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"></path>
                    <path d="M426.6 599.7V521H344c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h82.6v-78.7c0-4.4 3.6-8 8-8h52c4.4 0 8 3.6 8 8V457H592c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8h-97.4v78.7c0 4.4-3.6 8-8 8h-52c-4.4 0-8-3.6-8-8z" fill="currentColor"></path>
                  </svg>
                </span>
                配送订单金额
              </span>
            </template>
            <div class="main-stat-row">
              <a-statistic 
                title="总配送金额" 
                :value="dashboardData.order_amount || 0"
                :precision="1"
                prefix="¥"
                class="main-stat"
                :value-style="{ color: '#52c41a' }"
              />
              <a-statistic 
                title="完成配送金额" 
                :value="dashboardData.completed_order_amount || 0"
                :precision="1"
                prefix="¥"
                class="main-stat"
                :value-style="{ color: '#52c41a' }"
              />
            </div>
            <div class="sub-stats">
              <a-statistic 
                title="今日订单金额" 
                :value="dashboardData.today_order_amount || 0"
                :precision="1"
                prefix="¥"
                :value-style="{ color: '#52c41a' }"
              />
              <a-statistic 
                title="昨日订单金额" 
                :value="dashboardData.yesterday_order_amount || 0"
                :precision="1"
                prefix="¥"
                :value-style="{ color: '#52c41a' }"
              />
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 每日统计列表 -->
      <div class="daily-stats-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="icon-wrapper stats-icon">
              <svg class="icon" viewBox="0 0 1024 1024" width="26" height="26">
                <path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="currentColor"></path>
                <path d="M288 712h56c4.4 0 8-3.6 8-8V550c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v154c0 4.4 3.6 8 8 8zM440 712h56c4.4 0 8-3.6 8-8V426c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v278c0 4.4 3.6 8 8 8zM592 712h56c4.4 0 8-3.6 8-8V302c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v402c0 4.4 3.6 8 8 8zM744 712h56c4.4 0 8-3.6 8-8V178c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v526c0 4.4 3.6 8 8 8z" fill="currentColor"></path>
              </svg>
            </span>
            每日统计列表
          </h2>
        </div>
        <a-table
          :columns="dailyStatsColumns"
          :data-source="dailyStatsList"
          :pagination="dailyStatsPagination"
          :loading="dailyStatsLoading"
          row-key="stats_date"
          class="daily-stats-table"
          @change="handleDailyStatsTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'total_original_amount' || column.key === 'total_final_amount'">
              ¥{{ record[column.key].toFixed(2) }}
            </template>
          </template>
        </a-table>
      </div>

      <!-- 配送员列表 -->
      <div class="deliveryman-list-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="icon-wrapper deliveryman-icon">
              <svg class="icon" viewBox="0 0 1024 1024" width="26" height="26">
                <path d="M959 413.4L935.3 372.2c-2.2-3.8-7.1-5.1-10.9-2.9l-50.7 29.6-78.3-216.2c-8.5-26.5-33.1-44.4-60.9-44.4H301.2c-34.7 0-65.5 22.4-76.2 55.5l-74.6 205.2-50.8-29.6c-3.8-2.2-8.7-0.9-10.9 2.9L65 413.4c-2.2 3.8-0.9 8.6 2.9 10.8l60.4 35.2-14.5 40c-1.2 3.2-1.8 6.6-1.8 10v348.2c0 15.7 11.8 28.4 26.3 28.4h67.6c12.3 0 23-9.3 25.6-22.3l7.7-37.7h545.6l7.7 37.7c2.7 13 13.3 22.3 25.6 22.3h67.6c14.5 0 26.3-12.7 26.3-28.4V509.4c0-3.4-0.6-6.8-1.8-10l-14.5-40 60.3-35.2c3.8-2.2 5.1-7 3-10.8zM264 621c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z m388 75c0 4.4-3.6 8-8 8H380c-4.4 0-8-3.6-8-8v-84c0-4.4 3.6-8 8-8h40c4.4 0 8 3.6 8 8v36h168v-36c0-4.4 3.6-8 8-8h40c4.4 0 8 3.6 8 8v84z m108-75c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM220 418l72.7-199.9c1.4-3.8 4.9-6.1 8.9-6.1h420.8c4 0 7.5 2.3 8.9 6.1l72.7 199.9H220z" fill="currentColor"></path>
              </svg>
            </span>
            配送员列表
          </h2>
          <div class="filter-container">
            <a-select
              v-model:value="selectedCommunity"
              placeholder="选择小区筛选"
              style="width: 240px"
              :loading="communityLoading"
              @change="handleCommunityChange"
              allowClear
            >
              <a-select-option :value="0">全部小区</a-select-option>
              <a-select-option v-for="item in communityList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <a-table
          :columns="deliverymanColumns"
          :data-source="deliverymanList"
          :pagination="false"
          :loading="loading"
          row-key="deliveryman_id"
          class="deliveryman-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'today_order_amount' || column.key === 'order_amount'">
              ¥{{ record[column.key].toFixed(2) }}
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </page-container>
</template>

<script>
import { defineComponent, computed, ref, onMounted } from 'vue'
import { Card, Row, Col, Statistic, Table, Select } from 'ant-design-vue'
import PageContainer from '@/components/PageContainer.vue'
import request from '@/utils/request'

export default defineComponent({
  name: 'Dashboard',
  components: {
    PageContainer,
    ACard: Card,
    ARow: Row,
    ACol: Col,
    AStatistic: Statistic,
    AStatisticGroup: Statistic.Group,
    ATable: Table,
    ASelect: Select,
    ASelectOption: Select.Option
  },
  setup() {
    const loading = ref(false)
    const communityLoading = ref(false)
    const selectedCommunity = ref(0)
    const communityList = ref([])
    
    const dashboardData = ref({
      total_community_count: 0,
      total_user_count: 0,
      has_order_user_count: 0,
      has_paid_user_count: 0,
      has_order_completed_user_count: 0,
      repeat_user_count: 0,
      order_count: 0,
      order_pay_count: 0,
      order_unpaid_count: 0,
      order_completed_count: 0,
      pay_rate: 0,
      order_amount: 0,
      pay_amount: 0,
      completed_order_amount: 0,
      unpaid_amount: 0,
      today_user_count: 0,
      yesterday_user_count: 0,
      today_order_count: 0,
      yesterday_order_count: 0,
      today_order_amount: 0,
      yesterday_order_amount: 0
    })
    
    const deliverymanList = ref([])
    
    const deliverymanColumns = [
      {
        title: '配送员ID',
        dataIndex: 'deliveryman_id',
        key: 'deliveryman_id',
        width: 80,
        align: 'center'
      },
      {
        title: '所属小区',
        dataIndex: 'deliveryman_community_name',
        key: 'deliveryman_community_name',
        width: 150
      },
      {
        title: '配送员名字',
        dataIndex: 'deliveryman_auth_name',
        key: 'deliveryman_auth_name',
        width: 120
      },
      {
        title: '今日订单数',
        dataIndex: 'today_order_count',
        key: 'today_order_count',
        width: 100,
        align: 'center'
      },
      {
        title: '今日订单金额',
        dataIndex: 'today_order_amount',
        key: 'today_order_amount',
        width: 120,
        align: 'right'
      },
      {
        title: '总订单数',
        dataIndex: 'order_count',
        key: 'order_count',
        width: 100,
        align: 'center'
      },
      {
        title: '总订单金额',
        dataIndex: 'order_amount',
        key: 'order_amount',
        width: 120,
        align: 'right'
      }
    ]

    const dailyStatsList = ref([])
    const dailyStatsLoading = ref(false)
    const dailyStatsPagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showSizeChanger: true,
      showTotal: (total) => `共 ${total} 条记录`
    })
    
    const dailyStatsColumns = [
      {
        title: '日期',
        dataIndex: 'stats_date',
        key: 'stats_date',
        width: 120,
        align: 'center'
      },
      {
        title: '订单数',
        dataIndex: 'total_order_count',
        key: 'total_order_count',
        width: 100,
        align: 'center'
      },
      {
        title: '订单金额',
        dataIndex: 'total_original_amount',
        key: 'total_original_amount',
        width: 120,
        align: 'right'
      },
      {
        title: '支付金额',
        dataIndex: 'total_final_amount',
        key: 'total_final_amount',
        width: 120,
        align: 'right'
      },
      {
        title: '小区数',
        dataIndex: 'total_communities',
        key: 'total_communities',
        width: 100,
        align: 'center'
      }
    ]

    const greeting = computed(() => {
      const hour = new Date().getHours()
      if (hour < 6) return '夜深了，请注意休息'
      if (hour < 9) return '早上好'
      if (hour < 12) return '上午好'
      if (hour < 14) return '中午好'
      if (hour < 17) return '下午好'
      if (hour < 19) return '傍晚好'
      return '晚上好'
    })

    const paymentRate = computed(() => {
      if (!dashboardData.value.order_count || dashboardData.value.order_count === 0) {
        return 0;
      }
      return dashboardData.value.pay_rate * 100;
    });

    const fetchDashboardData = async () => {
      loading.value = true
      try {
        const res = await request.get('/api/dashboard')
        if (res.code === 200) {
          dashboardData.value = res.data
        }
      } catch (error) {
        
      } finally {
        loading.value = false
      }
    }
    
    const fetchDeliverymanList = async (communityId = null) => {
      loading.value = true
      try {
        const url = '/api/dashboard/deliveryman'
        const params = communityId ? { community_id: communityId } : {}
        const res = await request.get(url, { params })
        if (res.code === 200) {
          deliverymanList.value = res.data
        }
      } catch (error) {
        
      } finally {
        loading.value = false
      }
    }
    
    const fetchCommunityList = async () => {
      communityLoading.value = true
      try {
        const res = await request.get('/api/community?limit=1000', {
          params: {
            limit: 1000,
            skip: 0,
            status: "OPENING"
          }
        })
        if (res.code === 200) {
          communityList.value = res.data.items || []
        }
      } catch (error) {
        
      } finally {
        communityLoading.value = false
      }
    }
    
    const fetchDailyStats = async () => {
      dailyStatsLoading.value = true
      try {
        const params = {
          skip: (dailyStatsPagination.value.current - 1) * dailyStatsPagination.value.pageSize,
          limit: dailyStatsPagination.value.pageSize
        }
        
        const res = await request.get('/api/dashboard/order_stats', { params })
        if (res.code === 200) {
          dailyStatsList.value = res.data.items || []
          dailyStatsPagination.value.total = res.data.total || 0
        }
      } catch (error) {
        
      } finally {
        dailyStatsLoading.value = false
      }
    }
    
    const handleCommunityChange = (value) => {
      if (value === 0) {
        fetchDeliverymanList()
      } else {
        fetchDeliverymanList(value)
      }
    }

    const handleDailyStatsTableChange = (pagination) => {
      dailyStatsPagination.value.current = pagination.current
      dailyStatsPagination.value.pageSize = pagination.pageSize
      fetchDailyStats()
    }

    onMounted(() => {
      fetchDashboardData()
      fetchDeliverymanList()
      fetchCommunityList()
      fetchDailyStats()
    })

    return {
      greeting,
      dashboardData,
      deliverymanList,
      deliverymanColumns,
      loading,
      communityLoading,
      communityList,
      selectedCommunity,
      handleCommunityChange,
      paymentRate,
      dailyStatsList,
      dailyStatsColumns,
      dailyStatsPagination,
      dailyStatsLoading,
      handleDailyStatsTableChange
    }
  }
})
</script>

<style scoped>
.dashboard {  
  background: #fff;
}

.data-overview {
  margin-bottom: 24px;
}

.data-card {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  :deep(.ant-card-head) {
    min-height: 42px;
    padding: 0 12px;
    border-bottom: none;
    
    .ant-card-head-title {
      padding: 12px 0;
      font-weight: 600;
      font-size: 15px;
    }
  }
  
  :deep(.ant-card-body) {
    padding: 0 15px 15px;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 1;
  }
}

.community-card {
  :deep(.ant-card-head) {
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    
    .ant-card-head-title {
      color: white;
    }
  }
  
  &::before {
    background-color: #1890ff;
  }
}

.user-card {
  :deep(.ant-card-head) {
    background: linear-gradient(135deg, #722ed1 0%, #eb2f96 100%);
    
    .ant-card-head-title {
      color: white;
    }
  }
  
  &::before {
    background-color: #722ed1;
  }
}

.order-card {
  :deep(.ant-card-head) {
    background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%);
    
    .ant-card-head-title {
      color: white;
    }
  }
  
  &::before {
    background-color: #fa8c16;
  }
}

.amount-card {
  :deep(.ant-card-head) {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    
    .ant-card-head-title {
      color: white;
    }
  }
  
  &::before {
    background-color: #52c41a;
  }
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.community-icon {
  background-color: rgba(24, 144, 255, 0.2);
  color: #1890ff;
}

.user-icon {
  background-color: rgba(114, 46, 209, 0.2);
  color: #722ed1;
}

.order-icon {
  background-color: rgba(250, 140, 22, 0.2);
  color: #fa8c16;
}

.amount-icon {
  background-color: rgba(82, 196, 26, 0.2);
  color: #52c41a;
}

.deliveryman-icon {
  background-color: rgba(24, 144, 255, 0.2);
  color: #1890ff;
}

.icon {
  font-size: 20px;
}

.main-stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  
  .main-stat {
    margin-bottom: 0;
    
    :deep(.ant-statistic-content) {
      font-size: 22px;
    }
  }
}

.main-stat-row .main-stat:last-child :deep(.ant-statistic-content) {
  text-align: right;
}

.sub-stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
  
  :deep(.ant-statistic) {
    padding: 0 8px;
    min-width: 30%;
    margin-bottom: 6px;
    
    &:first-child {
      padding-left: 0;
    }
    
    &:last-child {
      padding-right: 0;
    }
    
    .ant-statistic-title {
      font-size: 13px;
      margin-bottom: 3px;
      color: rgba(0, 0, 0, 0.65);
    }
    
    .ant-statistic-content {
      font-size: 18px;
      font-weight: 500;
    }
  }
}

.sub-stats :deep(.ant-statistic:last-child) .ant-statistic-content {
  text-align: right;
}

.sub-stats :deep(.ant-statistic:last-child) .ant-statistic-title {
  text-align: right;
}

.daily-stats-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  margin-bottom: 24px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #722ed1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

.stats-icon {
  background-color: rgba(114, 46, 209, 0.2);
  color: #722ed1;
}

.daily-stats-table {
  :deep(.ant-table-thead > tr > th) {
    background-color: #f5f5f5;
    font-weight: 500;
  }
  
  :deep(.ant-table-tbody > tr:hover > td) {
    background-color: #f0e6fa;
  }
  
  :deep(.ant-table-tbody > tr > td) {
    transition: background 0.3s;
  }
}

.deliveryman-list-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #1890ff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.section-title {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin: 0;
}

.filter-container {
  display: flex;
  gap: 16px;
}

.deliveryman-table {
  :deep(.ant-table-wrapper) {
  }
  
  :deep(.ant-table-container) {
    display: flex;
    flex-direction: column;
  }
  
  :deep(.ant-table) {
  }
  
  :deep(.ant-table-content) {
  }
  
  :deep(.ant-table-thead > tr > th) {
    background-color: #f5f5f5;
    font-weight: 500;
  }
  
  :deep(.ant-table-tbody > tr:hover > td) {
    background-color: #e6f7ff;
  }
  
  :deep(.ant-table-tbody > tr > td) {
    transition: background 0.3s;
  }
}

@media (max-width: 768px) {
  .data-overview {
    margin-bottom: 16px;
  }
  
  .data-card {
    margin-bottom: 16px;
  }
  
  .main-stat-row {
    .main-stat {
      :deep(.ant-statistic-content) {
        font-size: 20px;
      }
    }
  }
  
  .sub-stats {
    :deep(.ant-statistic) {
      .ant-statistic-content {
        font-size: 16px;
      }
    }
  }
}
</style> 