<template>
    <div class="rank">
        <img src="../../assets/top50.jpg" class="top-img" alt="" />
        <div class="top-text">
            <div class="text1">TOP50</div>
            <div class="text2">探索官</div>
        </div>
        <div class="time" v-if="time">
            <div class="text1">数据时间</div>
            <div class="text2">{{ time }}</div>
        </div>
        <div class="rank-content">
            <div class="tr">
                <div class="th">排行</div>
                <div class="th">用户头像</div>
                <div class="th">用户名称</div>
            </div>
            <div class="tr" v-for="(item, index) in list" :key="index">
                <div class="td">
                    <van-image
                        v-if="index < 3"
                        width="38"
                        height="38"
                        :src="require(`../../assets/info_icon_no${index + 1}.png`)"
                    />
                    <span v-else>{{ index + 1 }}</span>
                </div>
                <div class="td">
                    <van-image width="38" height="38" radius="38" :src="item.avatar" />
                    <img class="renzhengIocn" src="../../assets/yirenzhng-geren-icon.png" alt="" />
                </div>
                <div class="td">
                    <span>{{ item.nickname }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            time: ''
        };
    },
    mounted() {
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        this.$http.get('/userHold/top').then(res => {
            this.$toast.clear();
            this.list = res.filter(item => {
                return item.userId !== '1435297' && item.userId !== '4273750';
            });
        });
        // this.$http
        //     .get('sysConfig/get/fixed_top')
        //     .then(res => {
        //         if (res.value === '1' || res.value === 'boolean') {
        //             this.getFixed();
        //         } else {
        //             return Promise.reject();
        //         }
        //     })
        //     .catch(() => {
        //         this.getWeek();
        //     });
    },
    methods: {
        getFixed() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/userHold/top').then(res => {
                this.$toast.clear();
                this.list = res;
            });

            // this.time =
            //     this.dayjs('2022-05-30 20:00:00').format('YYYY-MM-DD HH:mm:ss') +
            //     ' ~ ' +
            //     this.dayjs().startOf('day').format('MM-DD HH:mm:ss');
        },
        getWeek() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/statistic/weekTop').then(res => {
                this.$toast.clear();
                this.list = res;
            });

            this.time =
                this.dayjs().add(-7, 'days').startOf('week').format('YYYY-MM-DD HH:mm:ss') +
                ' ~ ' +
                this.dayjs().startOf('week').format('MM-DD HH:mm:ss');
        }
    }
};
</script>

<style lang="less" scoped>
.rank {
    background-color: #1ea022;
    position: relative;
    display: flex;
    flex-direction: column;

    .top-img {
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    padding: 48vw 10px 0;

    .top-text {
        position: absolute;
        top: 36px;
        left: 20px;
        color: #fff;

        .text1 {
            font-size: 36px;
            font-family: 'ZhenyanGB';
        }
        .text2 {
            font-size: 28px;
            font-family: 'ZhenyanGB';
            margin-top: 10px;
        }
    }

    .time {
        position: absolute;
        left: 0px;
        top: calc(48vw - 40px);
        font-size: 12px;
        color: #ffffff88;
        line-height: 12px;
        transform: scale(0.83) translateX(6px);
        .text2 {
            margin-top: 2px;
        }
    }
}

.rank-content {
    height: 100%;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    flex-grow: 1;
    position: relative;
    z-index: 1;
    .bottom(15px);
    overflow: hidden;
    .tr {
        overflow: hidden;
        position: relative;
        padding: 0 30px;
        .flex();
        .th {
            font-size: 12px;
            color: @text3;
            line-height: 17px;
            padding: 15px 0;

            &:nth-child(1) {
                width: 38px;
                text-align: center;
            }

            &:nth-child(2) {
                margin: 0 46px 0 37px;
            }
        }

        &:not(:first-child) {
            &::after {
                content: '';
                bottom: 0;
                left: 85px;
                right: 0;
                height: 1px;
                background-color: #f5f7fa;
                position: absolute;
            }
        }
    }

    .td {
        padding: 10px 0;
        flex-shrink: 0;
        &:nth-child(2) {
            width: 48px;
            margin: 0 46px 0 37px;
            .van-image {
                margin: auto;
                display: block;
            }

            position: relative;
            .renzhengIocn {
                position: absolute;
                width: 16px;
                height: 16px;
                right: 3px;
                bottom: 10px;
            }
        }

        &:nth-child(3) {
            overflow: hidden;
            flex-grow: 1;
            span {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        &:nth-child(1) {
            text-align: center;
            width: 38px;
            font-size: 20px;
            font-family: 'AlibabaPuHuiTi';
            color: @text3;
            font-weight: bold;
            line-height: 20px;
        }
    }
}
</style>
