<template>
  <swiper class="sw-notice swiper-no-swiping"
          style="height: 44px;"
          :options="swOptions"
          v-if="message.length"
          ref="myNotice">
    <swiper-slide class="sw-slide"
                  v-for="(item, index) in message"
                  :key="index">
      <div class="item">
        <p>{{ item.data }}</p>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'notice',
  props: {
    message: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    swOptions () {
      return {
        direction: 'vertical',
        loop: true,
        speed: 2000,
        height: 44,
        autoplay: true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  beforeDestroy () {
    this.$refs.myNotice && this.$refs.myNotice.swiper.destroy()
  }
}
</script>

<style lang="scss" scoped>
.sw-notice {
  width: 100%;
  background: #fff;

  &:before {
    @include vertical-center;
    left: 9px;
    z-index: 1;
    display: block;
    content: '';
    width: 18px;
    height: 18px;
    background: url("../image/voice@2x.png") center center/16px 16px no-repeat;
  }

  .sw-slide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }

  .item {
    display: flex;
    align-items: center;
    width: calc(100% - 41px);
    height: 44px;
    margin-left: 41px;

    p {
      width: 100%;
      font-size: 14px;
      color: #333333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
