<template>
  <div class="wheelplanting">
    <div class="swiper-container con-swiper">
      <div class="swiper-wrapper">
        <!-- <div class="col-md-2 col-xs-2" v-for="(item,index) in blogs" :key="index+'img'">
            <img  :src="item.logoImg" alt class="ph-logo" />
        </div>-->
        <!-- <div v-for="item in blogs" :key="item">
          <div class="swiper-slide">
            <img :src="item.imageUrl" width="100%" height="" alt />
          </div>
        </div>-->
        <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
          <img :src="url.imageUrl" width="100%" height="100%" />
        </div>
        <!-- <div class="swiper-slide">
          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
        </div>
        <div class="swiper-slide">
          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
        </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(".swiper-container", {
          // loop:true,
          // autoplay: true,
          direction: this.direction || 'horizontal',
          observer: true,
          observeSlideChildren: true,

          pagination: {
            el: '.swiper-pagination',
            bulletClass : 'swiper-pagination-bullet',
            bulletActiveClass: 'my-bullet-active',
            hideOnClick: true,
         
          }
        });
      } else {
        this.swiper.update(true)
      }
    },

  },
};
</script>

<style scoped>
@media (min-width: 992px) {
  .wheelplanting .con-swiper {
    width: 100%;
    height: 100vh;
    z-index: 60;
  }
}
@media (max-width: 992px) {
  .wheelplanting .con-swiper {
    width: 100%;
    height: 300px;
  }
}
</style>
<style type="text/css">
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  opacity: 0.7;
    margin: 8px 10vw 7px 0;
    display: block;
}
.swiper-pagination-bullet{

 /* margin:7px 0 7px -40px !important; 
 z-index: 60 !important; */
}

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