<template>
  <div class="page-container">
    <!-- 使用 Ant Design Vue 的栅格系统，PC端一行展示3个，响应式适配 -->
    <a-row :gutter="[16, 16]">
      <a-col :xs="24" :sm="24" :md="8" >
        <RichTextCard title="本周数据概况" :html-content="weekSummary" :loading="loading" />
      </a-col>
      <a-col :xs="24" :sm="24" :md="8">
        <RichTextCard title="本月数据概况" :html-content="monthSummary" :loading="loading" />
      </a-col>
      <a-col :xs="24" :sm="24" :md="8">
        <RichTextCard title="本年度数据概况" :html-content="yearSummary" :loading="loading" />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { Spin } from 'ant-design-vue';
  import RichTextCard from './components/RichTextCard.vue'; // 引入子组件
  // 假设的接口请求方法
  import { getAllDataSummary } from './datacenter.api';

  // 定义三个富文本的响应式变量
  const weekSummary = ref('');
  const monthSummary = ref('');
  const yearSummary = ref('');
  // 初始化为 true，确保组件一开始就显示 loading
  const loading = ref(true);

  // 最小显示时间，确保 loading 至少显示一段时间
  const MIN_LOADING_TIME = 800; // 800ms

  onMounted(async () => {
    const startTime = Date.now();
    try {
      // 模拟网络延迟（可选，用于测试）
      // await new Promise(resolve => setTimeout(resolve, 1000));

      const res = await getAllDataSummary();
      if (res.success) {
        // 根据接口实际返回的字段名进行赋值
        weekSummary.value = res.result.weekHtml;
        monthSummary.value = res.result.monthHtml;
        yearSummary.value = res.result.yearHtml;
      }
    } catch (error) {
      console.error('获取数据概况失败:', error);
    } finally {
      // 确保 loading 至少显示 MIN_LOADING_TIME 毫秒
      const elapsedTime = Date.now() - startTime;
      if (elapsedTime < MIN_LOADING_TIME) {
        setTimeout(() => {
          loading.value = false;
        }, MIN_LOADING_TIME - elapsedTime);
      } else {
        loading.value = false;
      }
    }
  });
</script>

<style scoped>
  .page-container {
    background-color: #fdfdfd;
    min-height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    position: relative;
  }

  /* 全局 Loading 遮罩样式 */
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 8px;
  }

  .page-container :deep(.ant-card) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
  }

  .page-container :deep(.ant-card:hover) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* 自定义卡片 loading 样式 */
  .page-container :deep(.ant-spin-container) {
    min-height: 200px;
  }

  .page-container :deep(.ant-card-loading) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
  }

  @keyframes loading-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
</style>
