<template>
  <div>
    <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
        <li v-for="item in noticeList" class="liscroll">
        <span>{{ item.date }}</span>
        <span>{{ item.t1 }}</span>
        <span>{{ item.t2 }}</span>
        <span>{{ item.t3 }}</span>  
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "scrolllist",
    data() {
      return {
        // noticeList: [],
        animate: false,
        intNum: undefined,
      }
    },
    props: ['noticeList'],
    created: function() {
      // this.getNoticeData();
      this.ScrollUp();
    },
    methods: {
      getNoticeData() {
        this.$http.get('/news/allList', {
          params: {
            'pageNumber': 10,
            'currentPage': 1
          }
        }).then(res => {
          this.noticeList = res.data.items;
          this.ScrollUp();
        });
      },
      ScrollUp() {
        this.intNum = setInterval(() => {
          this.animate = true; // 向上滚动的时候需要添加css3过渡动画
          setTimeout(() => {
            this.noticeList.push(this.noticeList[0]); // 将数组的第一个元素添加到数组的
            this.noticeList.shift(); //删除数组的第一个元素
            this.animate = false;
          }, 500)
        }, 3000);
      },
      //鼠标移上去停止
      Stop() {
        clearInterval(this.intNum);
      },
      Up() {
        this.ScrollUp();
      },
    }
  }
</script>

<style scoped>
  .new-list {
    line-height: 28px;
    transition: top 0.5s;
  }

  .anim {
    transition: all 0.5s;
    margin-top: -28px;
  }
  .liscroll{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
</style>
