<template>
  <view class="example-page">
    <view class="header">
      <text class="title">排行榜弹窗组件示例</text>
    </view>

    <view class="content">
      <view class="button-group">
        <u-button
          type="primary"
          size="large"
          @click="showRanking"
          :loading="loading"
        >
          显示排行榜
        </u-button>
      </view>

      <view class="info-section">
        <text class="info-title">使用说明：</text>
        <text class="info-text"
          >1. 点击按钮将依次显示直推人数和直推金额排行榜</text
        >
        <text class="info-text">2. 前三名会特殊展示在顶部</text>
        <text class="info-text">3. 4-30名可在下方滚动查看</text>
        <text class="info-text">4. 关闭人数排行后自动显示金额排行</text>
      </view>
    </view>

    <!-- 排行榜弹窗组件 -->
    <RankingPopup ref="rankingPopup" @onRankingComplete="onRankingComplete" />
  </view>
</template>

<script>
import RankingPopup from './RankingPopup.vue'

export default {
  name: 'RankingPopupExample',
  components: {
    RankingPopup,
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    // 显示排行榜
    async showRanking() {
      this.loading = true
      try {
        await this.$refs.rankingPopup.showRankingPopups()
      } catch (error) {
        console.error('显示排行榜失败:', error)
      } finally {
        this.loading = false
      }
    },

    // 排行榜展示完成回调
    onRankingComplete() {
      console.log('排行榜展示完成')
      uni.showToast({
        title: '排行榜展示完成',
        icon: 'success',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.example-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.content {
  max-width: 600rpx;
  margin: 0 auto;
}

.button-group {
  text-align: center;
  margin-bottom: 60rpx;
}

.info-section {
  background: rgba(255, 255, 255, 0.9);
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .info-title {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .info-text {
    display: block;
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
