<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>
        <scroll-view class="rank_type" scroll-x="true">
            <view :class="['rank_type_item',type === '1'?'rank_type_item_active':'']" @click="changeType('1')">上周加成榜
            </view>
            <view :class="['rank_type_item',type === '2'?'rank_type_item_active':'']" @click="changeType('2')">本周邀请榜
            </view>
            <view :class="['rank_type_item',type === '3'?'rank_type_item_active':'']" @click="changeType('3')">会员邀请榜
            </view>
            <view :class="['rank_type_item',type === '4'?'rank_type_item_active':'']" @click="changeType('4')">用户邀请榜
            </view>
        </scroll-view>
        <view class="rank_update_time" v-if="lists.length > 0 && type !== '3'&& type !== '4' && showCountDown">
            <view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时 : </view>
            <u-count-down ref="countDown" :time="end_timestamp" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
                <view class="time">
                    <view class="time__item">
                        <view class="time__item_no">{{ timeData.days }} </view>天
                    </view>
                    <view class="time__item">
                        <view class="time__item_no">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</view>时
                    </view>
                    <view class="time__item">
                        <view class="time__item_no">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</view>
                        分
                    </view>
                    <view class="time__item">
                        <view class="time__item_no">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</view>
                        秒
                    </view>
                </view>
            </u-count-down>
        </view>

        <view class="list">
            <block v-if="lists.length>0">
                <view class="list_item" v-for="(item,index) in lists" :keys='index'>
                    <view class="no" v-if="type === '3' || type === '4'">
                        <image v-if="index < 1" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
                            mode="widthFix" />
                        <view v-else class="txt"> {{index + 1}} </view>
                    </view>
                    <view class="no" v-if="type !== '3' && type !== '4'">
                        <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
    } from '@/apis/interfaces/rank.js'
    export default {
        data() {
            return {
                end_timestamp: 0,
                lists: [],
                timeData: {},
                type: "1", // 1 加成榜 2邀请榜
                page_id: '',
                showCountDown:false, // 是否显示倒计时  默认不显示，隐藏页面移出
            }
        },
        onShow() {
            this.getList();
        },
        onHide() {
           this.showCountDown = false;
        },
        methods: {
            onChange(e) {
                this.timeData = e
            },
            changeType(type) {
                if (this.type !== type) {
                    this.lists = [];
                    this.type = type;
                    uni.showLoading({})
                    this.getList();
                }
            },
            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 = totaluser
                } else {
                    urlRequest = total
                }
                urlRequest().then(res => {
                    this.lists = res.rand;
                    this.page_id = res.page_id;
                    this.end_timestamp = res.end_timestamp * 1000;
                    uni.hideLoading()
                    this.showCountDown = true;
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask: true
                    })
                })
            }
        }
    }
</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;

            .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_type {
            background-color: #26b398;
            white-space: nowrap;
            width: 100%;


            .rank_type_item {
                display: inline-block;
                width: 18%;
                text-align: center;
                font-size: 36rpx;
                text-align: center;
                padding: 40rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: rgba($color: #fff, $alpha: 0.6);
            }

            .rank_type_item_active {
                position: relative;
                color: white;

                &::after {
                    content: '';
                    border-bottom: 20rpx solid white;
                    border-right: 16rpx solid transparent;
                    border-left: 16rpx solid transparent;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    margin-left: -20rpx;
                }
            }

        }

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

            .title {
                font-size: 28rpx;
                font-weight: normal;
                color: #34CE98;
            }

            .time {
                padding-left: 20rpx;
                flex: 1;
                font-size: 28rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                color: #333;


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

                    .time__item_no {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        background-color: #34CE98;
                        color: white;
                        min-width: 50rpx;
                        min-height: 50rpx;
                        border-radius: 4rpx;
                        margin: 0 16rpx;
                        font-size: 36rpx;
                        font-weight: bold;
                        padding: 2rpx 10rpx;
                    }
                }
            }
        }

        .list {
            border-top: 30rpx solid #f9f9f9;
            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>
