<template>
    <div class="rightChartTop">
        <div class="rightChartcenter-title mb-2">长时间未出入预警</div>
        <div class="title">
            <div class="title1">人员</div>
            <div class="nonecome">未出入时间</div>
            <div class="date">地址</div>
        </div>
        <div class="one">
            <ul class="new-list" :class="{ anim: animate }" @mouseenter="Stop()" @mouseleave="Up()">
                <li v-for="item, index in list" :key="index" class="liscroll">
                    <span class="title1">{{ item.namt }}</span>
                    <span class="nonecome">{{ item.momey }}</span>
                    <span class="date">{{ item.number }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'rightChartTop',
    data() {
        return {
            animate: false,
            intNum: null,
            list: [
                { namt: '测试011', number: '公寓/A栋/1单元/1层/101', momey: '2' },
                { namt: '测试02', number: '平山村/智慧公寓/30栋/2层/201', momey: '3' },
                { namt: '测试03', number: '平山村/智慧公寓/50栋/7层/701', momey: '3' },
                { namt: '测试04', number: '平山村/智慧公寓/60栋/3层/301', momey: '4' },
                { namt: '测试05', number: '平山村/智慧公寓/50栋/4层/401', momey: '2' },
                { namt: '测试06', number: '平山村/智慧公寓/60栋/6层/601', momey: '3' },
                { namt: '测试07', number: '平山村/智慧公寓/108栋/8层/803', momey: '4' },
                { namt: '测试08', number: '平山村/智慧公寓/70栋/4层/407', momey: '5' }
            ]
        }
    },
    created() {
        this.ScrollUp()
    },
    methods: {
        ScrollUp() {
            this.intNum = setInterval(() => {
                this.animate = true   // 向上滚动时添加css过渡动画
                setTimeout(() => {
                    this.list.push(this.list[0])
                    this.list.shift()
                    this.animate = false
                }, 500)
            }, 3000)
        },
        Stop() {
            clearInterval(this.intNum)
        },
        Up() {
            this.ScrollUp()
        }
    }
}
</script>

<style scoped>
.rightChartTop {
    /* background-color: #ffffff; */
    background-color: rgba(0,191,255, 0.2);
}

.anim {
    transition: all 0.5s linear;
    margin-top: -28px;
}

.new-list {
    line-height: 28px;
    height: 224px;
}

.liscroll {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: space-around; */
    color: 	#778899;
    text-align: left;
    /* border-bottom: 1px dashed #eeeeee; */
}
/* .liscroll:last-child {
    border-bottom: none;
} */
/* .liscroll:nth-child(n){
    background-color: skyblue;
}
.liscroll:nth-child(2n){
    background-color: #7390b6;
} */

.title {
    background-color: rgba(0,191,255);
    position: relative;
    width: 100%;
    top: 0;
    z-index: 1;
    padding: 0 5px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
    /* justify-content: space-around; */
}
.title1{
    width: 20%;
    text-align: center;
}
.nonecome{
    width: 20%;
    text-align: center;
}
.date{
    width: 60%;
    text-align: center;
}

.one{
    display: inline-block;
    height: 224px;
    width: 100%;
    box-sizing: border-box;
}
.rightChartcenter-title {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
    padding: 10px;
}
</style>