<template>
  <div class="dashboard-container">
    <!-- 顶部标题区域 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">
        <el-icon class="title-icon">
          <TrendCharts />
        </el-icon>
        赛事管理系统仪表板
      </h1>
      <p class="dashboard-subtitle">实时监控赛事数据，洞察运营状况</p>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="(item, index) in statsData" :key="index">
        <div class="stat-icon" :style="{ backgroundColor: item.color }">
          <el-icon :size="24">
            <component :is="item.icon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ item.loading ? '-' : item.value }}</div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <!-- 快速操作区域 -->
    <el-card class="quick-actions-card">
      <template #header>
        <div class="card-header">
          <span>快速操作</span>
          <el-icon>
            <Operation />
          </el-icon>
        </div>
      </template>
      <div class="quick-actions">
        <el-button
          v-for="action in quickActions"
          :key="action.name"
          :type="action.type"
          :icon="action.icon"
          @click="handleQuickAction(action.action)"
          class="action-btn"
        >
          {{ action.name }}
        </el-button>
      </div>
    </el-card>
    <!-- 图表和详细信息区域 -->
    <el-row :gutter="20" class="charts-section">
      <!-- 数据分布饼图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>数据分布</span>
              <el-icon>
                <PieChart />
              </el-icon>
            </div>
          </template>
          <div id="pieChart" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 赛事状态监控 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>赛事状态</span>
              <el-icon>
                <Trophy />
              </el-icon>
            </div>
          </template>
          <div class="event-status">
            <div class="status-item">
              <div class="status-icon upcoming">
                <el-icon :size="20">
                  <Clock />
                </el-icon>
              </div>
              <div class="status-content">
                <div class="status-count">{{ eventStatus.upcoming }}</div>
                <div class="status-label">未开始</div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-icon ongoing">
                <el-icon :size="20">
                  <VideoPlay />
                </el-icon>
              </div>
              <div class="status-content">
                <div class="status-count">{{ eventStatus.ongoing }}</div>
                <div class="status-label">进行中</div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-icon completed">
                <el-icon :size="20">
                  <CircleCheck />
                </el-icon>
              </div>
              <div class="status-content">
                <div class="status-count">{{ eventStatus.completed }}</div>
                <div class="status-label">已结束</div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-icon total">
                <el-icon :size="20">
                  <DataBoard />
                </el-icon>
              </div>
              <div class="status-content">
                <div class="status-count">{{ eventStatus.total }}</div>
                <div class="status-label">总计</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 系统信息 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
              <el-icon>
                <Monitor />
              </el-icon>
            </div>
          </template>
          <div class="system-info">
            <div class="info-item">
              <span class="info-label">系统版本</span>
              <span class="info-value">v5.4.1</span>
            </div>
            <div class="info-item">
              <span class="info-label">运行状态</span>
              <el-tag type="success">正常运行</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">在线用户</span>
              <span class="info-value">{{ onlineUsers }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">数据更新</span>
              <span class="info-value">{{ lastUpdateTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 底部详情区域 -->
    <el-row :gutter="20" class="detail-section" style="margin-top: 20px;">
      <!-- 左侧：项目进度 -->
      <el-col :xs="24" :lg="14">
        <el-card class="progress-card fixed-height-card">
          <template #header>
            <div class="card-header">
              <span class="header-title-with-icon">
                <el-icon><Operation /></el-icon>
                项目进度
              </span>
              <div class="progress-stats">
                <span>{{ completedTasks }} / {{ totalTasks }}</span>
              </div>
            </div>
          </template>
          <div class="progress-summary">
            <el-progress :percentage="progressPercentage" :stroke-width="12" />
          </div>
          <div class="project-vertical-list">
            <div v-for="(item, index) in projectProgress" :key="index" class="project-list-row">
              <div class="row-left">
                <span class="project-name">{{ item.projectName }}</span>
              </div>
              <div class="row-center">
                <span class="project-type">{{ getProjectTypeText(item.projectType) }}</span>
                <span class="project-classification">{{ item.classification === '0' ? '个人' : '团体' }}</span>
              </div>
              <div class="row-right">
                <span class="project-time">{{ formatTime(item.startTime) }}</span>
              </div>
              <!-- 组别详情 -->
              <div v-if="item.groups && item.groups.length > 0" class="row-groups">
                <div v-for="group in item.groups" :key="group.groupId" class="group-row">
                  <span class="group-name">{{ group.groupName }}</span>
                  <span class="group-time">{{ formatTimeOnly(group.beginTime) }}</span>
                  <span class="group-status" :class="'status-' + group.status">{{ group.statusText }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧：动态与公告 -->
      <el-col :xs="24" :lg="10">
        <div class="right-stack">
          <!-- 最新赛事 -->
          <el-card class="activity-card mb-20">
            <template #header>
              <div class="card-header">
                <el-icon><Calendar /></el-icon>
                <span>最新赛事</span>
              </div>
            </template>
            <div class="activity-list">
              <div v-for="event in recentEvents" :key="event.id" class="activity-item">
                <div class="activity-dot"></div>
                <div class="activity-content">
                  <div class="activity-title">{{ event.eventName }}</div>
                  <div class="activity-time">{{ event.updateTime }}</div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 系统公告 -->
          <el-card class="activity-card">
            <template #header>
              <div class="card-header">
                <el-icon><Bell /></el-icon>
                <span>系统公告</span>
              </div>
            </template>
            <div class="activity-list">
              <div v-for="notice in systemNotices" :key="notice.id" class="activity-item">
                <div class="activity-dot notice"></div>
                <div class="activity-content">
                  <div class="activity-title">{{ notice.noticeTitle }}</div>
                  <div class="activity-time">{{ notice.createTime }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 还原赛事弹窗 -->
    <el-dialog v-model="restoreDialogVisible" title="还原赛事" width="500px" :before-close="handleCloseRestoreDialog">
      <div class="restore-dialog-content">
        <div class="restore-description">
          <el-icon class="description-icon">
            <InfoFilled />
          </el-icon>
          <p>请选择您需要的操作：</p>
        </div>

        <div class="restore-actions">
          <div class="action-card backup-card" @click="handleBackup">
            <div class="action-icon">
              <el-icon :size="32">
                <FolderAdd />
              </el-icon>
            </div>
            <div class="action-content">
              <h3>备份数据库</h3>
              <p>将当前数据库备份为SQL文件下载到本地</p>
            </div>
            <el-button v-if="backupLoading" type="primary" loading size="small"> 备份中...</el-button>
          </div>

          <div class="action-card restore-card">
            <div class="action-icon">
              <el-icon :size="32">
                <RefreshLeft />
              </el-icon>
            </div>
            <div class="action-content">
              <h3>恢复数据库</h3>
              <p>从SQL备份文件中恢复数据库数据</p>
            </div>
            <div class="restore-upload">
              <el-upload ref="uploadRef" :show-file-list="false" :before-upload="beforeUpload" :http-request="handleFileUpload" accept=".sql" drag>
                <el-icon class="el-icon--upload">
                  <UploadFilled />
                </el-icon>
                <div class="el-upload__text">将SQL文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">只能上传.sql文件，且不超过100MB</div>
                </template>
              </el-upload>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseRestoreDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import {
  TrendCharts,PieChart,Monitor,Operation,Calendar,Bell,Trophy,Clock,VideoPlay,CircleCheck,DataBoard,
  InfoFilled,FolderAdd,RefreshLeft,UploadFilled,
} from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { getArticleCount } from '@/api/system/article';
import { getEventCount, listGameEvent } from '@/api/system/gameEvent';
import { getEventProjectCount } from '@/api/system/gameEventProject';
import { getRefereeCount } from '@/api/system/gameReferee';
import { getTeamCount } from '@/api/system/gameTeam';
import { listNotice } from '@/api/system/notice';
import { countOnlineUser } from '@/api/monitor/online';
import { backupDatabase, restoreDatabase } from '@/api/system/backup';
import { getProjectProgress } from '@/api/system/gameEvent/projectProgress';
import { ProjectProgressVo } from '@/api/system/gameEvent/types';
import { useGameEventStore } from '@/store/modules/gameEvent';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';

// 响应式数据
const statsData = ref([
  {
    label: '文章数量',
    value: 0,
    icon: 'DataBoard',
    color: '#409EFF',
    loading: true
  },
  {
    label: '参赛队伍',
    value: 0,
    icon: 'User',
    color: '#67C23A',
    loading: true
  },
  {
    label: '赛事',
    value: 0,
    icon: 'Trophy',
    color: '#E6A23C',
    loading: true
  },
  {
    label: '赛事项目',
    value: 0,
    icon: 'Promotion',
    color: '#F56C6C',
    loading: true
  },
  {
    label: '裁判',
    value: 0,
    icon: 'Flag',
    color: '#909399',
    loading: true
  }
]);

const router = useRouter();
const onlineUsers = ref(1);
const restoreDialogVisible = ref(false);
const backupLoading = ref(false);
const uploadRef = ref();
const lastUpdateTime = ref('');

const { game_project_type } = toRefs<any>(proxy?.useDict('game_project_type'));

const quickActions = ref([
  { name: '新增赛事', type: 'primary' as const, icon: 'Plus', action: 'addEvent' },
  { name: '参赛队伍管理', type: 'success' as const, icon: 'User', action: 'manageTeam' },
  { name: '裁判管理', type: 'warning' as const, icon: 'Flag', action: 'manageReferees' },
  { name: '还原赛事', type: 'info' as const, icon: 'RefreshLeft', action: 'restoreEvent' },
  { name: '刷新数据', type: 'default' as const, icon: 'Refresh', action: 'refresh' }
]);

const recentEvents = ref([]);

const systemNotices = ref([]);

const eventStatus = ref({
  upcoming: 0,
  ongoing: 0,
  completed: 0,
  total: 0
});

// 项目进度相关数据
const gameEventStore = useGameEventStore();
const { defaultEventInfo } = storeToRefs(gameEventStore);
const projectProgress = ref<ProjectProgressVo[]>([]);
const completedTasks = ref(0);
const totalTasks = ref(0);
const progressPercentage = computed(() => totalTasks.value > 0 ? Math.round((completedTasks.value / totalTasks.value) * 100) : 0);

/**
 * 获取最新赛事
 */
const loadRecentEvents = async () => {
  try {
    const res = await listGameEvent({
      pageNum: 1,
      pageSize: 4,
      orderByColumn: 'update_time',
      isAsc: 'desc'
    });
    if (res.code === 200 && res.total > 0) {
      recentEvents.value = res.rows;
    }
  } catch (error) {
    console.error('加载最新赛事失败:', error);
  }
};

/**
 * 获取公告
 */
const loadNotice = async () => {
  try {
    const res = await listNotice({
      pageNum: 1,
      pageSize: 4,
      noticeTitle: undefined,
      createByName: undefined,
      status: undefined,
      noticeType: undefined,
      orderByColumn: 'update_time',
      isAsc: 'desc'
    });
    if (res.code === 200 && res.total > 0) {
      systemNotices.value = res.rows;
    }
  } catch (error) {
    console.error('加载公告失败:', error);
  }
};

/**
 * 加载赛事状态统计
 */
const loadEventStatus = async () => {
  try {
    let upcoming = 0,
      ongoing = 0,
      completed = 0,
      total = 0;
    let res = await getEventCount(0);
    total = res.data;
    res = await getEventCount(1);
    upcoming = res.data;
    res = await getEventCount(2);
    ongoing = res.data;
    res = await getEventCount(3);
    completed = res.data;

    eventStatus.value = {
      upcoming,
      ongoing,
      completed,
      total
    };
  } catch (error) {
    console.error('加载赛事状态失败:', error);
  }
};

/**
 * 获取统计数量
 */
const loadStatistics = async () => {
  try {
    // 并行请求所有统计接口
    const results = await Promise.allSettled([getArticleCount(), getTeamCount(), getEventCount(0), getEventProjectCount(), getRefereeCount()]);

    let hasError = false;

    // 处理文章数量
    if (results[0].status === 'fulfilled') {
      statsData.value[0].value = results[0].value.data || 0;
    } else {
      console.error('获取文章数量失败:', results[0].reason);
      statsData.value[0].value = 0;
      hasError = true;
    }
    statsData.value[0].loading = false;

    // 处理参赛队伍数量
    if (results[1].status === 'fulfilled') {
      statsData.value[1].value = results[1].value.data || 0;
    } else {
      console.error('获取参赛队伍数量失败:', results[1].reason);
      statsData.value[1].value = 0;
      hasError = true;
    }
    statsData.value[1].loading = false;

    // 处理赛事数量
    if (results[2].status === 'fulfilled') {
      statsData.value[2].value = results[2].value.data || 0;
    } else {
      console.error('获取赛事数量失败:', results[2].reason);
      statsData.value[2].value = 0;
      hasError = true;
    }
    statsData.value[2].loading = false;

    // 处理赛事项目数量
    if (results[3].status === 'fulfilled') {
      statsData.value[3].value = results[3].value.data || 0;
    } else {
      console.error('获取赛事项目数量失败:', results[3].reason);
      statsData.value[3].value = 0;
      hasError = true;
    }
    statsData.value[3].loading = false;

    // 处理裁判数量
    if (results[4].status === 'fulfilled') {
      statsData.value[4].value = results[4].value.data || 0;
    } else {
      console.error('获取裁判数量失败:', results[4].reason);
      statsData.value[4].value = 0;
      hasError = true;
    }
    statsData.value[4].loading = false;

    // 如果有接口错误，显示提示
    if (hasError) {
      ElMessage({
        message: '部分统计数据获取失败，请检查网络连接或稍后重试',
        type: 'warning',
        duration: 3000
      });
    }

    // 初始化图表
    nextTick(() => {
      initCharts();
    });
  } catch (error) {
    console.error('加载统计数据失败:', error);
    ElMessage({
      message: '统计数据加载失败，请检查网络连接',
      type: 'error',
      duration: 5000
    });
    // 设置所有统计数据为0并停止加载状态
    statsData.value.forEach((item) => {
      item.value = 0;
      item.loading = false;
    });
  }
};

const initCharts = () => {
  initPieChart();
};

const initPieChart = () => {
  const chartDom = document.getElementById('pieChart');
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '数据分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: statsData.value[0].value, name: '文章' },
          { value: statsData.value[1].value, name: '参赛队伍' },
          { value: statsData.value[2].value, name: '赛事' },
          { value: statsData.value[3].value, name: '项目' },
          { value: statsData.value[4].value, name: '裁判' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
};

const handleQuickAction = (action: string) => {
  switch (action) {
    case 'addEvent':
      // 跳转到新增赛事页面
      router.push(`/system/gameEvent/add`);
      break;
    case 'manageTeam':
      // 跳转到参赛队伍管理页面
      router.push(`/game/gameTeam`);
      break;
    case 'manageReferees':
      // 跳转到裁判管理页面
      router.push(`/game/gameReferee`);
      break;
    case 'restoreEvent':
      // 显示还原赛事弹窗
      restoreDialogVisible.value = true;
      break;
    case 'refresh':
      // 刷新统计数据和最新赛事
      getAllData();
      ElMessage({
        message: '正在刷新数据...',
        type: 'info'
      });
      break;
  }
};

const getOnlineUser = async () => {
  const res = await countOnlineUser();
  onlineUsers.value = res.data;
};

const updateTime = () => {
  const now = new Date();
  lastUpdateTime.value = now.toLocaleTimeString();
};

/**
 * 加载项目进度信息
 */
const loadProjectProgress = async () => {
  try {
    await gameEventStore.fetchDefaultEvent();
    if (!defaultEventInfo.value || !defaultEventInfo.value.eventId) return;
    
    const res = await getProjectProgress(defaultEventInfo.value.eventId);
    projectProgress.value = res.data || [];
    
    // 计算已完成和总任务数
    let completed = 0;
    let total = 0;
    
    projectProgress.value.forEach(project => {
      if (project.groups && project.groups.length > 0) {
        project.groups.forEach(group => {
          total++;
          if (group.status === '2') completed++;
        });
      } else {
        total++;
        if (project.status === '2') completed++;
      }
    });
    
    completedTasks.value = completed;
    totalTasks.value = total;
  } catch (error) {
    console.error('加载项目进度失败:', error);
  }
};

// 格式化函数
const formatTime = (timeStr: string) => {
  if (!timeStr) return '-';
  try {
    const date = new Date(timeStr);
    return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
  } catch (e) { return timeStr; }
};

const formatTimeOnly = (timeStr: string) => {
  if (!timeStr) return '-';
  try {
    const date = new Date(timeStr);
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false });
  } catch (e) { return timeStr; }
};

// 获取项目类型文本
const getProjectTypeText = (projectType: string) => {
  if (!game_project_type.value || !projectType) return '未知';
  
  const typeItem = game_project_type.value.find((item: any) => item.value === projectType);
  return typeItem ? typeItem.label : '未知';
};

const getStatusType = (status: string) => {
  switch(status) {
    case '0': return 'info';
    case '1': return 'primary';
    case '2': return 'success';
    default: return 'info';
  }
};

const getAllData = async () => {
  loadStatistics();
  loadRecentEvents();
  loadNotice();
  loadEventStatus();
  getOnlineUser();
  loadProjectProgress();
};

// 弹窗相关方法
const handleCloseRestoreDialog = () => {
  restoreDialogVisible.value = false;
  backupLoading.value = false;
};

// 备份数据库
const handleBackup = async () => {
  backupLoading.value = true;
  try {
    await proxy?.download('system/backup/backup', {}, `db_backup_${new Date().getTime()}.sql`);
    ElMessage({
      message: '数据库备份下载成功',
      type: 'success'
    });

    restoreDialogVisible.value = false;
  } catch (error) {
    console.error('备份失败:', error);
    ElMessage({
      message: '数据库备份失败，请稍后重试',
      type: 'error'
    });
  } finally {
    backupLoading.value = false;
  }
};

// 文件上传前的验证
const beforeUpload = (file: File) => {
  const isSQL = file.name.toLowerCase().endsWith('.sql');
  const isLt100M = file.size / 1024 / 1024 < 100;

  if (!isSQL) {
    ElMessage({
      message: '只能上传.sql格式的文件',
      type: 'error'
    });
    return false;
  }
  if (!isLt100M) {
    ElMessage({
      message: '上传文件大小不能超过100MB',
      type: 'error'
    });
    return false;
  }
  return true;
};

// 自定义文件上传处理
const handleFileUpload = async (options: any) => {
  const { file } = options;

  try {
    ElMessage({
      message: '正在恢复数据库，请稍等...',
      type: 'info',
      duration: 0
    });

    const response = await restoreDatabase(file);

    // 关闭加载消息
    ElMessage.closeAll();

    if (response.code === 200) {
      ElMessage({
        message: '数据库恢复成功',
        type: 'success'
      });
      restoreDialogVisible.value = false;

      // 刷新页面数据
      setTimeout(() => {
        getAllData();
      }, 1000);
    } else {
      ElMessage({
        message: response.msg || '数据库恢复失败',
        type: 'error'
      });
    }
  } catch (error) {
    ElMessage.closeAll();
    console.error('恢复失败:', error);
    ElMessage({
      message: '数据库恢复失败，请检查文件格式或稍后重试',
      type: 'error'
    });
  }
};

onMounted(() => {
  getAllData();
  updateTime();
  // 每分钟更新一次时间
  setInterval(updateTime, 60000);
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;

  .dashboard-title {
    font-size: 28px;
    color: #303133;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    .title-icon {
      color: #409eff;
    }
  }

  .dashboard-subtitle {
    font-size: 16px;
    color: #909399;
    margin: 0;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
  }
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;

  &.up {
    color: #67c23a;
  }

  &.down {
    color: #f56c6c;
  }
}

.charts-section {
  margin-bottom: 30px;
}

.chart-card {
  height: 400px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
  }

  .chart-container {
    height: 320px;
  }
}

.system-info {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .info-label {
    color: #909399;
    font-size: 14px;
  }

  .info-value {
    color: #303133;
    font-weight: 500;
  }
}

.quick-actions-card {
  margin-bottom: 30px;
}

.quick-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;

  .action-btn {
    flex: 1;
    min-width: 120px;
  }
}

.activity-section {
  .activity-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
    }
  }
}

.activity-list {
  .activity-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #409eff;
    margin-top: 6px;
    margin-right: 12px;
    flex-shrink: 0;

    &.notice {
      background: #e6a23c;
    }
  }

  .activity-content {
    flex: 1;
  }

  .activity-title {
    font-size: 14px;
    color: #303133;
    margin-bottom: 4px;
  }

  .activity-time {
    font-size: 12px;
    color: #909399;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quick-actions {
    .action-btn {
      min-width: 100px;
    }
  }
}

.event-status {
  .status-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: white;

    &.upcoming {
      background: #e6a23c;
    }

    &.ongoing {
      background: #67c23a;
    }

    &.completed {
      background: #909399;
    }

    &.total {
      background: #409eff;
    }
  }

  .status-content {
    flex: 1;
  }

  .status-count {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
    line-height: 1;
    margin-bottom: 4px;
  }

  .status-label {
    font-size: 14px;
    color: #909399;
  }
}

// 还原赛事弹窗样式
.restore-dialog-content {
  .restore-description {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;

    .description-icon {
      color: #409eff;
      margin-right: 12px;
      font-size: 20px;
    }

    p {
      margin: 0;
      color: #606266;
      font-size: 14px;
    }
  }

  .restore-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .action-card {
    border: 2px solid #e4e7ed;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
    }

    &.backup-card {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .action-icon {
        color: #67c23a;
        margin-right: 16px;
      }

      .action-content {
        flex: 1;

        h3 {
          margin: 0 0 8px 0;
          color: #303133;
          font-size: 16px;
          font-weight: 600;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }

    &.restore-card {
      .action-icon {
        color: #e6a23c;
        margin-bottom: 16px;
      }

      .action-content {
        margin-bottom: 20px;

        h3 {
          margin: 0 0 8px 0;
          color: #303133;
          font-size: 16px;
          font-weight: 600;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }

      .restore-upload {
        :deep(.el-upload) {
          width: 100%;
        }

        :deep(.el-upload-dragger) {
          width: 100%;
          height: 120px;
          border: 2px dashed #d9d9d9;
          border-radius: 8px;
          background: #fafafa;
          transition: all 0.3s ease;

          &:hover {
            border-color: #409eff;
            background: #f0f8ff;
          }
        }

        :deep(.el-icon--upload) {
          font-size: 32px;
          color: #c0c4cc;
          margin-bottom: 8px;
        }

        :deep(.el-upload__text) {
          color: #606266;
          font-size: 14px;

          em {
            color: #409eff;
            font-style: normal;
          }
        }

        :deep(.el-upload__tip) {
          margin-top: 8px;
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }
}
.fixed-height-card {
  height: 600px;
}

.fixed-height-card :deep(.el-card__body) {
  height: calc(100% - 55px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.progress-summary {
  padding: 10px 0;
}

.project-vertical-list {
  flex: 1;
  overflow-y: auto;
}

.project-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px 0;
  padding-right: 80px; /* 增加右侧内边距，使内容往中间靠 */
  border-bottom: 1px solid #f0f2f5;
}

.row-left {
  flex: 1; /* 减小比例，让出更多空间给中间和右侧 */
  font-weight: 500;
  color: #303133;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-center {
  flex: 1;
  text-align: center;
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
}

.row-center span {
  display: block;
}

.row-right {
  width: 100px;
  flex:  1;
  text-align: right;
  color: #909399;
  font-size: 13px;
  white-space: nowrap;
  padding-right: 5px;
}

.row-groups {
  width: 100%;
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #e4e7ed;
}

.group-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}

.group-name {
  width: 100px;
  color: #666;
}

.group-time {
  width: 100px;
  color: #999;
}

.group-status {
  margin-left: auto;
}

.status-0 { color: #909399; }
.status-1 { color: #409eff; }
.status-2 { color: #67c23a; }

/* 右侧堆叠 */
.right-stack {
  height: 600px;
  display: flex;
  flex-direction: column;
}

.mb-20 {
  margin-bottom: 20px;
}

.activity-card {
  flex: 1;
}

.activity-card :deep(.el-card__body) {
  height: calc(100% - 55px);
  overflow-y: auto;
}

/* 恢复之前的 activity 样式 */
.activity-list {
  padding: 10px 0;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #409eff;
  margin-right: 15px;
  flex-shrink: 0;
}

.activity-dot.notice {
  background-color: #f56c6c;
}

.activity-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-title {
  font-size: 14px;
  color: #303133;
}

.activity-time {
  font-size: 12px;
  color: #999;
}
</style>
