<template>
    <div class='content'>
        <div class="bg">
            <div class="cnt">
                <div class="cntBg"></div>
                <div class="cntRank">
                    <div class="rank1">
                        <img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank01.webp" alt="">
                        <img class="rankAva" :src="top01.avatar" alt="">
                        <div class="rankNum">{{ top01.score }}</div>
                        <div class="rankName">{{ top01.position_name }}-{{ top01.name }}</div>
                    </div>
                    <div class="rank2">
                        <img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank02.webp" alt="">
                        <img class="rankAva" :src="top02.avatar" alt="">
                        <div class="rankNum">{{ top02.score }}</div>
                        <div class="rankName">{{ top02.position_name }}-{{ top02.name }}</div>
                    </div>
                    <div class="rank3">
                        <img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank03.webp" alt="">
                        <img class="rankAva" :src="top03.avatar" alt="">
                        <div class="rankNum">{{ top03.score }}</div>
                        <div class="rankName">{{ top03.position_name }}-{{ top03.name }}</div>
                    </div>
                    <div class="rank4">
                        <img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank04.webp" alt="">
                        <img class="rankAva" :src="top04.avatar" alt="">
                        <div class="rankNum">{{ top04.score }}</div>
                        <div class="rankName">{{ top04.position_name }}-{{ top04.name }}</div>
                    </div>
                    <div class="rank5">
                        <img class="rankBg" src="../../../assets/lingyungeImages/mobile/rank05.webp" alt="">
                        <img class="rankAva" :src="top05.avatar" alt="">
                        <div class="rankNum">{{ top05.score }}</div>
                        <div class="rankName">{{ top05.position_name }}-{{ top05.name }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="list">
                    <div class="rule" @click="mask = true">
                        <img class="ruleImg" src="../../../assets/lingyungeImages/mobile/rule.webp" alt="">
                        积分说明
                    </div>
                    <div style="overflow: hidden;height: 310px;">
                        <div class="listItem" :class="{ 'animate-up': animateUp }"  v-for="(item, index) in topList"
                            :key="index">
                            <div class="itemBg">{{ item.index }}</div>
                            <div class="itemAva">
                                <img class="itemAvaImg" :src="item.avatar" alt="">
                            </div>
                            <div class="itemText">{{ item.position_name }}-{{ item.name }}</div>
                            <div class="itemNum">{{ item.score }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- mask -->
        <div class="mask" v-if="mask">
            <div class="maskContent">
                <div class="title">积分说明</div>
                <div class="tips">此积分为各成员参与凌云阁活动累计积分。</div>
                <div class="btn" @click="mask = false">知道了</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="js">
import { ref, onMounted } from "vue";
const mask = ref(false);
const showMask = () => {
    console.log(mask)
}
//滚动播放
const animateUp = ref(false);
import { getList } from '../../../api/lingyuge'
const defaultImg = require('../../../assets/lingyungeImages/tx.png')
const top01 = ref({});
const top02 = ref({});
const top03 = ref({});
const top04 = ref({});
const top05 = ref({});
const topList = ref([]);
const getListArray = () => {
    getList().then((res) => {
        let data = res.data;
        for (let i in data) {
            data[i].index = Number(i) + 1;
            if (data[i].avatar.indexOf('storage') < 0) {
                data[i].avatar = defaultImg;
            }
        }
        data.forEach((item, index) => {
            if (index == 0) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top01.value = item };
            if (index == 1) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top02.value = item };
            if (index == 2) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top03.value = item };
            if (index == 3) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top04.value = item };
            if (index == 4) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top05.value = item };
            if (index > 4) {
                topList.value.push(item);
            }
        });
    })
}
getListArray();
const scrollAnimate = () => {
    animateUp.value = true;
    setTimeout(() => {
        animateUp.value = false
        topList.value.push(topList.value[0]);
        topList.value.shift();
    }, 1000)
}
onMounted(() => {
    const timer = setInterval(scrollAnimate, 1500);
});

</script>
<style lang="scss" scoped>
.animate-up {
    transition: all 1s ease-in-out;
    transform: translateY(-50px);
}

.bg {
    background-image: url("../../../assets/lingyungeImages/mobile/bg.webp");
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-size: 100% 100%;
    padding: 0 12px;
    box-sizing: border-box;
    padding-top: 33px;

    .cnt {
        border: 1px solid #F8BE5E;
        border-radius: 12px 12px 0 0;
        // width: 350px;
        margin: 0 auto;
        background: rgba(18, 44, 90, 0.6);
        margin-top: 30px;
        max-width: 350px;
    }

    .cntBg {
        background-image: url("../../../assets/lingyungeImages/mobile/title.webp");
        width: 327px;
        height: 48px;
        background-size: 327px 48px;
        margin: 0 auto;
        display: block;
        position: relative;
        top: -24px;
    }
    @media screen and (max-width:320px){
        .bg{
            padding: 0 12rpx;
        }
        .cntBg{
            left:-15px;
        }
    }
    .cntRank {
        position: relative;
        min-height: 265px;
        max-width: 350px;
        margin: 0 auto;
        .rank1 {
            background-image: url("../../../assets/lingyungeImages/mobile/rank001.webp");
            width: 153px;
            height: 168px;
            background-size: 153px 168px;
            position: absolute;
            left: 50%;
            margin-left: -76px;
            z-index: 5;

            .rankBg {
                width: 58px;
                height: 62px;
                position: relative;
                left: 50%;
                margin-left: -29px;
                margin-top: 17px;
            }

            .rankAva {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                position: relative;
                left: 50%;
                margin-left: -46px;
                top: -15px;
            }

            .rankNum {
                font-size: 18px;
                text-align: center;
                font-weight: bold;
                color: #fff;
            }

            .rankName {
                font-size: 13px;
                text-align: center;
                color: #fff;
            }
        }

        .rank2 {
            background-image: url("../../../assets/lingyungeImages/mobile/rank002.webp");
            width: 119px;
            height: 134px;
            background-size: 119px 134px;
            position: absolute;
            z-index: 4;
            left: 5px;
            top: 30px;

            .rankBg {
                width: 50px;
                height: 54px;
                position: relative;
                left: 50%;
                margin-left: -25px;
                margin-top: 11px;
            }

            .rankAva {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                position: relative;
                left: 50%;
                margin-left: -40px;
                top: -15px;
            }

            .rankNum {
                font-size: 14px;
                text-align: center;
                font-weight: bold;
                color: #fff;
            }

            .rankName {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
        }

        .rank3 {
            background-image: url("../../../assets/lingyungeImages/mobile/rank002.webp");
            width: 119px;
            height: 134px;
            background-size: 119px 134px;
            position: absolute;
            z-index: 4;
            right: 5px;
            top: 30px;

            .rankBg {
                width: 50px;
                height: 54px;
                position: relative;
                left: 50%;
                margin-left: -25px;
                margin-top: 11px;
            }

            .rankAva {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                position: relative;
                left: 50%;
                margin-left: -40px;
                top: -15px;
            }

            .rankNum {
                font-size: 14px;
                text-align: center;
                font-weight: bold;
                color: #fff;
            }

            .rankName {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
        }

        .rank4 {
            background-image: url("../../../assets/lingyungeImages/mobile/rank003.webp");
            width: 110px;
            height: 123px;
            background-size: 110px 123px;
            position: absolute;
            z-index: 3;
            left: 18%;
            top: 139px;

            .rankBg {
                width: 46px;
                height: 51px;
                position: relative;
                left: 50%;
                margin-left: -23px;
                margin-top: 9px;
            }

            .rankAva {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                position: relative;
                left: 50%;
                margin-left: -37px;
                top: -15px;
            }

            .rankNum {
                font-size: 13px;
                text-align: center;
                font-weight: bold;
                color: #fff;
            }

            .rankName {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
        }

        .rank5 {
            background-image: url("../../../assets/lingyungeImages/mobile/rank003.webp");
            width: 110px;
            height: 123px;
            background-size: 110px 123px;
            position: absolute;
            z-index: 3;
            right: 18%;
            top: 139px;

            .rankBg {
                width: 46px;
                height: 51px;
                position: relative;
                left: 50%;
                margin-left: -23px;
                margin-top: 9px;
            }

            .rankAva {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                position: relative;
                left: 50%;
                margin-left: -37px;
                top: -15px;
            }

            .rankNum {
                font-size: 13px;
                text-align: center;
                font-weight: bold;
                color: #fff;
            }

            .rankName {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
        }
    }

    .line {
        // width: 330px;
        height: 3px;
        background-image: url("../../../assets/lingyungeImages/mobile/line.webp");
        width: 331px;
        height: 24px;
        background-size: 331px 24px;
        margin: 0 auto;
        position: relative;
        top: -10px;
        // background: linear-gradient(79deg, rgba(93, 175, 254, 0) 0%, rgba(115, 193, 254, 0.5) 19%, #C0FEFF 46%, rgba(120, 213, 255, 0.5) 80%, rgba(96, 199, 255, 0) 100%);
    }

    .list {
        box-sizing: border-box;
        padding: 0 12px;
        margin-top:-10px;
        .rule {
            height: 20px;
            text-align: right;
            color: #F8BE5E;
            font-size: 14px;

            .ruleImg {
                width: 17px;
                height: 17px;
                position: relative;
                top: 3px;
            }
        }

        .listItem {
            display: flex;
            margin: 10px 0;

            .itemBg {
                background-image: url("../../../assets/lingyungeImages/mobile/tips.webp");
                width: 27px;
                height: 30px;
                background-size: 27px 30px;
                text-align: center;
                color: #fff;
                font-weight: bold;
                position: relative;
                top: 7px;
                line-height: 24px;
            }

            .itemAva {
                background-image: url("../../../assets/lingyungeImages/mobile/avaBg.webp");
                width: 40px;
                height: 40px;
                background-size: 40px 40px;
                position: relative;
                margin-left: 20px;

                .itemAvaImg {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    position: absolute;
                    top: 5px;
                    left: 4px;
                }
            }

            .itemText {
                font-size: 15px;
                color: #fff;
                flex: 1;
                line-height: 40px;
                padding: 0 10px;
            }

            .itemNum {
                font-size: 18px;
                // font-weight: bold;
                color: #F8BE5E;
                line-height: 40px;
            }
        }
    }

}

// mask
.mask {
    background: rgba(60, 61, 63, 0.8);
    width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;

    .maskContent {
        background: #fff;
        width: 320px;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 12px;
        margin: 0 auto;
        margin-top: 50%;

        .title {
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .tips {
            color: #3C3D3F;
            font-size: 14px;
            line-height: 25px;
        }

        .btn {
            width: 120px;
            height: 40px;
            background-size: 120px 40px;
            background-image: url("../../../assets/lingyungeImages/mobile/btn.webp");
            text-align: center;
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            line-height: 40px;
            display: block;
            margin: 0 auto;
            margin-top: 40px;
        }
    }
}
</style>