<template>
    <div class='scroll-list' v-show="userList.length !== 0">
        <div class='scroll-list-box' ref='userBox'>
            <ul ref="userUlOne">
                <li class="user-list" v-for="(item, index) in userList" :key="index">
                    <img :src="item.avatar" alt="">
                    <span class='text'>{{item.nickname|nickName}}<span>已完成任务，获取奖励</span></span>
                    
                </li>
            </ul>
            <ul ref="userUlTwo"></ul>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        userList:{
            default:()=>{
                return []
            }
        }
    },
    data(){
        return{
            i:0
        }
    },
    mounted(){
        this.$nextTick(()=>{
            if(this.userList.length){
                this.scroll(1000/60);
            }
        })  
    },

    filters:{
        nickName(val){
            if (val.match(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g)) {
                return val;
            }
            if (val.length === 0) {
                return '**';
            }
            if (val.length === 1) {
                return val + '**';
            }
            if (val.length === 2) {
                return val.substring(0, 1) + '**';
            }
            if (val.length > 2) {
                return val.substring(0, 1) + '**' + val.substring(val.length - 1, val.length);
            }
        }
    },
    methods:{
         // 获取dom信息 设置滚动定时器
        scroll(t) {
            let ul1 = this.$refs.userUlOne;
            let ul2 = this.$refs.userUlTwo;
            let box = this.$refs.userBox;
            ul2.innerHTML = ul1.innerHTML;

            box.scrollTop = 0;
            let timer = setInterval(this.rollStart.bind(null, box, ul1), t);
        },
        // 移动操作
        rollStart(box, ul1) {
            this.i++;
            if (box.scrollTop >= ul1.scrollHeight) {
                box.scrollTop = 0;
            } else {
                if(this.i%2){
                    box.scrollTop = box.scrollTop + 1;
                }
            }
        },
    }
}
</script>
<style scoped lang='scss'>
.scroll-list{
   background: #FF8A22;
    width:4.4rem;
    height:0.5rem;
    border-radius: 0.24rem;
    color: #FFFACC;
    margin-top:0.24rem;
    .scroll-list-box{
        overflow: hidden;
        font-size:0.24rem;
        height: 0.5rem;
        li{
            height:0.5rem;
            display: flex;
            align-items: center;
            img{
                width:0.48rem;
                height: 0.48rem;
                border-radius:100%;
            }
            .text{
                margin-left:0.16rem;
                color:white;
            }
        }
    }
}
li{
    list-style: none;
}
ul{
    margin:0;
    padding:0;
}
</style>