<template>
  <div class="wheelplanting">
    <div class="swiper-container con-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
          <div class="size">
            <router-link :to="{ name: 'details', params: { type: url.type=='movement'?'share':'case', id: url.link }}" v-if="url.link" class="routelink">
           <img class="imgrul" :src="url.imageUrl" style="object-fit: cover" />
          </router-link>
            <img v-else class="imgrul" :src="url.imageUrl" style="object-fit: cover"/>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import request from '../../utils/request';
import apis from '../config/api';

export default {
  name: "wheelplanting",
  props: [
    'direction',
  ],
  data () {
    return {
      data: '',
      blogs: {},
      swiper: undefined,
    };
  },
  components: {},

  mounted () {
    this.initSwiper()
  },
  created () {
    // axios.get('http://localhost:8080/pc/carousel/list')
    request({
      ...apis.carousel.list,
    }).then(data => {
      this.blogs = data;
      this.initSwiper()
    })
  },
  methods: {

    initSwiper () {
      if (!this.swiper) {
        this.swiper = new Swiper(".con-swiper", {
          // loop:true,
          autoplay: true,
          direction: this.direction || 'horizontal',
          observer: true,
          observeSlideChildren: true,
          preloadImages: true,
          updateOnImagesReady: true,
          speed: 800,
          pagination: {
            el: '.swiper-pagination',
            bulletClass: 'swiper-pagination-bullet',
            bulletActiveClass: 'my-bullet-active',
            // hideOnClick: true,
            clickable: true,

          }
        });
      } else {
        this.swiper.update(true)
      }
    },

  },
};
</script>

<style scoped>
@media (min-width: 992px) {
  .wheelplanting .con-swiper {
    width: 100%;
    height: 100vh;
    z-index: 60;
  }
  .imgrul {
    width: 100vw;
    height: 100vh;
  }
}
@media (max-width: 992px) {
  .wheelplanting .con-swiper {
    /* width: 100%; */
    height: 53vw;
  }
  .swiper-slide {
    width: 100%;
    height: 53vw;
    overflow:hidden;
  }
  .size{
    width: 100%;
    height: 53vw;
    background-size: 100% 100% !important;
    text-align:center
  }
  .imgrul {
    width: 100vw;
    height: 53vw;
    /* margin:0 auto; */
    /* max-width:200vw; */
    overflow:hidden;
    /* width:100%; */
  margin:0 calc(50% - 960px);
  }
}
</style>
<style type="text/css">
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  opacity: 0.7;
  margin: 8px 10vw 7px 0;
  display: block;
}

.my-bullet-active {
  background: #fff;
  opacity: 1;
}
</style>