<template>
  <swiper class="swiper-ad" :autoplay="true" easing-function="linear" :interval="3000" :circular="true" :vertical="true">
    <block v-for="(item, index) in ads" :key="index">
      <swiper-item class="ad-list">
        <div class="ad-list">{{item[0]}}</div>
        <div class="ad-list">{{item[1]}}</div>
        <div class="ad-list">{{item[2]}}</div>
      </swiper-item>
    </block>
  </swiper>
</template>


<script>
export default {
  props: {
    options: {
      type: 'Object',
      default: {}
    }
  },

  computed: {
    ads() {
      const { options, getString } = this;

      if (this.options) {
        let list = [];
        let len = Math.round(this.options.length / 3);
        for (let i = 1; i <= len; i++) {
          let _c = [
            getString(options[i * 3 - 3]),
            getString(options[i * 3 - 2]),
            getString(options[i * 3-1])
          ];
          list.push(_c);
        }
        return list;
      }
    }
  },
  methods: {
    getString(obj) {
      if (obj) {
        return `${obj.custMobile}购买了${obj.bundleName}`;
      }
      return '';
    }
  }

};
</script>

<style lang="stylus" scoped>
.swiper-ad {
  height: 3.6em !important;
  width: 160px;
}

.ad-list {
  height: 1.2em;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
