<template>
  <div class="weekly-recommend">
    <div class="page-header">
      <h1>每周热门下载地图</h1>
      <div class="header-subtitle">
        <span class="date-range">{{ currentWeekRange }}</span>
      </div>
    </div>
    <div class="table-container">
      <table class="maps-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>预览图</th>
            <th>地图名称</th>
            <th>作者</th>
            <th>下载次数</th>
            <th>收藏次数</th>
            <th>玩家数量</th>
            <th>创建时间</th>
            <th>标签</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(map, index) in recommendedMaps" :key="map.id" @click="goToMapDetail(map.id)" class="table-row">
            <td class="rank-number">{{ index + 1 }}</td>
            <td class="preview-cell">
              <img :src="map.thumbnail" :alt="map.chinese_name">
            </td>
            <td class="map-name">{{ map.chinese_name }}</td>
            <td>{{ map.user }}</td>
            <td>{{ map.download_count }}</td>
            <td>{{ map.favourite_count }}</td>
            <td>{{ map.player_count }}</td>
            <td>{{ formatDate(map.create_time) }}</td>
            <td>
              <div class="tags">
                <span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getWeeklyTopMaps } from '../../api/maps.js'
import '../../assets/styles/common.css'
import '../../assets/styles/WeeklyRecommend.css'

const router = useRouter()
const recommendedMaps = ref([])

// 获取当前周的范围
const currentWeekRange = computed(() => {
  const end = new Date()
  const start = new Date()
  start.setDate(start.getDate() - 6) // 往前推6天，这样加上今天就是7天
  return `${start.toLocaleDateString('zh-CN')} - 今天 ${end.toLocaleDateString('zh-CN')}`
})

const goToMapDetail = (id) => {
  router.push(`/map/${id}`)
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const fetchRecommendedMaps = async () => {
  try {
    const maps = await getWeeklyTopMaps()
    
    // 计算7天前的日期
    const sevenDaysAgo = new Date()
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6) // 往前推6天，加上今天就是7天
    
    // 过滤出最近7天的地图
    const recentMaps = maps.filter(map => {
      const mapDate = new Date(map.create_time)
      return mapDate >= sevenDaysAgo
    })

    // 按日期分组
    const groupedMaps = recentMaps.reduce((groups, map) => {
      const date = new Date(map.create_time).toLocaleDateString('zh-CN')
      if (!groups[date]) {
        groups[date] = []
      }
      groups[date].push(map)
      return groups
    }, {})

    // 对每个日期组内的地图按下载量降序排序
    Object.keys(groupedMaps).forEach(date => {
      groupedMaps[date].sort((a, b) => b.download_count - a.download_count)
    })

    // 获取所有日期并按降序排序
    const sortedDates = Object.keys(groupedMaps).sort((a, b) => 
      new Date(b) - new Date(a)
    )

    // 按日期顺序拼接所有地图
    recommendedMaps.value = sortedDates.reduce((acc, date) => {
      return acc.concat(groupedMaps[date])
    }, [])
  } catch (error) {
    console.error('获取推荐地图失败:', error)
  }
}

onMounted(() => {
  fetchRecommendedMaps()
})
</script>

<style scoped>
.rank-number {
  font-weight: bold;
  color: #1a237e;
  text-align: center;
  width: 50px;
  font-size: 1.1em;
}
</style> 