<template>
    <div class="marquee_box">
            <ul class="marquee_list" :class="{marquee_top:animate}">
                    <li v-for="(item,index) in lists" :key="index">
                            {{item.name}}
                    </li>
            </ul>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('home/mine');

export default {
  name: 'scroll',
  props: {

  },
  data() {
    return {

    };
  },
  computed: {
      ...mapState({
          animate: state => state.animate,
          lists: state => state.rollNoticeList
      })
    },
  mounted() {
      this.fetchRollBoardList().then((data) => {
          if(data.length > 1) {
          this.scrollTimer = setInterval(this.showMarquee, 3000)
      }
      })
       
  },
    beforeDestroy() {
        this.hideMarquee();
        clearInterval(this.scrollTimer);
  },
  methods: {
    ...mapActions(['fetchRollBoardList','showMarquee','hideMarquee']),
  }
}
</script>

<style lang="scss" scoped>
.marquee_box {
    position: relative;
    width: 100%;
    height: 90px;
    overflow: hidden;
}

.marquee_list {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.marquee_top {
    transition: all 0.8s;
    margin-top: -90px
}

.marquee_list li {
    height: 90px;
    width: 100%;
    line-height: 90px;
    font-size: 24px;
    color: #D0021B;
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>