<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: #000;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>