<template>
  <div class="banner_container">
    <div id="picPanel" class="pic-panel" ref="pic" :class="isshowswiper ? 'myswiper-container':'' ">
      <div id="picBox" class="pic-box">
        <ul id="picList" class="pic-list">
          <li v-for="(banner,index) in bannerSetting" :style="getLiStyle" :key="index" class="bannerItem" :class="[{'re':index == 0}]">
            <a href="javascript:;" @click="handleClick(index)">
              <img :src="banner.url" :style="getStyle" @load='handleOnload(index)'/>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>

function isAndroid(){
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  return isAndroid;
}
import photoSlide from  './slider';

export default {
  name: 'mu-banner',
  props:{
    'banner-setting': {
      type: Array
    },
    'width':{
      type:Number
    },
    'height':{
      type:Number
    }
  },
  computed:{
    loop(){
      return this.bannerSetting.length > 1 ? true : false;
    },
    autoPlay(){
      return this.bannerSetting.length > 1 ? true:false;
    },
    pagination(){
      return this.bannerSetting.length > 1 ? true:false
    },
    getStyle(){
      return {
        "width":this.width ? this.width + "px": window.innerWidth + "px",
        "height":this.height ? this.height +"px":"180px"
      }
    },
    getLiStyle() {
      return {
        "width":window.innerWidth + "px",
        "height":this.height ? this.height +"px":"180px"
      }
    },
  },
  watch:{
    bannerSetting(){
      this.$forceUpdate();
    }
  },
  data:function(){
    return {
      isshowswiper:isAndroid() ? false:true
    }
  },
  methods:{
    handleOnload(index){
      if (index ===0) {
        this.$emit('firstBannerLoad');
      }
    },
    handleClick(index){
      if(this.bannerSetting[index] && this.bannerSetting[index].jumpUrl){
        this.$emit('openNewPage',this.bannerSetting[index].jumpUrl);
      }
    },
    created(){

    },
    initBanner(index){

      var wrapInner = document.getElementById('picBox').getElementsByTagName('ul')[0];
      for(var i=wrapInner.children.length - 1 ;i>=0;i--){
        if(wrapInner.children[i].className.indexOf('bannerItem') == -1){
            wrapInner.removeChild(wrapInner.children[i]);
        }else{
          if(wrapInner.children[i].hasAttribute('style')){
            wrapInner.children[i].removeAttribute('style');
          }
        }
      }
      if(wrapInner.hasAttribute('style')){
        wrapInner.removeAttribute('style');
      }
      /**重复渲染做的特殊处理*/
      var picBox = document.getElementById('picBox');
      var pagi = document.getElementsByClassName('pagination');
      if(pagi.length){
        picBox.removeChild(pagi[0]);
      }
      /****/
      if (this.slider) {
        this.slider.stopPlay();
        this.slider.destory();
        // let el = document.querySelector('.pagination');
        // //获取当前索引
        // let ael = document.querySelector('.pagination span.active');
        // var i = Array.prototype.indexOf.call(el.childNodes, ael);

        // this.slider.move(i);
        // return;
      }

      this.slider = new photoSlide({
        wrap: document.getElementById('picBox'),
        loop: this.loop,
        autoPlay: this.autoPlay,
        autoTime: 5000,
        pagination: this.pagination,
        width:this.width ? this.width : window.innerWidth,
        height:180,
      });
    }
  },
  updated(){
    // let el = document.querySelector('.pagination');
    // //获取当前索引
    // let ael = document.querySelector('.pagination span.active');
    // var i = Array.prototype.indexOf.call(el.childNodes, ael);
    // console.log("laile---update");
    // 不太好解： 临时对长度=1的情况特殊处理
    if (window._bscmps) {
      clearTimeout(window._bscmps);
    }

    window._bscmps = setTimeout(()=>{
      this.initBanner();
    }, this.slider.listLength == 1 ? 3000 : 0);
  },
  mounted () {
    this.initBanner();
  },
}
</script>
<style lang='less'>
.pagination {
  width: 100%;
  left: 0;
  bottom: 10px;
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  transition: 300ms;
  z-index: 10;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  span{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    border:1px solid #fff;
    margin: 0 3px;
  }
  .active{
    opacity: 1;
    background: #ffffff;
  }
}
.pic-panel {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.pic-list {
  width: 100%;
  position: relative;
}
.pic-list li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-list .re {
  position: relative;
  z-index: 2;
}
.pic-list li img {
  width: 100%;
  //height:180px;
}
.pic-list li a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 600px) {
  .pic-box {
    position: relative;
    top: 0;
    left: 25%;
    width: 50%;
  }
  .pic-list li:nth-child(2) {
    left: 100%;
  }
  .pic-list li:last-child {
    left: -100%;
  }
  .pic-list li img {
    padding: 0 0.125rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.myswiper-container{
  position:relative;
  -webkit-overflow-scrolling : touch;
  clip-path: ellipse(170% 72% at 50% 26%);
}
</style>
