<template>
  <div class="guide-cube">
    <div v-if="showSwiper" class="guide-cube-swiper" ref="mySwiper" v-swiper:mySwiper="swiperOptions">
      <div class="swiper-wrapper">
        <div :style="style" :class="{'swiper-slide_two': slidesPerColumn === 2, 'swiper-slide_one': slidesPerColumn === 1, 'swiper-slide': true }" :key="index" v-for="(item, index) in list" @click="go(item.link)">
          <cr-image width="" height="" :src="item.img" fit="cover" :show-loading="false"></cr-image>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import 'swiper/dist/css/swiper.css';

  if (EASY_ENV_IS_BROWSER) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
    Vue.use(VueAwesomeSwiper)
  }

  export default {
    inject: ['editor'],
    props: {
      list: {
        type: Array,
        default: () => ([])
      },
      slidesPerColumn: {
        type: Number,
        default: 1
      },
      autoplay: Boolean,
      animation: Boolean
    },
    data() {
      const vm = this;
      let isEven = true;
      let lastEvenProgress = 0;
      let lastProgress = 0;
      return {
        showSwiper: true,
        swiperOptions: {
          loop: this.slidesPerColumn === 1 ? true : false,
          slidesPerView: 4,
          slidesPerColumn: this.slidesPerColumn,
          spaceBetween: 8,
          observer:true,
          observeParents:true,
          watchSlidesProgress: true,
          autoplay: this.autoplay,
          on: {
           progress: function() {
             const slidesLength = this.slides.length;
             if (!vm.animation) return;
             let ratio = Math.abs(this.slides[0].progress % 1).toFixed(10) * 0.2;
             if ([0, 1].includes(Math.abs(this.slides[0].progress % 2))) {
              isEven = Math.abs(this.slides[0].progress % 2) === 0 ? true : false;
             }
             if (Math.abs(this.slides[0].progress - lastEvenProgress) > 1) {
              lastEvenProgress = Math.floor(this.slides[0].progress);
              isEven = !isEven;
             }
             const isLeft = lastProgress < this.slides[0].progress;
             lastProgress = this.slides[0].progress;
               for (let i = 0; i < this.slides.length; i++) {
                   const slide = this.slides.eq(i);
                   let scale = 1;
                    if (Math.abs(this.slides[0].progress % 2) === 0) {
                      scale = vm.memorys[i] ? 0.8 : 1;
                    } else if(Math.abs(this.slides[0].progress % 2) === 1) {
                      scale = vm.memorys[i] ? 1 : 0.8;
                    } else if (isEven) {
                      if (isLeft) {
                        if (vm.memorys[i]) {
                         scale = 0.8 + ratio;
                        } else {
                         scale = 1 - ratio;
                        }
                      } else {
                        if (vm.memorys[i]) {
                         scale = 1 - ratio;
                        } else {
                         scale = 0.8 + ratio;
                        }
                      }
                    } else if (!isEven) {
                      if (isLeft) {
                        if (vm.memorys[i]) {
                         scale = 1 - ratio;
                        } else {
                         scale = 0.8 + ratio;
                        }
                      } else {
                        if (vm.memorys[i]) {
                         scale = 0.8 + ratio;
                        } else {
                         scale = 1 - ratio;
                        }
                      }
                    }
                   slide.transform(`scale3d(${scale}, ${scale}, 1)`);
              }
             }
           },
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      memorys() {
        const length = this.list.length;
        const baseNumber = this.slidesPerColumn === 1 ? 2 : 4;
        return new Array(length).fill(0).map((v, i) => [0, 3].includes(i % baseNumber) ? 1 : 0);
      },
      style() {
        return this.animation ? {
          transition: 'all .2s cubic-bezier(.4, 0, .2, 1)'
        } : {
          transform: 'none'
        };
      }
    },
    watch: {
      slidesPerColumn(newVal) {
        this.refreshSwiper('slidesPerColumn', newVal);
      },
      autoplay(newVal) {
        this.refreshSwiper('autoplay', newVal);
      },
      loop(newVal) {
        this.refreshSwiper('loop', newVal);
      },
    },
    methods: {
      go(url) {
        window.location.href = url;
      },
      refreshSwiper(key, val) {
        this.swiperOptions[key] = val;
        this.showSwiper= false;
        this.$nextTick(() => this.showSwiper= true);
        if (this.editor) setTimeout(() =>this.editor.adjustHeight(), 0);
      }
    },
  }
</script>
<style lang="less" scoped>
  .guide-cube {
    width: 100%;
    padding: 12px;
    &-swiper {
      width: 100%;
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 81px;
        height: 81px;
        /deep/ .cr-image {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          overflow: hidden;
        }
      }
    }

  }
</style>