<template>
    <van-swipe :autoplay="3000" indicator-color="#ffffff" :loop="false">
        <template v-if="slidedata">
            <van-swipe-item v-for="(item, index) in slidedata" :key="index">
                <a @click="recordFn(index * 1 +1,item.url)" :href="item.url+'?ptag=index-banner-'+(index * 1 +1)" :target="item.window_open > 0 ?'_blank':'_self'">
                    <img :src="item.images" class="slide-pic">
                </a>
            </van-swipe-item>
        </template>
        <template v-else>
            <van-swipe-item>
                <img src="../../assets/images/home/banner.png" class="slide-pic">
            </van-swipe-item>
        </template>
    </van-swipe>
</template>

<script>
  import Vue from 'vue';
  import {Swipe, SwipeItem, Lazyload} from 'vant';

  Vue.use(Swipe).use(SwipeItem).use(Lazyload);
  export default {
    name: 'slide',
    props: {
      slidedata: Array
    },
    methods: {
      recordFn(index, url) {
        try {
          sensors.track('bannerClick', {
            page_type: 'h5-index',
            banner_location: 'h5-banner',
            banner_sort: Number(index),
            url: url
          });
        } catch (e) {

        }
      }
    }
  }
</script>


<style lang="scss">
    .slide-pic {
        width: 100%;
        height: 100%;
    }

    .van-swipe {
        &__indicators {
            left: auto;
            right: 0.773rem;
            bottom: 0.92rem;
        }
        &__indicator {
            width: 5px;
            height: 5px;
            opacity: 1;
            transition: all 0.2s ease;
        }
        &__indicator--active {
            width: 13px;
            height: 5px;
            background-color: #ffffff;
            border-radius: 10px;
        }
    }

</style>