<template>
  <a-modal :open="visible" class="ks-ranking-modal" centered width="98%" :footer="null" @cancel="handleCancel">
    <div class="modal-overlay"></div>
    <div class="ranking-container">
      <!-- 表头 -->
      <div class="table-header">
        <div class="header-row">
          <div class="header-cell rank">排名</div>
          <div class="header-cell team">团队</div>
          <div class="header-cell red-win-rate">红方胜率</div>
          <div class="header-cell blue-win-rate">蓝方胜率</div>
          <div class="header-cell red-matches">红方场次</div>
          <div class="header-cell blue-matches">蓝方场次</div>
          <div class="header-cell invalid-matches">博弈关键节点</div>
          <div class="header-cell total-score">总分</div>
          <div class="header-cell total-win-rate">总胜率</div>
        </div>
      </div>

      <!-- 排行榜主体 -->
      <div class="ranking-body">
        <template v-for="(team, index) in sortedTeams">
          <div
            class="team-row"
            :class="[team.isFlipping ? 'flipping' : '', indexClasses[index] ? indexClasses[index] : '']"
            :style="getRowStyle(index)"
          >
            <div class="row-front">
              <div class="cell rank" :class="getRankClass(team.rank)">
                <span class="rank-number">{{ team.rank }}</span>
                <!--                <span v-if="team.rankChange !== 0" class="rank-change" :class="getChangeClass(team.rankChange)">-->
                <!--              {{ getChangeSymbol(team.rankChange) }}-->
                <!--            </span>-->
              </div>
              <div class="cell team">
                <div class="team-info">
                  <div class="team-name">{{ team.name }}</div>
                </div>
              </div>
              <div class="cell red-win-rate">
                {{ String(team.redWinRate).substring(0, 5) }}%
              </div>
              <div class="cell blue-win-rate">
                {{ String(team.blueWinRate).substring(0, 5) }}%
              </div>
              <div class="cell red-matches">{{ team.redMatches }}</div>
              <div class="cell blue-matches">{{ team.blueMatches }}</div>
              <div class="cell invalid-matches">{{ team.invalidMatches }}</div>
              <div class="cell total-score">{{ team.totalScore }}</div>
              <div class="cell total-win-rate">
                {{ String(team.totalWinRate).substring(0, 5) }}%
              </div>
            </div>

            <!-- 行背面（翻转时显示） -->
            <div class="row-back">
              <div class="back-content">
                <div class="back-title">团队详情</div>
                <div class="back-stats">
                  <div>总场次: {{ team.totalMatches }}</div>
                  <div>红方胜场: {{ team.redWins }}</div>
                  <div>蓝方胜场: {{ team.blueWins }}</div>
                  <div>连续胜场: {{ team.winStreak }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- 控制面板 -->
      <!--      <div class="control-panel">-->
      <!--        <button @click="toggleAutoRefresh" :class="{ active: autoRefresh }">-->
      <!--          {{ autoRefresh ? '暂停更新' : '开始更新' }}-->
      <!--        </button>-->
      <!--        <button @click="manualUpdate">手动更新排名</button>-->
      <!--        <button @click="triggerFlip">手动翻转</button>-->
      <!--        <div class="timer-display">-->
      <!--          下次更新: {{ nextUpdateTime }}秒-->
      <!--        </div>-->
      <!--      </div>-->
    </div>

    <template #title>
      <div class="header-export-button">
        <a-tooltip title="排名结果导出" placement="bottom">
          <CloudDownloadOutlined class="download-icon" @click="handleExport"/>
<!--          <span style="margin-left:10px;">排名结果导出</span>-->
        </a-tooltip>
      </div>
    </template>

  </a-modal>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, ref, type CSSProperties, type SetupContext } from 'vue';
import {CloudDownloadOutlined} from '@ant-design/icons-vue';
// 定义团队数据接口
interface Team {
  id: number;
  name: string;
  rank: number;
  redWinRate: number;
  blueWinRate: number;
  redMatches: number;
  blueMatches: number;
  invalidMatches: string;
  totalScore: number;
  totalWinRate: number;
  rankChange: number;
  isFlipping?: boolean;
  // 计算属性（实例getter）
  totalMatches: number;
  redWins: number;
  blueWins: number;
  winStreak: number;
}

// 定义Props类型
interface RankProps {
  visible: boolean;
}

// 定义Emits类型
type RankEmits = {
  cancel: []; // 无参数的cancel事件
};

// 团队数据（添加类型注解）
const teams = ref<Team[]>([
  { id: 1, name: '团队3', rank: 1, redWinRate: 85, blueWinRate: 72, redMatches: 20, blueMatches: 18, invalidMatches: "2:30'50''", totalScore: 95, totalWinRate: 78, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 2, name: '红方', rank: 2, redWinRate: 78, blueWinRate: 81, redMatches: 22, blueMatches: 20, invalidMatches: "1:31'30''", totalScore: 92, totalWinRate: 79, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 3, name: '团队3', rank: 3, redWinRate: 80, blueWinRate: 75, redMatches: 18, blueMatches: 16, invalidMatches: "2:10'22''", totalScore: 90, totalWinRate: 77, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 4, name: '团队4', rank: 4, redWinRate: 72, blueWinRate: 85, redMatches: 19, blueMatches: 21, invalidMatches: "3:01'12''", totalScore: 88, totalWinRate: 76, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 5, name: '团队8', rank: 5, redWinRate: 68, blueWinRate: 79, redMatches: 17, blueMatches: 19, invalidMatches: "2:45'21''", totalScore: 85, totalWinRate: 73, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 6, name: '团队5', rank: 6, redWinRate: 75, blueWinRate: 70, redMatches: 16, blueMatches: 15, invalidMatches: "1:02'33''", totalScore: 82, totalWinRate: 72, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 7, name: '团队7', rank: 7, redWinRate: 70, blueWinRate: 65, redMatches: 14, blueMatches: 13, invalidMatches: "3:20'10''", totalScore: 78, totalWinRate: 68, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 8, name: '团队6', rank: 8, redWinRate: 65, blueWinRate: 72, redMatches: 12, blueMatches: 14, invalidMatches: "2:33'16''", totalScore: 75, totalWinRate: 67, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 9, name: '蓝方0', rank: 9, redWinRate: 60, blueWinRate: 68, redMatches: 10, blueMatches: 12, invalidMatches: "2:12'54''", totalScore: 70, totalWinRate: 63, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
  { id: 10, name: '团队9', rank: 10, redWinRate: 55, blueWinRate: 60, redMatches: 8, blueMatches: 10, invalidMatches: "3:01'02''", totalScore: 65, totalWinRate: 58, rankChange: 0,
    totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
]);

export default defineComponent({
  components: {
    CloudDownloadOutlined,
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
  },
  emits: {
    cancel: () => true
  },
  setup(_props: RankProps, { emit }: SetupContext<RankEmits>) {
    const autoRefresh = ref<boolean>(true);
    const nextUpdateTime = ref<number>(30);

    let rankTimer: any | null = null;
    let flipTimer: any | null = null;
    let countdownTimer: any | null = null;

    const indexClasses: Record<number, string> = {
      0: 'first-row',
      1: 'second-row',
      2: 'third-row',
    };

    const sortedTeams = computed<Team[]>(() => {
      return [...teams.value].sort((a, b) => a.rank - b.rank);
    });

    const getRowStyle = (index: number): CSSProperties => {
      const delay = index * 0.1;
      return {
        '--flip-delay': `${delay}s`,
      };
    };

    // 获取排名样式类
    const getRankClass = (rank: number): string => {
      if (rank === 1) return 'rank-first';
      if (rank === 2) return 'rank-second';
      if (rank === 3) return 'rank-third';
      return '';
    };

    // 获取变化样式类
    const getChangeClass = (change: number): string => {
      if (change > 0) return 'change-up';
      if (change < 0) return 'change-down';
      return '';
    };

    // 获取变化符号
    const getChangeSymbol = (change: number): string => {
      if (change > 0) return `↑${change}`;
      if (change < 0) return `↓${Math.abs(change)}`;
      return '-';
    };

    // 手动更新排名
    const manualUpdate = (): void => {
      updateRankings();
    };

    // 手动触发翻转
    const triggerFlip = (): void => {
      teams.value.forEach(team => {
        team.isFlipping = true;
        setTimeout(() => {
          team.isFlipping = false;
        }, 600);
      });
    };

    // 切换自动更新
    const toggleAutoRefresh = (): void => {
      autoRefresh.value = !autoRefresh.value;
      if (autoRefresh.value) {
        startTimers();
      } else {
        clearTimers();
      }
    };

    // 更新排名逻辑
    const updateRankings = (): void => {
      // 保存旧排名（Record类型：key为team.id，value为rank）
      const oldRanks: Record<number, number> = teams.value.reduce((acc, team) => {
        acc[team.id] = team.rank;
        return acc;
      }, {} as Record<number, number>);

      // 随机打乱并重新分配排名
      const shuffled: Team[] = [...teams.value]
        .sort(() => Math.random() - 0.5)
        .map((team, index) => ({
          ...team,
          rank: index + 1,
          // 随机更新一些数据（保持数值范围合理性）
          redWinRate: Math.min(100, Math.max(50, team.redWinRate + (Math.random() * 10 - 5))),
          blueWinRate: Math.min(100, Math.max(50, team.blueWinRate + (Math.random() * 10 - 5))),
          redMatches: team.redMatches + Math.floor(Math.random() * 3),
          blueMatches: team.blueMatches + Math.floor(Math.random() * 2),
          totalScore: team.totalScore + Math.floor(Math.random() * 5),
          totalWinRate: Math.min(100, Math.max(50, team.totalWinRate + (Math.random() * 8 - 4))),
        }))
        .map(team => {
          // 计算排名变化
          const oldRank = oldRanks[team.id] as number;
          team.rankChange = oldRank - team.rank;
          return team;
        });

      teams.value = shuffled;
    };

    // 翻转动画
    const flipRows = (): void => {
      teams.value.forEach(team => {
        team.isFlipping = true;
        setTimeout(() => {
          team.isFlipping = false;
        }, 600);
      });
    };

    // 开始定时器
    const startTimers = (): void => {
      // 排名更新定时器（30秒）
      rankTimer = setInterval(() => {
        updateRankings();
      }, 30000);

      // 翻转定时器（15秒）
      flipTimer = setInterval(() => {
        flipRows();
      }, 15000);

      // 倒计时显示
      nextUpdateTime.value = 30;
      countdownTimer = setInterval(() => {
        nextUpdateTime.value--;
        if (nextUpdateTime.value <= 0) {
          nextUpdateTime.value = 30;
        }
      }, 1000);
    };

    // 清除定时器
    const clearTimers = (): void => {
      if (rankTimer) clearInterval(rankTimer);
      if (flipTimer) clearInterval(flipTimer);
      if (countdownTimer) clearInterval(countdownTimer);
      // 重置定时器变量
      rankTimer = null;
      flipTimer = null;
      countdownTimer = null;
    };

    // 生命周期：挂载时初始化
    onMounted(() => {
      // 为每个团队添加计算属性（实例getter）
      teams.value = teams.value.map(team => ({
        ...team,
        isFlipping: false,
        get totalMatches() {
          // 注意：invalidMatches是时间字符串，这里原逻辑有问题，暂时保持原有写法
          return this.redMatches + this.blueMatches + this.invalidMatches.length;
        },
        get redWins() {
          return Math.round(this.redMatches * this.redWinRate / 100);
        },
        get blueWins() {
          return Math.round(this.blueMatches * this.blueWinRate / 100);
        },
        get winStreak() {
          return Math.floor(Math.random() * 10) + 1;
        },
      }));

      if (autoRefresh.value) {
        startTimers();
      }
    });

    // 生命周期：卸载时清理
    onUnmounted(() => {
      clearTimers();
    });

    // 取消事件处理
    const handleCancel = (): void => emit('cancel');

    const handleExport = () => {
      try {
        // 创建临时a标签用于触发下载
        const link = document.createElement('a');
        // 设置导出接口地址（如果有URL参数可直接拼接，如：/api/xxx?startTime=2026-01-01）
        link.href = '/api/modelDeduction/downloadRankData';
        // 自定义下载文件名（后端也可通过响应头覆盖此值）
        link.download = '排名数据.xlsx';
        // 部分浏览器需要将a标签加入DOM才能触发下载
        document.body.appendChild(link);
        // 触发点击下载
        link.click();
        // 下载完成后移除临时标签，清理DOM
        document.body.removeChild(link);
      } catch (error) {
        // 异常捕获，给用户友好提示
        console.error('导出失败：', error);
        alert('数据导出失败，请稍后重试！');
      }
    };

    return {
      handleCancel,
      indexClasses,
      sortedTeams,
      getRowStyle,
      getRankClass,
      getChangeClass,
      toggleAutoRefresh,
      autoRefresh,
      manualUpdate,
      triggerFlip,
      nextUpdateTime,
      getChangeSymbol,
      handleExport,
    };
  },
});
</script>

<style lang="less">

.ks-ranking-modal {
  position: relative;
  background: #0d1f34;
  background: url('@/assets/rank/titled-container.png') center / 100% 100%;

  .ant-modal-close {
    right: 65px;
    top: 65px;
  }

  .ant-modal-content{
    position: relative;
  }

  .export-button{
    position: absolute;
    right: 60px;
    bottom: 40px;
  }

  .header-export-button{
    position: absolute;
    right: 100px;
    top: 68px;
    .download-icon{
      cursor: pointer;
      width: 23px;
      height: 23px;
      font-size: 14px;
      border-radius: 50%;
      border: 1px solid #10e5ff;
      text-align: center;
      display: block;
      line-height: 20px;
      color: #10e5ff;
    }
  }

  //.modal-overlay {
  //  background: #000000b0;
  //  position: absolute;
  //  width: 100%;
  //  height: 100%;
  //  z-index: -1;
  //}

  .ranking-container {
    padding: 10px 30px;
  }

  .table-header {
    background: rgba(255, 255, 255, 0.05);
    margin-top: 100px;
    margin-bottom: 10px;
  }

  .header-row {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1.2fr 1.2fr 1fr 1fr 1fr 0.8fr 1.2fr;
    padding: 15px 20px;
    gap: 10px;
  }

  .header-cell {
    color: #8da2c0;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    &.rank{
      margin-left: 15px;
    }
  }

  .ranking-body {
    min-height: 600px;
  }

  .team-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    transform-origin: center center;
    height: 50px;
    overflow: hidden;
    background: url('@/assets/rank/bg-3.png') center / 100% 100%;

    .rank-number {
      width: 60px;
      height: 40px;
      text-align: center;
      font-size: 18px;
      color: #fff;
      line-height: 40px;
    }

    &.first-row {
      background: url('@/assets/rank/bg-1.png') center / 100% 100%;

      .rank-number {
        background: url('@/assets/rank/icon-1.png') center / 100% 100%;
      }
    }

    &.second-row {
      background: url('@/assets/rank/bg-2.png') center / 100% 100%;

      .rank-number {
        background: url('@/assets/rank/icon-2.png') center / 100% 100%;
      }
    }

    &.third-row {
      .rank-number {
        background: url('@/assets/rank/icon-3.png') center / 100% 100%;
      }
    }
  }

  .team-row.flipping {
    transform: rotateX(180deg);
    transition-delay: var(--flip-delay);
  }

  .row-front,
  .row-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1.2fr 1.2fr 1fr 1fr 1fr 0.8fr 1.2fr;
    padding: 0 20px;
    gap: 10px;
    align-items: center;
  }

  .row-back {
    background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
    transform: rotateX(180deg);
    color: white;
    border-radius: 8px;
  }

  .back-content {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .back-title {
    font-size: 18px;
    font-weight: bold;
  }

  .back-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
    font-size: 14px;
  }

  .rank,
  .cell {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  //.rank {
  //  font-weight: bold;
  //  font-size: 18px;
  //  justify-content: center;
  //  position: relative;
  //}

  .rank-first {
    color: #ffd700;
  }

  .rank-second {
    color: #c0c0c0;
  }

  .rank-third {
    color: #cd7f32;
  }

  .rank-number {
    margin-right: 5px;
  }

  .rank-change {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
  }

  .change-up {
    color: #4CAF50;
  }

  .change-down {
    color: #f44336;
  }

  .team-info {
    display: flex;
    flex-direction: column;
  }

  .team-name {
    font-weight: bold;
    margin-bottom: 4px;
  }

  .team-id {
    font-size: 11px;
    color: #8da2c0;
  }

  .progress-bar {
    background: rgba(255, 255, 255, 0.1);
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .progress-bar.blue .progress-fill {
    background: linear-gradient(90deg, #2196F3, #03A9F4);
  }

  .progress-bar.total .progress-fill {
    background: linear-gradient(90deg, #FF9800, #FFC107);
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f44336, #ff9800);
    border-radius: 10px;
    transition: width 0.3s ease;
  }

  .progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .control-panel {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .control-panel button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .control-panel button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }

  .control-panel button.active {
    background: linear-gradient(135deg, #4a00e0, #8e2de2);
  }

  .timer-display {
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: #8da2c0;
    font-size: 14px;
  }
}

</style>