<template>
    <div class="axchange-banner">
      <div class="banner-prev" @click="handleChange('prev')">
        <van-icon name="arrow-left" class="banner-prev-icon" />
      </div>
      <div class="axchange-banner-container">
        <van-swipe class="axchange-banner" ref="myVanSwipe" :autoplay="6000"  :loop="true" >
          <van-swipe-item v-for="(item, index) in images" :key="index+'_'"  @click="handleLink(item.id)">
            <img v-lazy="assetsUri(item.logo)" style="width: 100%;height: 100%" />
          </van-swipe-item>
            <template #indicator>
                <div ></div>
            </template>
        </van-swipe>
      </div>
      <div class="banner-next" @click="handleChange('next')">
        <van-icon name="arrow" class="banner-next-icon" />
      </div>
    </div>
</template>

<script>
  import {assetsUri} from "../../utils";

  export default {
  name: 'Banner',
    data(){
    return {
      assetsUri
    }
    },
  props: {
    images: {
      default: () => {
        return []
      },
      type: Array
    }
  },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleResize)
    },
    mounted(){
    window.addEventListener('resize',this.handleResize)
    },
  methods: {
    handleResize(){
      this.$refs.myVanSwipe.resize();
    },
    handleChange(method){
      this.$nextTick(()=>{
        if(method==='next'){
          this.$refs.myVanSwipe.next()
        }else{
          this.$refs.myVanSwipe.prev()
        }
      })
    },
    handleLink (id) {
      return
      // this.$router.push({ path: 'detail', query: { type: 'banner', id } })
    }
  }
}
</script>
<style lang="less" scoped>
  .axchange-banner{
    display: flex;
    align-items: center;
  }
  .banner-prev,.banner-next{
    cursor: pointer;
    flex-shrink: 0;
    width: .9rem;
    height: .9rem;
    background-color: #342927;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover{
      background-color: #F49F00;
      .banner-next-icon{
        color: #FFFFFF;
      }
      .banner-prev-icon{
        color: #FFFFFF;
      }
    }
    &-icon{
      font-size: .4rem;
      color: #9B9B9B ;
    }
  }
  .banner-prev{
    margin-right: .74rem;
  } .banner-next{
    margin-left: .74rem;
  }
.axchange-banner{
  justify-content: center;
  width: 100%;
  position: relative;
  height: 100%;
  .van-swipe-item{
    width: 100% !important;
  }
  .van-icon-volume-o:before{
    color: #0f4493;
  }
  .axchange-banner-container{
      max-width: 9.72rem;
      max-height: 6.28rem;
      flex: 1;
      height: 100%;
      box-sizing: border-box;
  }
}
  @media screen and (max-width: 1280px) {
    .axchange-banner{
      .axchange-banner-container{
        max-width: 8rem;
      }
      .banner-prev,.banner-next{
        width: .7rem;
        height: .7rem;
        &-icon{
          font-size: .3rem;
        }
      }
      .banner-prev{
        margin-right: .35rem;
      }
      .banner-next{
        margin-left: .35rem;
      }
    }
  }
@media screen and (max-width: 768px) {
  .axchange-banner{
    .axchange-banner-container{
      max-width: 5.20rem;
      max-height: 3.35rem;
    }
    .banner-prev,.banner-next{
      width: .5rem;
      height: .5rem;
      &-icon{
        font-size: .4rem;
      }
    }
    .banner-prev{
      margin-right: .35rem;
    }
    .banner-next{
        margin-left: .35rem;
    }
  }
}
</style>
