<template>
  <div class="marquee">
    <div class="marquee-swiper" v-if='showSwiper' ref="mySwiper" v-swiper:mySwiper="swiperOptions">
      <div class="swiper-wrapper">
        <div class="swiper-slide" :key="index" v-for="(item, index) in list">
          <a class="swiper-slide-a" @click="go(item.link)">
            <span :style="styles">{{item.text}}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import 'swiper/dist/css/swiper.css';

  if (EASY_ENV_IS_BROWSER) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
    Vue.use(VueAwesomeSwiper)
  }

  export default {
    inject: ['editor'],
    props: {
      list: {
        type: Array,
        default: () => ([])
      },
      fontColor: {
        type: String,
        default: '#666666'
      }
    },
    data() {
      return {
        showSwiper: true,
        swiperOptions: {
          loop: true,
          observer:true,
          observeParents:true,
          direction: 'vertical',
          allowTouchMove: false,
          autoplay: true
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      styles() {
        return {
          color: this.fontColor
        }
      }
    },
    watch: {
      list: {
        deep: true,
        handler() {
          this.refreshSwiper();
        }
      }
    },
    methods: {
      go(link) {
        window.location.href = link;
      },
      refreshSwiper() {
        console.log('refreshSwiper');
        this.showSwiper= false;
        this.$nextTick(() => this.showSwiper= true);
      }
    }
  }
</script>
<style lang="less" scoped>
  .marquee {
    width: 100%;
    height: 30px;
    border-radius: 8px;
    background-color: #D8D8D8;
    .swiper-container {
      height: 100%;
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        span {
          font-size: 14px;
          line-height: 20px;
          color: #666666;
        }
      }
    }
  }
</style>