<template>
    <div class='invite-rank'>
        <div class='invite-tabs'>
            <div :class='["tab-item",tab===index?"select-on":"select-off",tab&&!index?"off-left":"",!tab&&index?"off-right":"",!isShowInviteRank?"one-tab":""]' v-for='(item,index) in tabs' :key='index' @click='changeTab(index)'>
                {{item}}
            </div>
        </div>
        <rank-list :rankList='rankList.slice(0,5)' v-show='!tab'></rank-list>
        <invite-list :inviteList='inviteList.slice(0,5)' v-show='tab'></invite-list>
        <div class='discribe' v-if='showDescribe'>- 邀请人数相同者按完成时间先后排序 -</div>
        <div class='show-all-btn' v-if='showAllBtn' @click='showPopup'>
            <span>查看全部</span>
            <img src="~imgPath/fissionTask/icon-right.png" alt="">
        </div>
        <div class='show-no-invite' v-if='showNoInvite'>
            <img src="~imgPath/fissionTask/noInvite.png" alt="">
            <div class='text-box' v-if='tab===0'>
                <span class='text'>还没有人上榜，</span>
                <span @click='invite' class='click-text'>快去冲榜吧~</span>
            </div>
            <div class='text-box' v-else>
                <span class='text'>还没有邀请好友，</span>
                <span @click='invite' class='click-text'>快去邀请吧～</span>
            </div>
        </div>
    </div>    
</template>
<script>
import rankList from './list/rankList';
import inviteList from './list/inviteList';
export default {
    components:{
        rankList,
        inviteList,
    },
    props:{
        inviteList:{
            default:()=>{
                return []
            }
        },
        rankList:{
            default:()=>{
                return []
            }
        },
        isShowInviteRank:true,
    },
    created(){
        if(!this.isShowInviteRank){
            this.tabs=['邀请记录']
            this.tab=1
        }
        console.log('++++++++++++++++',this.inviteList)
    },
    data(){
        return{
            tab:0, // 0-邀请排行榜 1-邀请记录
            tabs:[
                '邀请排行榜',
                '邀请记录'
            ],
            isShowPopup:false,
            popupList:[],
        }
    },
    computed:{
        showDescribe(){
            return !this.tab && this.rankList.length>5
        },
        showAllBtn(){
            return this.rankList.length>5 || this.inviteList.length>5
        },
        showNoInvite(){
            return (this.tab===0 && this.rankList.length==0) || (this.tab===1 && this.inviteList.length==0) 
        }
    },
    methods:{
        changeTab(index){
            if(this.tab===index){
                return
            }
            this.tab=index;
        },
        showPopup(){
            this.$emit('showPopup',this.tab)
        },
        invite(){
            this.$emit('invite')
        }

    }

}
</script>
<style scoped lang='scss'>
.invite-rank{
    height: 7.6rem;
    background: white;
    border-radius: 0.16rem;
    margin-bottom:1.44rem;
    .invite-tabs{
        width: 100%;
        height:0.8rem;
        display: flex;
        font-size: 0.32rem;
        font-weight: 500;
        color: #FF791F;
        align-items: flex-end;
        background: white;
         border-radius: 0.16rem;
        .tab-item{
            flex:1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .discribe{
            font-size: 0.24rem;
            text-align: center;
            font-weight: 400;
            color: #CCCCCC;
            margin-top:0.24rem;
        }
    .show-all-btn{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.24rem;
        font-weight: 400;
        color: #333333;
        margin-top:0.16rem;
        img{
            width:0.32rem;
            height: 0.32rem;
        }
    }
    .show-no-invite{
        box-sizing: border-box;
        padding-top:1.14rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img{
            width:3.2rem;
            height:3.2rem;
        }
        .text-box{
            font-size: 0.28rem;
            font-weight: 400;
            color: #999999;
            .click-text{
                color:#FF871F;
            }
        }
    }
}
.select-on{
    background: white;
    height: 0.96rem;
    border-top-left-radius: 0.16rem;
    border-top-right-radius: 0.16rem;
    font-weight: bold;
}
.select-off{
    background: #FFF3E0;
    height:0.8rem;
    
}
.off-left{
     border-bottom-right-radius: 0.16rem;
     border-top-left-radius: 0.16rem;
}
.off-right{
    border-top-right-radius: 0.16rem;
    border-bottom-left-radius: 0.16rem;
}
.one-tab{
    border-top-left-radius: 0.16rem  !important;
    border-top-right-radius: 0.16rem !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius: 0 !important;
}
</style>