<style lang="sass">
@import './scss/totalrank.scss';
</style>

<template>
    <div class="page-totalrank" :style="{minHeight: winHeight + 'px' }">
        <div v-if="totalTopUsers.length>0">
            <ul class="list-rank1" v-if="totalTopUsers">
                <li class="item-user" v-if="totalTopUsers[1]">
                    <div class="u-cover">
                        <img :src="totalTopUsers[1].userHeadInfo.head">
                    </div>
                    <h2>{{totalTopUsers[1].userHeadInfo.nick}}</h2>
                    <p>¥{{totalTopUsers[1].totalBonus/100}}</p>
                </li>
                <li class="item-user" v-if="totalTopUsers[0]">
                    <div class="u-cover">
                        <img :src="totalTopUsers[0].userHeadInfo.head">
                    </div>
                    <h2>{{totalTopUsers[0].userHeadInfo.nick}}</h2>
                    <p>¥{{totalTopUsers[0].totalBonus/100}}</p>
                </li>
                <li class="item-user" v-if="totalTopUsers[2]">
                    <div class="u-cover">
                        <img :src="totalTopUsers[2].userHeadInfo.head">
                    </div>
                    <h2>{{totalTopUsers[2].userHeadInfo.nick}}</h2>
                    <p>¥{{totalTopUsers[2].totalBonus/100}}</p>
                </li>
            </ul>
            <ul class="list-rank2" v-if="totalLastUsers">
                <li v-for="(user,index) in totalLastUsers" :key="index">
                    <i :data-index="(index+4)" class="info_rank"></i>
                    <div class="info_name" v-if="user.userHeadInfo">
                        <img :src="user.userHeadInfo.head">{{user.userHeadInfo.nick}}
                    </div>
                    <div class="info_award">{{user.totalBonus/100}}元</div>
                </li>
            </ul>
        </div>
        <div class="tip-empty" v-else>暂无数据</div>
        
        <div class="rank-uinfo" :class="{'isHasDlfooter' :isHasDlfooter}" v-if="userHeadInfo">
            <div class="info_name" v-if="userHeadInfo">
                <span>{{userBonus.totalBonus>0 ? userBonus.ranking : "暂无排名"}}</span>
                <img :src="userHeadInfo.head">{{userHeadInfo.nick}}
            </div>
            <div class="info_award">{{userBonus.totalBonus/100}}元</div>
        </div>

        <dlfooter
            v-if="isHasDlfooter"
            :closeCallback = "clossDlfooterCallback"
        ></dlfooter>   

    </div>
</template>

<script>
    import rank from './js/rank.js'
    export default rank
</script>