<template>
    <view class="rank">
        <view class="rank_top">
            <view class="rank_top_left">
                <image class="rank_title" src="../../static/rank/rank_txt.png" mode="widthFix" />
                <view class="rank_sub_title" @click="toHelp"> 共力家族 周会员邀请
                    <image src="/static/rank/help.png" mode="widthFix" />
                </view>
            </view>
            <image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" />
        </view>
        <!--  @click="click" -->
        <u-sticky bgColor="#34CE98">
            <u-tabs :list="tabs" lineColor="white" :activeStyle="{color: 'white', fontWeight: 'bold', fontSize: '15px'}"
                :inactiveStyle="{color: 'rgba(255,255,255,.6)', fontSize: '15px'}" :itemStyle="{'height': '50px'}"
                @click="onTabs" />
        </u-sticky>

        <view class="rank_update_time" v-if="type != '3' && type != '4' && end_timestamp">
            <view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时:</view>
            <u-count-down ref="countDown" format="DD:HH:mm:ss" :time="end_timestamp" :autoStart="false"
                @change="downTime">
                <view class="time">
                    <view class="time__item">
                        <text class="time__item_no">{{ timeData.days > 9 ? timeData.days: '0' + timeData.days }}
                        </text>天
                    </view>
                    <view class="time__item">
                        <text
                            class="time__item_no">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</text>时
                    </view>
                    <view class="time__item">
                        <text
                            class="time__item_no">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</text>分
                    </view>
                    <view class="time__item">
                        <text
                            class="time__item_no">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</text>秒
                    </view>
                </view>
            </u-count-down>
        </view>

        <block v-if="type =='3' || type == '4'">
            <view class="rank_update_time">
                <view :class="['title', 'sub-title',current?'actived':'']" @click="getCurrent('1')">
                    <image v-if="current" src="/static/rank/mo.png" mode="widthFix" /> 
                    <image v-else src="/static/rank/mo-null.png" mode="widthFix" /> 本月排行
                </view>
                <view :class="['title', 'sub-title',!current?'actived':'']" @click="getCurrent('2')">
                    <image v-if="!current" src="/static/rank/mo.png" mode="widthFix" />
                    <image v-else src="/static/rank/mo-null.png" mode="widthFix" />上月排行
                </view>
            </view>
        </block>

        <view class="list">
            <block v-if="lists.length>0">
                <view class="list_item" v-for="(item,index) in lists" :keys='index'>
                    <view class="no">
                        <image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
                            mode="widthFix" />
                        <view v-else class="txt"> {{index + 1}} </view>
                    </view>
                    <view class="user_info">
                        <view class="user">
                            <image class="avatar" :src="item.avatar" mode="aspectFill" />
                            <view class="nickname"> {{item.nickname}} </view>
                            <view class="wight" v-if="type === '1'">+{{item.rate}}%</view>
                        </view>
                        <view class="tuijian">
                            <view class="num"> {{item.number}}</view>
                            <view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view>
                        </view>
                    </view>
                </view>
            </block>
            <block v-else>
                <view class="vertical pages-empty">
                    <u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999"
                        :text="type === '1'?'上周无加成数据':'当前暂无邀请数据'">
                    </u-empty>
                </view>
            </block>
        </view>
    </view>
</template>
<script>
    import {
        week,
        week_mul,
        total,
        totaluser,
        monthVip,
        monthUser
    } from '@/apis/interfaces/rank.js'
    export default {
        data() {
            return {
                end_timestamp: 0,
                lists: [],
                timeData: {
                    days: 0,
                    hours: 0,
                    minutes: 0,
                    seconds: 0
                },
                type: '1', // 1加成榜 2邀请榜 3会员邀请 4用户邀请
                page_id: '',
                tabs: [{
                        name: '上周加成榜',
                        type: '1'
                    },
                    {
                        name: '本周邀请榜',
                        type: '2'
                    },
                    {
                        name: '会员邀请榜',
                        type: '3'
                    },
                    {
                        name: '用户邀请榜',
                        type: '4'
                    },
                ],
                current: true,
                listsInfo:{},// current last 
            }
        },
        onShow() {
            this.getList();
        },
        methods: {
            onTabs(e) {
                if (this.type == e.type) {
                    return
                }
                if (this.$refs.countDown) {
                    this.$refs.countDown.pause()
                }
                uni.showLoading({
                    title: '加载中...'
                })
                this.type = e.type
                this.lists = []
                this.getList()
            },
            downTime(e) {
                this.timeData = e
            },
            toHelp() {
                uni.navigateTo({
                    url: 'pages/vip/agreement?id=' + this.page_id
                })
            },
            getList() {
                let urlRequest = ''
                if (this.type === '1') {
                    urlRequest = week_mul
                } else if (this.type === '2') {
                    urlRequest = week
                } else if (this.type === '4') {
                    urlRequest = monthUser
                } else {
                    urlRequest = monthVip
                }
                urlRequest().then(res => {
                    if (this.type === '1' || this.type === '2') {
                        this.lists = res.rand;
                        this.end_timestamp = res.end_timestamp * 1000;
                        this.$nextTick(() => {
                            if (this.$refs.countDown) {
                                this.$refs.countDown.start()
                            }
                        })
                    } else if (this.type === '3' || this.type === '4') {
                        this.current = true;
                        this.listsInfo = res.rank;
                        this.lists = res.rank.current;
                    }
                    this.page_id = res.page_id;
                    uni.hideLoading()
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask: true
                    })
                })
            },
            getCurrent(id){
                if(id === '1'){
                    this.current = true;
                }else{
                    this.current = false;
                }
                if(this.current){
                    this.lists = this.listsInfo.current
                }else{
                    this.lists = this.listsInfo.last
                }
            }
        },
        onHide() {
            try {
                if (this.$refs.countDown) {
                    this.$refs.countDown.pause()
                }
            } catch (err) {
                uni.showToast({
                    title: err,
                    icon: 'none'
                })
            }
        }
    }
</script>
<style lang="scss">
    .rank {
        .rank_top {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            background-color: #34CE98;
            padding: 50rpx 30rpx 40rpx 30rpx;
            border-bottom: solid 1rpx rgba($color: #fff, $alpha: 0.6);

            .rank_top_left {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                box-sizing: border-box;

                .rank_title {
                    width: 360rpx;
                }

                .rank_sub_title {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: white;
                    padding-left: 20rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    margin-top: 10rpx;

                    image {
                        width: 32rpx;
                        margin-left: 6rpx;
                    }
                }
            }

            .rank_top_right {
                width: 280rpx;
            }
        }

        .rank_update_time {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 50rpx 30rpx;
            width: 100%;
            border-bottom: 20rpx solid $window-color;

            .sub-title {
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                image {
                    width: 36rpx !important;
                    margin-right: 20rpx;
                }
            }

            .title {
                font-size: 28rpx;
                font-weight: normal;
                color: #999;
                padding-right: 10rpx;
            }

            .actived {
                color: #34CE98;
            }

            .time {
                display: flex;

                .time__item {
                    font-size: 28rpx;
                    color: #34CE98;
                }

                .time__item_no {
                    background: #34CE98;
                    border-radius: 5rpx;
                    color: white;
                    width: 50rpx;
                    display: inline-block;
                    text-align: center;
                    margin: 0 10rpx;
                }
            }
        }

        .list {
            padding: 30rpx;

            .list_item {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;

                .no {
                    width: 80rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;

                    .image {
                        width: 54rpx;
                    }

                    .txt {
                        font-weight: 600;
                        font-size: 34rpx;
                        color: #333;
                    }
                }

                .user_info {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    border-bottom: solid 1rpx #f9f9f9;
                    padding: 30rpx 20rpx 30rpx 0;
                    margin-left: 30rpx;

                    .user {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;
                        box-sizing: border-box;


                        .avatar {
                            width: 90rpx;
                            height: 90rpx;
                            border-radius: 50%;
                            margin-right: 30rpx;
                        }

                        .nickname {
                            font-size: 30rpx;
                            color: #333;
                            max-width: 200rpx;
                            font-weight: bold;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;
                            box-sizing: border-box;
                        }

                        .wight {
                            font-size: 26rpx;
                            font-weight: normal;
                            margin-left: 20rpx;
                            background-color: #bdc6d7;
                            color: #fff;
                            border-radius: 30rpx;
                            padding: 0 10rpx;
                        }
                    }
                }

                .tuijian {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;

                    .num {
                        color: #999;
                        font-size: 30rpx;
                    }

                    .title {
                        font-size: 22rpx;
                        color: #999;
                    }
                }
            }
        }

    }
</style>
