<template>
  <view class="rank" >
      <view class="class-tab-box" >
        <class-tab 
          :classCategory='classCategory'
          @changeClass='changeClass'
        />
      </view>
      <view>
        <!-- 前三名 -->
        <view class='top-three'>
                <image class='top-bg' mode='aspectFit' :src="require('@/static/competition/top-bg.png')" />
                <view 
                  :class="[index === 0 ? 'first' : index === 1 ? 'second' : 'thirdly']" 
                  v-for="(item, index) in 3" :key="item"
                >
                    <View v-if="item === 0">
                      <Image class='first-bg' src='http://res.training.luojigou.vip/Fth2HDhbpMpVZFanOLYDRjlmyAF_' />
                      <Image class='Ava' :src='topThree[index].imageUrl' />
                    </View>
                    <Image v-else class='Ava' :src='topThree[index].imageUrl' />
                    <View class='Count unify-Count'>
                        <Image class='Count-img unify-Count-img' :src='imgUrl[index].count' />
                        <Text class='num'>12121</Text>
                    </View> 
                    <Image class='Top' :src='imgUrl[index].top' />
                    <Image class='Bottom' :src='imgUrl[index].bottom' />
                    <Text class='city-name unify-city-name'>北京啦啦啦幼儿园</Text>
                    <view class="serial-number serial-number-bottom van-ellipsis" >
                      编号:1233455667788
                    </view>
                </view>
                <view class='green-shade' />
        </view>
        <!-- 全国前十 -->
        <view class="nation" >
            <view class="nation-label" >
              全国前10强
            </view>
            <image class="nation-bg" :src="require('@/static/common/nation-bg.png')" />
            <view class="nation-content" >
              
              <view class="nation-title">
                <view>排名</view>
                <view>参赛编号</view>
                <view>姓名</view>
                <view>园所/专柜名称</view>
              </view>
              <view class="rank-list" >
                <view class="rank-item" v-for="(item, index) in 10" :key="item">
                    <view class="rank-count" >
                      <block v-if="index <= 2" >
                        <image v-if="index === 0" class="rank-img" :src="require('@/static/competition/rank1.png')" />
                        <image v-if="index === 1" class="rank-img" :src="require('@/static/competition/rank2.png')" />
                        <image v-if="index === 2" class="rank-img" :src="require('@/static/competition/rank3.png')" />
                      </block>
                      <view v-else class="rank-img" >{{index + 1 }}</view>
                    </view>
                    <view class="apply-code" > {{item.competitionNo || 12048552565551 }}</view>
                    <view class="nickname" >  {{  item.babyName || '收到快递呀' }}</view>
                    <view class="school-name" >{{item.name || '中德智慧幼儿园'}} </view>
                </view>
              </view>
            </view>
        </view>
      </view>
  </view>
</template>

<script>
import ClassTab from './components/ClassTab'
import { classCategory, imgUrl } from './config'
import { getCompetitionRank } from '@/api/promoted'
import { getCompetitionId  } from '@/api/competition'
export default {
  name: 'rank',
  components: {
    ClassTab
  },
  async onLoad () {
    await this.getCompetitionId()
    this.getCompetitionRank()
  },
  data () {
    return {
      classCategory: Object.freeze(classCategory),
      imgUrl: Object.freeze(imgUrl),
      competitionId: '',  //  赛事id
      classLevel: -1, // 班级等级
      rankList: []
    }
  },
  methods: {
    async getCompetitionRank () {
      const $par = {
        classLevel: this.classLevel,
        stageId: this.competitionId
      }
      const { data, status } = await getCompetitionRank($par)
      console.log(data);
      this.rankList = data
    },
    changeClass (classLevel) {
      this.classLevel = classLevel
    },
    // 获取赛事id
    async getCompetitionId () {
      const { data, status } = await getCompetitionId()
      this.competitionId = data
    }
  }
}
</script>

<style lang="less" scoped>
  .class-tab-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }


.rank {
    width: 750rpx;
    height: 1718rpx;
    background: #1B42FD;
    overflow: hidden;
}

 .top-three {
    margin: 0 auto;
    margin-top: 164rpx;
    position: relative;
    z-index: 4;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .top-bg {
        width: 688rpx;
        height: 346rpx;
        margin: 0 auto;
    }
    

    .unify-Count {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        .unify-Count-img {
            position: absolute;
            top: 0rpx;
            left: 0rpx;
        }
        .num {
            position: relative;
            z-index: 1;
            font-size: 24rpx;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
  
    .unify-city-name {
        font-size: 26rpx;
        font-weight: 500;
        color: #FB6D7E;
        font-family: PingFangSC-Medium, PingFang SC;
    }

    .second {
        width: 226rpx;
        height: 306rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 42rpx;
        left: 36rpx;
        .Ava {
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
            position: absolute;
            top: 46rpx;
            left: 64rpx;
            border: 4rpx solid rgb(181, 212, 249);
            box-sizing: border-box;
        }
        .Count {
            width: 172rpx;
            height: 42rpx;
            .Count-img {
                width: 100%;
                height: 100%;
            }

        }
        .Top {
            width: 61rpx;
            height: 42rpx;
            position: absolute;
            top: 19rpx;
            left: 82rpx;
        }
        .Bottom {
            width: 168rpx;
            height: 60rpx;
            position: absolute;
            top: 119rpx;
            left: 50%;
            transform: translateX(-50%);
        }

        .city-name {
           width: 208rpx;
            position: absolute;
            bottom: 72rpx;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .serial-number-bottom {
          bottom: 60rpx;
        }
    }

    .first {
        width: 244rpx;
        height: 346rpx;
        position: absolute;
        left: 252rpx;
        .first-bg {
            position: absolute;
            top: 67rpx;
            left: 54%;
            width: 185rpx;
            height: 120rpx;
            transform: translateX(-50%);
        }
        .Ava {
            width: 108rpx;
            height: 108rpx;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: 72rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .Count {
            width: 172rpx;
            height: 42rpx;
            .Count-img {
                width: 100%;
                height: 100%;
            }
            .num {

            }
        }
        .Top {
            width: 76.2rpx;
            height: 52.8rpx;
            position: absolute;
            top: 30rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .Bottom {
            width: 168rpx;
            height: 60rpx;
            position: absolute;
            top: 146rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .city-name {
            width: 208rpx;
            position: absolute;
            left: 50%;
            bottom: 96rpx;
            transform: translateX(-50%);
        }
        .serial-number-bottom {
          bottom: 66rpx;
        }
    }

    .thirdly {
        width: 226rpx;
        height: 306rpx;
        position: absolute;
        right: 32rpx;
        top: 41rpx;
        .Ava {
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
            border: 4rpx solid rgb(239, 210, 174);
            position: absolute;
            top: 48rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .Count {
            width: 172rpx;
            height: 42rpx;
            .Count-img {
                width: 100%;
                height: 100%;
            }
        }
        .Top {
            width: 61rpx;
            height: 42rpx;
            position: absolute;
            top: 22rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .Bottom {
            width: 168rpx;
            height: 60rpx;
            position: absolute;
            top: 124rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .city-name {
            width: 208rpx;
            position: absolute;
            bottom: 88rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .serial-number-bottom {
          bottom: 60rpx;
        }
    }
    .serial-number {
      width: 196rpx;
      font-size: 20rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
}

.green-shade {
    width: 88%;
    height: 36rpx;
    background: rgba(233, 237, 255, .5);
    position: absolute;
    left: 50%;
    bottom: 8rpx;
    transform: translateX(-50%);
    z-index: 0;
}

.nation {
  margin-top: 80rpx;
  position: relative;
  .nation-label {
    font-size: 40rpx;
    font-family: Helvetica;
    color: #FFFFFF;
    text-align: center;
  }
  .nation-bg {
    width:  156rpx;
    height: 154rpx;
    position: absolute;
    top: -36rpx;
    right: 48rpx;
    z-index: 0;
  }
  .nation-content {
    width: 690rpx;
    height: 1018rpx;
    background: #FFFFFF;
    border-radius: 18rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    position: relative;
    padding: 38rpx 32rpx;
    box-sizing: border-box;

    .nation-title {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      display: flex;
    }
    .nation-title view:nth-child(2) {
      margin-left: 50rpx;
      margin-right: 126rpx;
    }
    .nation-title view:nth-child(3) {
      margin-right: 88rpx;
    }

    .rank-list {
      margin-top: 16rpx;
      position: relative;
      z-index: 10;
      .rank-item {
        display: flex;
        align-items: center;
        height: 60rpx;
        margin-top: 32rpx;
        margin-bottom: 32rpx;
        .rank-count {
          margin-right: 38rpx;
          .rank-img {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .apply-code {
          width: 178rpx;
          margin-right: 44rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .nickname {
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-right: 28rpx;
          width: 102rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .school-name {
          width: 168rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
}


</style>