<template>
  <div class="googlleads">
    <div class="search-form">
      <!-- 站点选择和时间筛选 -->
      <a-row class="r1 search-form-container" :gutter="8">
        <a-col :xl="7" :xxl="6">
          <div class="choose-site">
            <span class="t1">站点：</span>
            <select-site @set-site-info="changeSite" select-width="100%" />
          </div>
        </a-col>
        <a-col :xl="8" :xxl="6">
          <div class="choose-site">
            <span class="t1">统计时间：</span>
            <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate"
              style="width: 70%" />
          </div>
        </a-col>
        <a-col :xl="9" :xxl="12">
          <a-button-group class="time-btn-group">
            <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
            <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''"
              @click="setTime('thirtyDay')">近30天</a-button>
            <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''"
              @click="setTime('sevenDay')">近一周</a-button>
            <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''"
              @click="setTime('yesterday')">昨日</a-button>
            <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>

          </a-button-group>
          <a-button 
            type="primary" 
            @click="exportToPDF"
            style="
              background: linear-gradient(135deg, #1890ff, #40a9ff);
              border-color: #1890ff;
              box-shadow: 0 2px 0 rgba(24, 144, 255, 0.1);
              margin-left: 10px;
              transition: all 0.3s;
            "
            :style="{
              '&:hover': {
                background: 'linear-gradient(135deg, #40a9ff, #69c0ff)',
                borderColor: '#40a9ff',
                boxShadow: '0 2px 0 rgba(64, 169, 255, 0.1)'
              },
              '&:active': {
                background: 'linear-gradient(135deg, #096dd9, #1890ff)',
                borderColor: '#096dd9'
              }
            }"
          >
            <template #icon>
              <DownloadOutlined />
            </template>
            导出PDF
          </a-button>
        </a-col>
      </a-row>
    </div>
    <a-spin :spinning="loading" tip="加载中...">
      <a-row>
        <a-col :span="16">
          <a-row class="r2">
            <a-col :span="24">
              <p class="t3 company-name">{{ displayCompanyName }}</p>
            </a-col>
          </a-row>
          <a-row class="r2">
            <a-col :span="8">
              <p class="t1">账户余额</p>
              <p class="t3">
                <span class="value">{{ customerStats.balance }}</span>
                <span class="currency">{{ customerStats.currency }}</span>
              </p>
            </a-col>
            <a-col :span="8">
              <p class="t1">总花费</p>
              <p class="t3">
                <span class="value">{{ customerStats.cost }}</span>
                <span class="currency">{{ customerStats.currency }}</span>
              </p>
            </a-col>
            <a-col :span="8">
              <p class="t1">转化数</p>
              <p class="t3">{{ customerStats.conversions }}</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row class="r2" style="height: 195px">
            <a-col :span="24">
              <p class="t1">优化得分</p>
              <div class="score-circle" style="padding-bottom: 10px">
                <a-progress type="circle" :percent="customerStats.optiScore.toFixed(2)" :width="80" :stroke-color="{
                  '0%': '#FFB800',
                  '100%': '#FFC53D',
                }" />
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <a-card style="margin: 10px" title="核心数据">
            <a-row class="r5" :gutter="8">
              <a-row class="r5-1">
                <a-col :span="24">
                  <template v-if="dailyStats.values && dailyStats.values.length > 0">
                    <div class="fl">
                      <a-button-group>
                        <a-button :class="{ active: activeChart === 'impression' }"
                          @click="switchChart('impression')">展示</a-button>
                        <a-button :class="{ active: activeChart === 'clicks' }"
                          @click="switchChart('clicks')">点击</a-button>
                        <a-button :class="{ active: activeChart === 'ctr' }"
                          @click="switchChart('ctr')">点击率（%）</a-button>
                        <a-button :class="{ active: activeChart === 'conversion' }"
                          @click="switchChart('conversion')">转化数</a-button>
                        <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
                      </a-button-group>
                    </div>

                    <line-chart :chartType="activeChart" :dailyStats="dailyStats" />
                  </template>
                  <template v-else>
                    <a-empty />
                  </template>
                </a-col>
              </a-row>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card style="margin: 10px" title="广告系列">
            <a-table :columns="campaignColumns" :data-source="tableData" :loading="loading" :pagination="{
              pageSize: 10,
              showSizeChanger: false,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
              style="width: 100%" />
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="12">
          <a-card style="margin: 10px" title="TOP关键词">
            <a-table :columns="keywordColumns" :data-source="keywordData" :loading="loading" :pagination="{
              pageSize: 10,
              showSizeChanger: false,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
              style="width: 100%" />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card style="margin: 10px" title="TOP展示位">
            <a-table :columns="positionColumns" :data-source="positionData" :loading="loading" :pagination="{
              pageSize: 10,
              showSizeChanger: false,
              showQuickJumper: true,
              showTotal: (total) => `共 ${total} 条`,
            }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
              style="width: 100%" />
          </a-card>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card style="margin: 10px" title="TOP国家/地区">
            <a-row class="r5">
              <a-col :span="18">
                <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400" />
                <a-empty v-else style="margin-top: 50px" />
              </a-col>

              <a-col :span="6">
                <a-table :rowKey="(record, index) => {
                    return index;
                  }
                  " class="chartTable" :scroll="{ y: 500 }" :pagination="false" :columns="chartDetailDataCol"
                  :data-source="chartDetailData" :showHeader="true">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'flagSlot'">
                      <span class="img-box">
                        <span :class="'flag-icon flag-icon-' + record.countryCode"></span>
                      </span>
                    </template>
                    <template v-if="column.key === 'numSlot'"> {{ record.impressions }} | {{ record.clicks }}
                    </template>
                  </template>
                </a-table>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script setup lang="ts" name="marketing-googleads">
import { ref, reactive, computed } from 'vue';
import dayjs from 'dayjs';
import selectSite from '@/components/Adweb/selectSite.vue';
import LineChart from './charts/Line.vue';
import MapAdweb from '@/components/chart/mapAdweb.vue';
import {
  getGoogleAdsCustomerStats,
  getGoogleAdsDailyStats,
  getGoogleAdsCampaignStats,
  getGoogleAdsKeywordStats,
  getGoogleAdsPlacementStats,
  getGoogleAdsCountryStats,
} from './googleads.api';
import 'flag-icon-css/css/flag-icons.css';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { DownloadOutlined } from '@ant-design/icons-vue';

const rangeDate = ref([]);
const queryParam = reactive<any>({});
queryParam.limit = 10;
queryParam.siteCode = localStorage.getItem('siteCode');
const loading = ref(false);
const activeChart = ref('impression');
const chartDetailData = ref([]);
const countryMapData = ref([]);
const chartDetailDataCol = ref([
  {
    title: '',
    key: 'flagSlot',
    width: '30px',
  },
  {
    title: '国家/地区名称',
    dataIndex: 'countryName',
    key: 'countryName',
  },
  {
    title: '展示数 | 点击数',
    key: 'numSlot',
    align: 'right',
  },
]);

// Add isDemo ref
const isDemo = ref(localStorage.getItem('siteIsDemo') === '1');

// Update the changeSite function
const changeSite = (selectedSiteInfo: any) => {
  queryParam.siteCode = selectedSiteInfo.code;
  localStorage.setItem('siteCode', queryParam.siteCode);
  isDemo.value = localStorage.getItem('siteIsDemo') === '1';
  reloadData();
};

const onChangeDatePicker = (date, dateString) => {
  if (dateString.length > 0) {
    rangeDate.value = date;
    queryParam.start = dateString[0];
    queryParam.end = dateString[1];
    queryParam.dateType = undefined;
    reloadData();
  }
};

const setTime = (time) => {
  queryParam.dateType = time;
  queryParam.start = '';
  queryParam.end = '';

  if (time == '') {
    rangeDate.value = undefined;
  } else if (time == 'sevenDay') {
    rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
  } else if (time == 'thirtyDay') {
    rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
  } else if (time == 'yesterday') {
    rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
  } else if (time == 'today') {
    rangeDate.value = [dayjs(), dayjs()];
  }

  reloadData();
};

//日期选择只能今天之前
const disabledDate = (current) => {
  return current && current > dayjs();
};

//重新刷新页面数据
const reloadData = () => {
  loading.value = true;
  getCustomerStats();
  getDailyStats();
  getCampaignStats();
  getKeywordStats();
  getPlacementStats();
  getCountryStats();
  loading.value = false;
};

// 存储所有图表数据
const allChartData = ref({
  dates: [] as string[],
  impression: [] as number[],
  clicks: [] as number[],
  ctr: [] as number[],
  conversion: [] as number[],
  cost: [] as number[],
});

// 修改 getDailyStats 函数
const getDailyStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsDailyStats(queryParam);
    if (res) {
      // 按日期排序并保存原始数据
      const sortedData = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());

      // 保存所有数据
      allChartData.value = {
        dates: sortedData.map((item) => item.date),
        impression: sortedData.map((item) => Number(item.impressions) || 0),
        clicks: sortedData.map((item) => Number(item.clicks) || 0),
        ctr: sortedData.map((item) => (Number(item.ctr) * 100).toFixed(2) || 0.0),
        conversion: sortedData.map((item) => Number(item.conversions) || 0),
        cost: sortedData.map((item) => Number(item.cost) || 0),
      };

      // 设置初始显示数据
      dailyStats.value = {
        dates: allChartData.value.dates,
        values: allChartData.value[activeChart.value] || [],
      };
    }
  } catch (error) {
    console.error('获取每日统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 简化切换图表类型的函数
const switchChart = (type: string) => {
  activeChart.value = type;
  // 直接使用已有数据更新图表
  dailyStats.value = {
    dates: allChartData.value.dates,
    values: allChartData.value[type] || [],
  };
};

const campaignColumns = ref([
  {
    title: '广告系列名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '类型',
    dataIndex: 'advertisingChannelType',
    key: 'advertisingChannelType',
  },
  {
    title: '展示数',
    dataIndex: 'impressions',
    key: 'impressions',
  },
  {
    title: '点击数',
    dataIndex: 'clicks',
    key: 'clicks',
  },
  {
    title: '点击率(%)',
    dataIndex: 'ctr',
    key: 'ctr',
    customRender: ({ text }) => {
      return text ? (Number(text) * 100).toFixed(2) + '%' : '0.00%';
    },
  },
  {
    title: 'CPC',
    dataIndex: 'averageCpc',
    key: 'cpc',
    slots: { customRender: 'cpc' },
    tooltip: '单次点击费用',
    customRender: ({ text }) => `${text.toFixed(2)}`,
  },
  {
    title: '转化数',
    dataIndex: 'conversions',
    key: 'conversions',
    customRender: ({ text }) => `${text.toFixed(2)}`,
  },
  {
    title: '花费',
    dataIndex: 'cost',
    key: 'cost',
    customRender: ({ text }) => `${text.toFixed(2)}`,
  },
]);

const tableData = ref([]);

const keywordColumns = ref([
  {
    title: '关键词',
    dataIndex: 'keyword',
    key: 'keyword',
  },
  {
    title: '展示次数',
    dataIndex: 'impressions',
    key: 'impressions',
  },
  {
    title: '点击次数',
    dataIndex: 'clicks',
    key: 'clicks',
  },
  {
    title: '花费',
    dataIndex: 'cost',
    key: 'cost',
    customRender: ({ text }) => `${text.toFixed(2)}`,
  },
]);

const positionColumns = ref([
  {
    title: '展示位置',
    dataIndex: 'placement',
    key: 'placement',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '展示次数',
    dataIndex: 'impressions',
    key: 'impressions',
  },
  {
    title: '点击次数',
    dataIndex: 'clicks',
    key: 'clicks',
  },
  {
    title: '花费',
    dataIndex: 'cost',
    key: 'cost',
    customRender: ({ text }) => `${text.toFixed(2)}`,
  },
]);

const keywordData = ref([]);
const positionData = ref([]);

// 修改响应式数据的类型定义
const customerStats = ref({
  customerId: '-',
  descriptiveName: '-',
  currency: '',
  balance: '-',
  cost: '-',
  conversions: '-',
  optiScore: 0,
});

// Add computed property for company name
const displayCompanyName = computed(() => {
  if (isDemo.value && customerStats.value.descriptiveName) {
    return customerStats.value.descriptiveName.replace(/./g, '*');
  }
  return customerStats.value.descriptiveName;
});

// 添加格式化数字的函数
const formatNumber = (num: string | number) => {
  if (!num) return '-';
  // 处理字符串类型的数字
  const numStr = typeof num === 'string' ? num : num.toString();
  // 分离整数和小数部分
  const parts = numStr.split('.');
  // 对整数部分添加千位分隔符
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  // 重新组合整数和小数部分
  return parts.join('.');
};

// 获取客户统计数据
const getCustomerStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsCustomerStats(queryParam);
    const stats = res;

    // // 处理余额和花费的分割
    // const balanceParts = (stats.balance ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
    // const costParts = (stats.cost ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);

    customerStats.value = {
      customerId: stats.customerId ?? '-',
      descriptiveName: stats.descriptiveName ?? '-',
      currency: stats.currencyCode ?? '',
      balance: stats.balance ? formatNumber(stats.balance) : '0',
      cost: stats.cost ? formatNumber(stats.cost) : '-',
      conversions: stats.conversions ? formatNumber(stats.conversions) : '-',
      optiScore: stats.optiScore ? stats.optiScore * 100 : 0,
    };
  } catch (error) {
    console.error('获取客户统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const dailyStats = ref({
  dates: [] as string[],
  values: [] as number[],
});

const getCampaignStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsCampaignStats(queryParam);
    if (res) {
      tableData.value = res.map((item) => ({
        name: item.name,
        status: item.status,
        advertisingChannelType: item.advertisingChannelType,
        biddingStrategyType: item.biddingStrategyType,
        budget: item.budget,
        impressions: item.impressions,
        clicks: item.clicks,
        ctr: item.ctr,
        averageCpc: item.averageCpc,
        averageCpm: item.averageCpm,
        conversions: item.conversions,
        cost: item.cost,
      }));
    }
  } catch (error) {
    console.error('获取广告系列数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const getKeywordStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsKeywordStats(queryParam);
    if (res) {
      keywordData.value = res.map((item) => ({
        keyword: item.keyword,
        impressions: item.impressions,
        clicks: item.clicks,
        ctr: item.ctr,
        cost: item.cost,
      }));
    }
  } catch (error) {
    console.error('获取关键词统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const getPlacementStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsPlacementStats(queryParam);
    if (res) {
      positionData.value = res.map((item) => ({
        placement: item.placement,
        type: item.type,
        impressions: item.impressions,
        clicks: item.clicks,
        ctr: item.ctr,
        cost: item.cost,
      }));
    }
  } catch (error) {
    console.error('获取展示位置统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const getCountryStats = async () => {
  try {
    loading.value = true;
    const res = await getGoogleAdsCountryStats(queryParam);
    if (res) {
      // 处理地图数据
      countryMapData.value = res.map((item) => ({
        name: item.countryName,
        value: item.impressions,
      }));

      // 处理表格数据
      chartDetailData.value = res.map((item) => ({
        countryCode: item.countryCode?.toLowerCase(),
        countryName: item.countryName,
        clicks: item.clicks,
        impressions: item.impressions,
      }));
    }
  } catch (error) {
    console.error('获取国家统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// Add PDF export function
const exportToPDF = () => {
  const element = document.querySelector('.googlleads') as HTMLElement;
  if (!element) return;

  // 获取元素的实际高度
  const elementHeight = element.scrollHeight;
  const elementWidth = element.scrollWidth;

  // 设置html2canvas配置
  const options = {
    scale: 2, // 提高质量
    useCORS: true,
    allowTaint: true,
    logging: true,
    width: elementWidth,
    height: elementHeight,
    scrollX: 0,
    scrollY: -window.scrollY, // 修复滚动位置
    windowWidth: elementWidth,
    windowHeight: elementHeight
  };

  html2canvas(element, options).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');

    // PDF页面尺寸
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();

    // 计算图片在PDF中的尺寸
    const imgWidth = pageWidth;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    // 分页处理
    let heightLeft = imgHeight;
    let position = 0;

    // 第一页
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    // 后续页面
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    pdf.save('google_ads_report.pdf');
  });
};

</script>

<style scoped lang="less">
.googlleads {
  min-height: calc(100vh - 64px); // 64px is the typical header height
  padding-bottom: 24px; // Add some padding at the bottom
  background: #fff; // Add background color if needed
}

.r1 {
  margin: 20px;

  .choose-site {
    display: flex;
    align-items: center;

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }

  .t1 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 32px;
    margin-left: 10px;
  }

  .ant-form-item {
    flex: 1;
  }

  .ant-calendar-picker {
    margin-right: 20px;
  }

  /deep/ .ant-btn {
    background: transparent;
    margin-right: 10px;
    padding: 4px 15px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      color: @primary-color;
      border-color: @primary-color;
    }

    &.active {
      color: @primary-color;
      background: #e6f7ff;
      border-color: @primary-color;
    }
  }

  .time-btn-group {
    /deep/ .ant-btn {
      background: #fff;
      padding: 4px 15px;
      border: 1px solid #d9d9d9;
      transition: all 0.3s;
      margin-right: 0;

      &:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      &:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      &:not(:first-child) {
        margin-left: -1px;
      }

      &:hover {
        color: @primary-color;
        border-color: @primary-color;
        position: relative;
        z-index: 1;
        background: #fff;
      }

      &.active {
        color: @primary-color;
        background: #e6f7ff;
        border-color: @primary-color;
        position: relative;
        z-index: 2;
      }
    }
  }
}

.r2 {
  background: #fff;
  padding: 20px;
  margin: 15px 10px 10px;

  .ant-col:not(:last-child) {
    border-right: 1px solid #e6e6e6;
  }

  p {
    margin: 0;
    text-align: center;

    &.t1 {
      color: #333;
      margin-bottom: 15px;

      img {
        margin-right: 10px;
        width: 15px;
        margin-top: -5px;
      }
    }

    &.t2 {
      color: @primary-color;
      font-size: 30px;
      font-weight: 500;
      line-height: 1;
      padding-left: 25px;
    }

    &.t3 {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 38px;
      color: rgba(13, 62, 122, 1);

      .value {
        font-size: 32px;
      }

      .currency {
        font-size: 16px;
        margin-left: 4px;
      }

      &.company-name {
        font-size: 18px;
        text-align: left;
        line-height: 1;
        font-weight: 600;
      }
    }
  }
}

.r5 {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin: 0 !important;

  .wrap {
    box-shadow: 0px 2px 4px 0px @primary-color;
    padding: 15px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s;

    &.blue {
      box-shadow: 0px 2px 4px 0px @primary-color;
    }

    &.effect:hover {
      box-shadow: none;
      background: rgb(241, 248, 255);
    }

    img {
      width: 15px;
    }

    .fr {
      float: right;
      width: calc(100% - 15px);
      text-align: center;

      p:last-child {
        font-size: 30px;
        text-align: center;
        margin-top: 10px;
      }
    }
  }

  /deep/ .ant-table-thead>tr>th {
    background: rgb(241, 248, 255);
    border: none;
    color: #000;
    padding: 10px;
  }

  /deep/ .ant-table-tbody .ant-table-row td {
    padding: 10px;
    color: #000;
  }

  .r5-1 {
    display: inline-block;
    width: 100%;
    margin-top: 30px;

    .fl {
      float: left;
      position: relative;

      .ant-btn {
        border-radius: 0;
        border: none;
        margin-right: 10px;
      }

      .ant-btn-group {
        .ant-btn {
          background: #f5f5f5;

          &:hover {
            background: #fff;
          }

          &.active {
            color: @primary-color;
            background: #e6f7ff;
            border-color: @primary-color;
            z-index: 2;
          }
        }
      }
    }

    .fr {
      float: right;
      line-height: 2;

      span {
        margin-right: 30px;

        i {
          display: inline-block;
          width: 25px;
          height: 3px;
          background: #544beb;
          position: relative;
          top: -4px;
          margin-right: 20px;
        }

        &:last-child i {
          background: #f0b358;
        }
      }
    }
  }

  .box {
    border-radius: 10px;
    text-align: center;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    p {
      color: #fff;

      img {
        width: 19px;
        margin: -5px 10px 0 0;
      }
    }

    .num {
      font-size: 30px;
      margin-bottom: 10px;
    }

    &.b1 {
      background: rgb(233, 107, 95);
    }

    &.b2 {
      background: rgb(88, 204, 168);
    }

    &.b3 {
      background: rgb(124, 152, 252);
    }

    &.b4 {
      background: #f0b358;
    }
  }
}

.score-circle {
  text-align: center;
  margin-top: 20px;
}

// 添加表格样式
:deep(.table-striped) {
  background-color: #fafafa;
}

// 修改表格头部样式
:deep(.ant-table-thead > tr > th) {
  background: #e6f7ff !important;
  font-weight: 700; // 字重改为700
  color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
}

:deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
