<!--海报裂变 排行榜-->
<template>
    <main>
        <div class="bg">

            <!-- 第2名 -->
            <div v-if='list2[1]'> 
                <div class="no2Ctn">
                    <span class="no2"></span>
                    <div>
                        <img :src="list2[1].HeadImg" alt="">
                    </div>
                </div>
                <p class="ellips">{{list2[1].NickName}}</p>
                <p>{{list2[1].PopularityValue}} <van-icon name="like" /></p>
            </div>
            <div v-else> 
                <div class="no2Ctn">
                    <span class="no2"></span>
                    <div>
                        <img src="//image.360lj.com/nopic.gif" alt="">
                    </div>
                </div>
                <p class="ellips">暂无</p>
                <p>-- <van-icon name="like" /></p>
            </div>

            <!-- 第1名 -->
            <div style="padding-top: .5rem;" v-if='list2[0]'>
                <div class="no1Ctn">
                    <span class="no1"></span>
                    <div>
                        <img :src="list2[0].HeadImg" alt="">
                    </div>
                </div>
                <p class="ellips">{{list2[0].NickName}}</p>
                <p>{{list2[0].PopularityValue}} <van-icon name="like" /></p>
            </div>
            <div style="padding-top: .5rem;" v-else>
                <div class="no1Ctn">
                    <span class="no1"></span>
                    <div>
                        <img src="//image.360lj.com/nopic.gif" alt="">
                    </div>
                </div>
                <p class="ellips">暂无</p>
                <p>-- <van-icon name="like" /></p>
            </div>

            <!-- 第3名 -->
            <div style="padding-top: 1.8rem;" v-if='list2[2]'> 
                <div class="no2Ctn">
                    <span class="no3"></span>
                    <div>
                        <img :src="list2[2].HeadImg" alt="">
                    </div>
                </div>
                <p class="ellips">{{list2[2].NickName}}</p>
                <p>{{list2[2].PopularityValue}} <van-icon name="like" /></p>
            </div>
            <div style="padding-top: 1.8rem;" v-else> 
                <div class="no2Ctn">
                    <span class="no3"></span>
                    <div>
                        <img src="//image.360lj.com/nopic.gif" alt="">
                    </div>
                </div>
                <p class="ellips">暂无</p>
                <p>-- <van-icon name="like" /></p>
            </div>

        </div>

        <!-- 我参加活动时和没参加活动的展示 -->
        <div class="item" style="border-bottom: 6px solid #F5F5F5;" v-if='userData'>

            <div>
                <span>{{userData.Ranking}}</span>
                <div><img :src="userData.HeadImg" alt=""></div>
                <span class="ellips" style="max-width: 2.6rem">{{userData.NickName}}</span>
            </div>
            <div>
                <span>{{userData.PopularityValue}}</span>
                <van-icon name="like" color="#FC423E" size=".35rem" style="margin: 0 .2rem;" />
                <b @click="ToDetail" class="detailBtn">详情查看</b>
            </div>

        </div>
         <div v-else class="item" style="border-bottom: 6px solid #F5F5F5;">

            <div>
                <span>--</span>
                <div><img src="//image.360lj.com/nopic.gif" alt=""></div>
                <span class="ellips" style="max-width: 2.6rem">暂无</span>
            </div>
            <div>
                <span>--</span>
                <van-icon name="like" color="#FC423E" size=".35rem" style="margin: 0 .2rem;" />
                <b @click='ToDetail()' class="detailBtn">暂无详情</b>
            </div>

        </div>

        <div>

            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <transition-group
                 enter-active-class="animated zoomIn" 
                 leave-active-class="animated zoomOut"
                >
                    <div 
                        v-for="data in list"
                        :key='data.ID'
                        class="item" 
                    >

                        <div>
                            <span>{{data.Ranking}}</span>
                            <div><img :src="data.HeadImg" alt=""></div>
                            <span class="ellips" style="max-width: 2.6rem">{{data.NickName}}</span>
                        </div>
                        <div>
                            <span>{{data.PopularityValue}}</span>
                            <van-icon name="like" color="#FC423E" size=".35rem" style="margin: 0 .2rem;" />
                        </div>

                    </div>
                 </transition-group>
            </van-list>



        </div>
    </main>
</template>

<script>
    export default {
        name: "ranking",
        data(){
            return{
                loading:false,
                finished:false,
                msg:'hello world',
                pageIndex:1,
                pageSize:15,
                name:'',
                userData:'',
                list:[],
                list2:[],
            }
        },
        created() {
            this.onLoad();
        },
        methods:{
            onLoad(){
                var obj = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    name:this.name,
                }
                var self = this;
                this.$http.FollowEventGetList(obj).then(({data})=>{
                    self.loading = false;
                    if(data.IsSuccess){
                        self.userData = data.ResultObject.OneselfRankingListDTO;
                        self.list = self.list.concat(data.ResultObject.RankingListDTO);

                        // 第一次获得数据时调取前三名
                        if(self.list2.length == 0){
                            self.GetList2();
                        }

                        // 没有数据时
                        if (data.ResultObject.RankingListDTO.length < self.pageSize) {
                            self.finished = true;
                        }
                        self.pageIndex++;
                    }else{
                        self.$toast(data.ResultMsg);
                    }
                })
            },

            // 获取前三名
            GetList2(){
                for(var i = 0;i<3;i++){
                    if(this.list[i]){
                       this.list2.push(this.list[i])  
                    }
                }
            },

            ToDetail(){
                if(this.userData){
                    sessionStorage['rankingDetailList'] =JSON.stringify(this.userData);
                    this.$router.push('/rankingDetail')
                }else{
                    this.$toast('暂无详情');
                }
                
            }
        }
    }
</script>

<style scoped lang="less">
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .container{
        width: 7.5rem;
        max-width: 7.5rem;
        min-height: 100vh;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .bg{
        width: 7.5rem;
        height: 5.26rem;
        background: url("./img/bg.jpg") no-repeat;
        -webkit-background-size: 7.5rem 5.26rem;
        background-size: 7.5rem 5.26rem;
        display: flex;
        >div{
            flex: 1;
            text-align: center;
            box-sizing: border-box;
            padding-top: 1.5rem;
            >p{
                font-size: .32rem;
                color: #fff;
                margin: .2rem;
                max-width: 2.1rem;
                i{
                    color: #FC423E;
                }
            }
            >div{
                >div{
                    margin: 0 auto;
                }
            }
        }
    }
    .no1Ctn{
        position: relative;
        >div{
            width:1.5rem;
            height:1.5rem;
            border: 4px solid #FBCE2F;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .no1{
        position: absolute;
        left: .45rem;
        top: -0.35rem;
        width: 0.76rem;
        height: 0.7rem;
        background: url("./img/avatar_bg.png") no-repeat 0 0;
        -webkit-background-size: 2.22rem .67rem;
        background-size: 2.22rem .67rem;
        display: inline-block;
    }

    .no2Ctn{
        position: relative;
        >div{
            width:1.1rem;
            height:1.1rem;
            border: 4px solid #C6D0CA;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .no2{
        width: .6rem;
        height: .53rem;
        background: url("./img/avatar_bg.png") no-repeat -.85rem -.14rem;
        -webkit-background-size: 2.22rem .67rem;
        background-size: 2.22rem .67rem;
        display: inline-block;
        position: absolute;
        left: .58rem;
        top: -0.25rem;
    }

    .no3{
        width: .61rem;
        height: .53rem;
        background: url("./img/avatar_bg.png") no-repeat -1.62rem -.14rem;
        -webkit-background-size: 2.22rem .67rem;
        background-size: 2.22rem .67rem;
        display: inline-block;
        position: absolute;
        left: .58rem;
        top: -0.25rem;
    }
    .no3+div{
        border: 4px solid #E68624;
    }

    .item{
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 .2rem;
        border-bottom: 2px solid #F5F5F5;
        >div{
            display: flex;
            align-items: center;
        }
        >div>span{
            font-size: .32rem;
            color: #333333;
            line-height: normal;
        }
        >div>div{
            width: .76rem;
            height: .76rem;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 .4rem;
        }
    }
    .detailBtn{
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.2rem !important;
        color: #ffa33d !important;
        border-radius: 0.25rem;
        display: inline-block;
        border: 1px solid #ffa33d;
        padding: .01rem .2rem;
    }
</style>