<template>
  <div class="maps">
    <div class="page-header">
      <h1>活跃作者推荐</h1>
    </div>
    <div class="table-container">
      <table class="maps-table">
        <thead>
          <tr>
            <th class="rank-column">排名</th>
            <th>作者名称</th>
            <th>积分</th>
            <th>最近三个月活跃</th>
            <th>最近一个月活跃</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(editor, index) in displayedEditors" :key="editor.update_editor" class="table-row" @click="goToAuthorMaps(editor.update_editor)">
            <td class="rank-column">{{ index + 1 }}</td>
            <td class="author-name">{{ editor.update_editor }}</td>
            <td>{{ editor.credits }}</td>
            <td>
              <span :class="['status-badge', editor.three_month_live ? 'active' : 'inactive']">
                {{ editor.three_month_live ? '是' : '否' }}
              </span>
            </td>
            <td>
              <span :class="['status-badge', editor.one_month_live ? 'active' : 'inactive']">
                {{ editor.one_month_live ? '是' : '否' }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="expand-button" @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开更多' }}
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { getMapEditors } from '@/api/centre_maps.js'
import '../../assets/styles/common.css'
import '../../assets/styles/Maps.css'

const router = useRouter()
const sortedEditors = ref([])
const isExpanded = ref(false)

// 计算要显示的作者列表
const displayedEditors = computed(() => {
  return isExpanded.value ? sortedEditors.value : sortedEditors.value.slice(0, 10)
})

// 跳转到作者地图列表
const goToAuthorMaps = (authorName) => {
  router.push({
    name: 'EditorsMaps',
    query: {
      author: authorName
    }
  })
}

const editorsList = async () => {
  try {
    // 获取作者列表并按积分排序
    const editorsData = await getMapEditors();
    sortedEditors.value = editorsData.sort((a, b) => b.credits - a.credits);
    console.log('排序后的作者列表:', sortedEditors.value);
  } catch (error) {
    console.error('获取列表失败:', error);
  }
}

// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

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

<style scoped>
.maps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.maps-table th,
.maps-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.maps-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.rank-column {
  width: 80px;
  text-align: center;
  font-weight: bold;
  color: #1a237e;
}

.table-row {
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.author-name {
  font-weight: bold;
  color: #1a237e;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: 500;
}

.status-badge.active {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.inactive {
  background-color: #ffebee;
  color: #c62828;
}

.expand-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  padding: 10px 20px;
  background-color: #1a237e;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.expand-button:hover {
  background-color: #283593;
}
</style> 