<!--
 * @Date: 2025-01-09 00:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-11 15:40:19
 * @FilePath: /lls_program/src/components/RankingCard.vue
 * @Description: 排行榜卡片组件
-->
<template>
  <view class="ranking-card">
    <!-- 卡片头部 -->
    <view class="card-header">
      <view class="card-title">全市排行</view>
      <view class="view-more" @tap="handleViewMore">查看更多</view>
    </view>

    <!-- 顶部导航 -->
    <view class="nav-tabs">
      <!-- 滑动指示器 -->
      <view
        class="tab-indicator"
        :class="{ 'indicator-shanghai': activeTab === 'shanghai' }"
      ></view>
      <view
        v-for="region in availableRegions.slice(0, 2)"
        :key="region.value"
        class="tab-item"
        :class="{ active: activeTab === region.value }"
        @click="switchTab(region.value)"
      >
        {{ region.text === '上海市' ? '上海榜' : region.text.replace('区', '榜') }}
      </view>
    </view>

    <!-- 排行榜内容 -->
    <view class="rank-content" :class="{ 'content-switching': isContentSwitching }">
      <!-- 排行榜日期 -->
      <view class="rank-date">
        {{ currentDate }}
      </view>
      <!-- 前三名展示 -->
      <view class="top-three">
        <!-- 第二名 -->
        <view v-if="topRanks[1]" class="rank-item second">
          <view class="crown crown-silver">👑</view>
          <view class="avatar">
            <image :src="topRanks[1]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topRanks[1]?.name }}</view>
          <view class="leader-name">大家长：{{ topRanks[1]?.created_by_nickname }}</view>
          <view class="rank-number">
            <view class="rank-num">2</view>
            <view class="steps-in-rank">{{ formatSteps(topRanks[1]?.step) }}</view>
          </view>
        </view>

        <!-- 第一名 -->
        <view v-if="topRanks[0]" class="rank-item first">
          <view class="crown crown-gold">👑</view>
          <view class="avatar">
            <image :src="topRanks[0]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topRanks[0]?.name }}</view>
          <view class="leader-name">大家长：{{ topRanks[0]?.created_by_nickname }}</view>
          <view class="rank-number">
            <view class="rank-num">1</view>
            <view class="steps-in-rank">{{ formatSteps(topRanks[0]?.step) }}</view>
          </view>
        </view>

        <!-- 第三名 -->
        <view v-if="topRanks[2]" class="rank-item third">
          <view class="crown crown-bronze">👑</view>
          <view class="avatar">
            <image :src="topRanks[2]?.avatar_url || defaultAvatar" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topRanks[2]?.name }}</view>
          <view class="leader-name">大家长：{{ topRanks[2]?.created_by_nickname }}</view>
          <view class="rank-number">
            <view class="rank-num">3</view>
            <view class="steps-in-rank">{{ formatSteps(topRanks[2]?.step) }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的排名卡片 -->
    <view v-if="myRank" class="my-rank-section">
      <view class="my-rank-content">
        <view class="my-rank-left">
          <view class="my-rank-number">
            {{ myRank.isNotRanked ? '未上榜' : (myRank.rank > 99 ? myRank.rank + '+' : myRank.rank) }}
          </view>
          <view class="my-avatar">
            <image :src="myRank.avatar_url || defaultAvatar" class="my-avatar-img" mode="aspectFill" />
          </view>
          <view class="my-family-info">
            <view class="my-family-name">{{ myRank.name }}</view>
            <view class="my-leader-name">大家长：{{ myRank.created_by_nickname }}</view>
          </view>
        </view>
        <view class="my-rank-right">
          <view class="my-steps">{{ formatStepsForList(myRank.step) }}</view>
          <view class="rank-status">{{ myRank.status }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
// 导入接口
import { getStepLeaderboardAPI } from '@/api/points'

// 区域信息
import { SHANGHAI_REGION as shanghaiRegion } from '@/utils/config'

const shanghaiRegionOptions = computed(() => {
  return shanghaiRegion.map(item => ({
    text: item.text,
    value: String(item.value)
  }))
})

// 定义props
const props = defineProps({
  onViewMore: {
    type: Function,
    default: () => {}
  }
})

// 当前激活的tab
const activeTab = ref('310101')

// 内容切换状态
const isContentSwitching = ref(false)

// 排行榜数据
const leaderboardData = ref(null)

// 加载状态
const loading = ref(false)

// 排行榜日期
const currentDate = ref('')

/**
 * 切换tab
 * @param {string} tab - tab名称
 */
const switchTab = async (tab) => {
  if (activeTab.value === tab) return

  // 开始切换动画
  isContentSwitching.value = true

  // 延迟切换内容，让淡出动画先执行
  setTimeout(async () => {
    activeTab.value = tab

    // 重新加载排行榜数据
    await loadLeaderboardData(false)

    // 内容切换后，结束切换状态，开始淡入动画
    setTimeout(() => {
      isContentSwitching.value = false
    }, 50)
  }, 200)
}

/**
 * 加载排行榜数据
 * @param {boolean} isInitialLoad - 是否为初始加载，避免无限递归
 */
const loadLeaderboardData = async (isInitialLoad = false) => {
  try {
    loading.value = true
    const params = {}

    // 添加current_county参数：1=是，0=否，默认为否
    // 根据activeTab动态设置：上海榜时为0，区域榜时为1
    params.current_county = activeTab.value === 'shanghai' ? '0' : '1'

    const response = await getStepLeaderboardAPI(params)
    if (response.code) {
      leaderboardData.value = response.data
      // 设置当前日期
      currentDate.value = response.data.yesterday

      // 只在初始加载时从current_family.county获取区县信息，设置默认tab
      if (isInitialLoad && response.data.current_family) {
        const currentFamilyCounty = response.data.current_family.county;
        if (currentFamilyCounty && String(currentFamilyCounty) !== activeTab.value) {
          // 只在county与当前activeTab不同时才设置，确保county字段为字符串格式
          activeTab.value = String(currentFamilyCounty)
          // 设置activeTab后需要重新加载数据以获取正确的区县排行榜
          await loadLeaderboardData(false)
          return
        }
      }
    }
  } catch (error) {
    console.error('获取排行榜数据失败:', error)
  } finally {
    loading.value = false
  }
}

/**
 * 计算当前区域的中文名称
 */
const currentRegionName = computed(() => {
  if (activeTab.value === 'shanghai') {
    return '上海市'
  }
  const region = shanghaiRegionOptions.value.find(item => item.value === activeTab.value)
  return region ? region.text : '黄浦区'
})

/**
 * 计算可用的区域选项
 */
const availableRegions = computed(() => {
  // 从current_family.county获取区县信息，优先显示用户区域，然后是上海市
  const currentFamilyCounty = leaderboardData.value?.current_family?.county
  if (currentFamilyCounty) {
    // 确保county字段为字符串格式进行比较
    const userCounty = String(currentFamilyCounty)
    // value值需要转成字符串进行比较
    const userRegion = shanghaiRegionOptions.value.find(item => item.value === userCounty)
    if (userRegion) {
      // 用户区域在第一位，上海市在第二位
      return [userRegion, { text: '上海市', value: 'shanghai' }]
    }
  }

  // 默认显示黄浦区和上海市
  return [
    { text: '黄浦区', value: '310101' },
    { text: '上海市', value: 'shanghai' }
  ]
})

/**
 * 格式化步数显示
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatSteps = (steps) => {
  return steps ? steps.toLocaleString() : '0'
}

/**
 * 格式化步数显示（用于列表显示，使用千位分隔符格式）
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatStepsForList = (steps) => {
  return steps ? steps.toLocaleString() : '0'
}

/**
 * 处理查看更多点击事件
 */
const handleViewMore = () => {
  if (props.onViewMore) {
    props.onViewMore()
  }
}



// 计算前三名数据
const topRanks = computed(() => {
  if (!leaderboardData.value || !leaderboardData.value.families) {
    return []
  }
  return leaderboardData.value.families.slice(0, 3)
})

// 计算我的排名信息
const myRank = computed(() => {
  if (!leaderboardData.value || !leaderboardData.value.current_family) {
    return null
  }

  const currentFamily = leaderboardData.value.current_family

  // 如果没有排名信息，返回未上榜状态
  if (!currentFamily.rank || currentFamily.rank === 0) {
    return {
      ...currentFamily,
      rank: 0,
      status: '未上榜',
      isNotRanked: true
    }
  }

  return {
    ...currentFamily,
    status: currentFamily.rank > 100 ? '未上榜' : '已上榜',
    isNotRanked: false
  }
})

/**
 * 刷新排行榜数据
 */
const refreshData = async () => {
  await loadLeaderboardData(true)
}

/**
 * 页面初始化
 */
onMounted(async () => {
  // 直接加载排行榜数据，使用current_county参数获取当前家庭所在区县信息
  await loadLeaderboardData(true)
})

// 暴露刷新方法给父组件
defineExpose({
  refreshData
})
</script>

<style lang="less">
.ranking-card {
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  margin: 30rpx;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .card-title {
      color: white;
      font-size: 32rpx;
      font-weight: 600;
    }

    .view-more {
      color: rgba(255, 255, 255, 0.8);
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      // border: 1rpx solid rgba(255, 255, 255, 0.3);
      // border-radius: 20rpx;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }
    }
  }

  .nav-tabs {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 60rpx;
    padding: 8rpx;
    margin-bottom: 40rpx;
    position: relative;
    overflow: hidden;

    .tab-indicator {
      position: absolute;
      top: 8rpx;
      left: 8rpx;
      width: calc(50% - 8rpx);
      height: calc(100% - 16rpx);
      background: rgba(255, 255, 255, 1);
      border-radius: 52rpx;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      z-index: 1;

      &.indicator-shanghai {
        transform: translateX(100%);
      }
    }

    .tab-item {
      flex: 1;
      padding: 20rpx 0;
      text-align: center;
      border-radius: 52rpx;
      color: rgba(255, 255, 255, 0.8);
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
      cursor: pointer;

      &.active {
        color: var(--primary-color);
        font-weight: 600;
        transform: scale(1.02);
      }

      &:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .rank-content {
    transition: all 0.3s ease;
    transform: translateY(0);
    opacity: 1;

    &.content-switching {
      opacity: 0.3;
      // transform: translateY(-20rpx);
    }

    .rank-date {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
    }
  }

  .top-three {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    // margin-bottom: 40rpx;
    // height: 280rpx;
    gap: -20rpx;

    .rank-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      .crown {
        font-size: 30rpx;
        // margin-bottom: 8rpx;

        &.crown-gold {
          filter: grayscale(0.3) brightness(1.1);
        }

        &.crown-silver {
          filter: hue-rotate(45deg) brightness(1.2);
        }

        &.crown-bronze {
          filter: hue-rotate(25deg) brightness(0.9);
        }
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 4rpx solid rgba(255, 255, 255, 0.8);
        margin-bottom: 12rpx;

        .avatar-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .family-name {
        color: white;
        font-size: 20rpx;
        font-weight: 600;
        margin-bottom: 6rpx;
        text-align: center;
      }

      .leader-name {
        color: rgba(255, 255, 255, 0.8);
        font-size: 16rpx;
        margin-bottom: 12rpx;
        text-align: center;
      }

      .rank-number {
        width: 100rpx;
        height: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
        border-radius: 16rpx 16rpx 0 0;
        box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);

        .rank-num {
          font-size: 32rpx;
          font-weight: bold;
          color: white;
          margin-bottom: 8rpx;
        }

        .steps-in-rank {
          font-size: 22rpx;
          font-weight: 600;
          color: white;
          text-align: center;
          line-height: 1.2;
        }
      }

      &.second {
        order: 1;
        margin-top: 40rpx;
        margin-right: -10rpx;
        z-index: 2;

        .avatar {
          box-shadow: 0 0 10rpx rgba(192, 192, 192, 0.4);
        }

        .rank-number {
          width: 150rpx;
          height: 110rpx;
          background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
        }
      }

      &.first {
        order: 2;
        z-index: 3;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-color: #FFD700;
          box-shadow: 0 0 15rpx rgba(255, 215, 0, 0.5);
        }

        .rank-number {
          width: 150rpx;
          height: 140rpx;
          background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
        }
      }

      &.third {
        order: 3;
        margin-top: 40rpx;
        margin-left: -10rpx;
        z-index: 1;

        .avatar {
          box-shadow: 0 0 10rpx rgba(205, 127, 50, 0.4);
        }

        .rank-number {
          width: 150rpx;
          height: 100rpx;
          background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
        }
      }
    }
  }

  .my-rank-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16rpx;
    padding: 20rpx 24rpx;
    backdrop-filter: blur(10px);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

    .my-rank-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .my-rank-left {
        display: flex;
        align-items: center;
        flex: 1;

        .my-rank-number {
          width: 48rpx;
          height: 48rpx;
          background: var(--primary-color);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          font-weight: bold;
          color: white;
          margin-right: 20rpx;
        }

        .my-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20rpx;

          .my-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .my-family-info {
          flex: 1;

          .my-family-name {
            font-size: 24rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 6rpx;
          }

          .my-leader-name {
            font-size: 20rpx;
            color: #666;
          }
        }
      }

      .my-rank-right {
        text-align: right;

        .my-steps {
          font-size: 26rpx;
          font-weight: bold;
          color: var(--primary-color);
          margin-bottom: 6rpx;
        }

        .rank-status {
          font-size: 20rpx;
          color: #999;
        }
      }
    }
  }
}
</style>