<!--
 * @Date: 2025-09-01 13:07:52
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-19 09:58:37
 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="family-rank-page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="nav-tabs">
        <!-- 滑动指示器 -->
        <view
          class="tab-indicator"
          :class="{
            'indicator-shanghai': activeTab === 'shanghai',
            'indicator-region': activeTab !== 'shanghai' && activeTab !== 'support',
            'indicator-support': activeTab === 'support'
          }"
        ></view>
        <view
          v-for="region in availableRegions.slice(0, 3)"
          :key="region.value"
          class="tab-item"
          :class="{ active: activeTab === region.value }"
          @click="switchTab(region.value)"
        >
          {{ getTabDisplayName(region) }}
        </view>
      </view>
    </view>

    <!-- 排行榜内容 -->
    <view class="rank-content" :class="{ 'content-switching': isContentSwitching }">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <view class="loading-text">加载中...</view>
      </view>

      <!-- 排行榜日期 -->
      <view v-if="!loading" class="rank-date relative">
        {{ currentDate }}
        <view v-if="activeTab === 'support'" class="absolute font-bold text-white" style="right: 95rpx;" @tap="joinOrganization">助力码</view>
      </view>

      <!-- 前三名展示 -->
      <view v-if="!loading && topThreeData.length > 0" class="top-three">
        <!-- 第二名 -->
        <view v-if="topThreeData[1]" class="rank-item second">
          <!-- <view class="crown crown-silver">👑</view> -->
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-silver.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? topThreeData[1]?.avatar_url : (topThreeData[1]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topThreeData[1]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[1]?.created_by_nickname}个家庭` : `大家长：${topThreeData[1]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">2</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[1]?.step) : formatSteps(topThreeData[1]?.step) }}</view>
          </view>
        </view>

        <!-- 第一名 -->
        <view v-if="topThreeData[0]" class="rank-item first">
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-gold.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? topThreeData[0]?.avatar_url : (topThreeData[0]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topThreeData[0]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[0]?.created_by_nickname}个家庭` : `大家长：${topThreeData[0]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">1</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[0]?.step) : formatSteps(topThreeData[0]?.step) }}</view>
          </view>
        </view>

        <!-- 第三名 -->
        <view v-if="topThreeData[2]" class="rank-item third">
          <view class="crown">
            <image src="https://cdn.ipadbiz.cn/lls_prog/images/crow-bronze.png" class="w-5 h-5" mode="aspectFill" />
          </view>
          <view class="avatar">
            <image :src="activeTab === 'support' ? topThreeData[2]?.avatar_url : (topThreeData[2]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
          </view>
          <view class="family-name">{{ topThreeData[2]?.name }}</view>
          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[2]?.created_by_nickname}个家庭` : `大家长：${topThreeData[2]?.created_by_nickname}` }}</view>
          <view class="rank-number">
            <view class="rank-num">3</view>
            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[2]?.step) : formatSteps(topThreeData[2]?.step) }}</view>
          </view>
        </view>
      </view>

      <!-- 其他排名列表 -->
      <view v-if="otherRankData.length > 0" class="rank-list">
        <view
          v-for="(item, index) in otherRankData"
          :key="item.family_id || index"
          class="rank-list-item"
        >
          <view class="rank-info">
            <view class="rank-num">{{ index + 4 }}</view>
            <view class="avatar-small">
              <image :src="activeTab === 'support' ? item.avatar_url : (item.avatar_url || defaultAvatar)" class="avatar-small-img" mode="aspectFill" />
            </view>
            <view class="family-info">
              <view class="family-name-small">{{ item.name }}</view>
              <view class="leader-name-small">{{ activeTab === 'support' ? `${item.created_by_nickname}个家庭` : `大家长：${item.created_by_nickname}` }}</view>
            </view>
          </view>
          <view class="steps-info">
            <view class="steps">{{ activeTab === 'support' ? formatSupportSteps(item.step) : formatStepsForList(item.step) }}</view>
          </view>
        </view>
      </view>

      <!-- 暂无数据 -->
      <view v-else-if="!loading" class="no-data">
        <view class="no-data-text">暂无{{ currentRegionName }}排行榜数据</view>
      </view>
    </view>

    <!-- 我的排名悬浮卡片 -->
    <view v-if="myRankInfo" class="my-rank-card">
      <view class="my-rank-content">
        <view class="my-rank-left">
          <view class="my-rank-number">
            {{ myRankInfo.isNotRanked ? '未上榜' : (myRankInfo.rank > 99 ? myRankInfo.rank + '+' : myRankInfo.rank) }}
          </view>
          <view class="my-avatar">
            <image :src="myRankInfo.avatar_url || defaultAvatar" class="my-avatar-img" mode="aspectFill" />
          </view>
          <view class="my-family-info">
            <view class="my-family-name">{{ myRankInfo.family_name }}</view>
            <view class="my-leader-name">{{ activeTab === 'support' ? `${myRankInfo.created_by_nickname}个家庭` : `大家长：${myRankInfo.created_by_nickname}` }}</view>
          </view>
        </view>
        <view class="my-rank-right">
          <view class="my-steps">{{ activeTab === 'support' ? formatSupportSteps(myRankInfo.step) : formatStepsForList(myRankInfo.step) }}</view>
          <view class="rank-status">{{ myRankInfo.isNotRanked ? '未上榜' : '已上榜' }}</view>
        </view>
      </view>
    </view>

    <!-- 返回顶部组件 -->
    <BackToTop :distance="200" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import BackToTop from '@/components/BackToTop.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)
  }))
})

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

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

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

// 助力榜数据
const supportData = ref(null)

const joinOrganization = () => {
  Taro.navigateTo({
    url: '/pages/JoinOrganization/index'
  })
}

// 加载状态
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 {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'
}

/**
 * 格式化助力榜步数显示（超过10000显示为万+格式）
 * @param {number} steps - 步数
 * @returns {string} 格式化后的步数
 */
const formatSupportSteps = (steps) => {
  if (!steps) return '0'
  if (steps >= 10000) {
    const wan = Math.floor(steps / 10000)
    return `${wan}万+`
  }
  return steps.toLocaleString()
}



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

    // 根据activeTab设置type参数
    if (activeTab.value === 'shanghai') {
      params.type = 'shanghai_family'
    } else if (activeTab.value === 'support') {
      params.type = 'institution'
    } else {
      params.type = 'county_family'
    }

    const response = await getStepLeaderboardAPI(params)
    if (response.code) {
      if (activeTab.value === 'support') {
        supportData.value = response.data
      } else {
        leaderboardData.value = response.data
      }
      currentDate.value = response.data.yesterday
    }
  } 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(() => {
  // 固定显示：上海榜、地区榜、助力榜
  const regions = [
    { text: '上海市', value: 'shanghai' },
    { text: '地区', value: 'region' },
    { text: '助力', value: 'support' }
  ]

  // 如果有用户区县信息，将地区榜的value设置为用户区县
  const currentFamilyCounty = leaderboardData.value?.current_family?.county
  if (currentFamilyCounty) {
    const userCounty = String(currentFamilyCounty)
    const userRegion = shanghaiRegionOptions.value.find(item => item.value === userCounty)
    if (userRegion) {
      regions[1] = { text: userRegion.text, value: userCounty }
    }
  }

  return regions
})

/**
 * 获取标签页显示名称
 * @param {object} region - 区域对象
 * @returns {string} 显示名称
 */
const getTabDisplayName = (region) => {
  if (region.value === 'shanghai') {
    return '上海榜'
  } else if (region.value === 'support') {
    return '助力榜'
  } else {
    // 直接显示区域名称，如"黄浦区"、"杨浦区"等
    return region.text
  }
}

/**
 * 计算前三名数据
 */
const topThreeData = computed(() => {
  if (activeTab.value === 'support') {
    // 助力榜数据
    if (!supportData.value || !supportData.value.families) {
      return []
    }
    return supportData.value.families.slice(0, 3)
  }

  // 家庭排行榜数据
  if (!leaderboardData.value || !leaderboardData.value.families) {
    return []
  }
  return leaderboardData.value.families.slice(0, 3)
})

/**
 * 计算其他排名数据
 */
const otherRankData = computed(() => {
  if (activeTab.value === 'support') {
    // 助力榜数据
    if (!supportData.value || !supportData.value.families) {
      return []
    }
    return supportData.value.families.slice(3)
  }

  // 家庭排行榜数据
  if (!leaderboardData.value || !leaderboardData.value.families) {
    return []
  }
  return leaderboardData.value.families.slice(3)
})

/**
 * 计算我的排名信息
 */
const myRankInfo = computed(() => {
  if (activeTab.value === 'support') {
    // 助力榜我的单位信息
    if (!supportData.value || !supportData.value.current_family) {
      return null
    }

    const currentInstitution = supportData.value.current_family
    return {
      ...currentInstitution,
      name: currentInstitution.name,
      family_name: currentInstitution.name,
      avatar_url: currentInstitution.avatar_url,
      created_by_nickname: currentInstitution.created_by_nickname,
      step: currentInstitution.step,
      rank: currentInstitution.rank
    }
  }

  // 家庭排行榜我的排名信息
  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,
      isNotRanked: true
    }
  }

  return {
    ...currentFamily,
    isNotRanked: false
  }
})

/**
 * 页面初始化
 */
onMounted(async () => {
  // 默认选中上海榜
  activeTab.value = 'shanghai'
  // 加载排行榜数据
  await loadLeaderboardData(true)
})
</script>

<style lang="less">
.family-rank-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
  padding-bottom: 120rpx;

  .header {
    padding: 40rpx 0 20rpx;

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

      .tab-indicator {
        position: absolute;
        top: 8rpx;
        left: 8rpx;
        width: calc(33.33% - 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(0%);
        }

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

        &.indicator-support {
          transform: translateX(200%);
        }
      }

      .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 {
    padding: 0 40rpx;
    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: 180rpx 0 0 0;
    height: 360rpx;
    gap: -40rpx;

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

      &:hover {
        transform: translateY(-10rpx);
      }

      .crown {
        font-size: 40rpx;
        // margin-bottom: 10rpx;

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

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

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

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

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

      .family-name {
        color: white;
        font-size: 24rpx;
        font-weight: 600;
        margin-bottom: 8rpx;
        text-align: center;
        max-width: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.2;
        max-height: 58rpx;
      }

      .leader-name {
        color: rgba(255, 255, 255, 0.8);
        font-size: 20rpx;
        margin-bottom: 16rpx;
        text-align: center;
        max-width: 140rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.2;
        max-height: 48rpx;
      }

      .rank-number {
        width: 160rpx;
        height: 200rpx;
        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: 20rpx 20rpx 0 0;
        box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);

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

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

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

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

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

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

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

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

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

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

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

  .rank-list {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx 24rpx 0 0;
    padding: 20rpx 0 60rpx;
    margin-top: 0;
    position: relative;
    z-index: 4;

    .rank-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        background: rgba(74, 144, 226, 0.05);
        transform: translateX(8rpx);
      }

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

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

        .rank-num {
          width: 48rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #666;
          margin-right: 24rpx;
        }

        .avatar-small {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 24rpx;

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

        .family-info {
          flex: 1;

          .family-name-small {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
            max-width: 400rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .leader-name-small {
            font-size: 24rpx;
            color: #666;
            max-width: 400rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .steps-info {
        text-align: right;

        .steps {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--primary-color);
        }
      }
    }
  }

  /* 加载状态 */
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100rpx 0;
  }

  .loading-text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }

  /* 暂无数据 */
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100rpx 0;
  }

  .no-data-text {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }

  .my-rank-card {
    position: fixed;
    bottom: 40rpx;
    left: 40rpx;
    right: 40rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24rpx;
    padding: 24rpx 32rpx;
    backdrop-filter: blur(10px);
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    z-index: 99;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
    }

    .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: 60rpx;
          height: 60rpx;
          background: var(--primary-color);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          font-weight: bold;
          color: white;
          margin-right: 24rpx;
        }

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

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

        .my-family-info {
          flex: 1;

          .my-family-name {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
            max-width: 250rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .my-leader-name {
            font-size: 24rpx;
            color: #666;
            max-width: 250rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

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

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

        .rank-status {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }


}
</style>