<template>
  <div class="container" id="fourBoxSwiper" style="width: 100%;height: 100%;">
    <div ref="boxgallery" class="boxgallery" data-effect="effect-1">
      <div class="panel" v-for="(item,index) in morePic">
        <img :src="item.filePath"/>
      </div>
    </div>
    <ul class="point">
      <template v-for="(item,index) in morePic">
        <li :class="{currentAvtive:index==currentIndex.currentIndex}" :style="`height:${!phone?'8px':'0.1rem'};width:${!phone?'8px':'0.1rem'};margin:${!phone?'8px 4px':'0.1rem 0.05rem'}`"></li>
      </template>
    </ul>
  </div>
</template>

<script>
  import BoxesFx from "./boxesFx"
    export default {
        name: "FourBoxesSlideshow",
      props:{
        morePic:{
          type:Array
        } ,
        autoPlay:{
          default:4000
        }
      },
      data(){
          return{
            phone:/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
            currentIndex:{currentIndex:0}
          }
      },
      mounted(){
        this.$nextTick(()=>{
          new BoxesFx( this.$refs.boxgallery,{autoPlay:this.autoPlay,currentIndex:this.currentIndex} );
        })
      }
    }
</script>

<style lang="scss">
  #fourBoxSwiper{
    .point{
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 0;
      li{
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background: rgba(0,0,0,.2);
      }
    }
    .point li.currentAvtive{
      background: #fff;
    }
    .container{
      position: relative;
    }
    .boxgallery,
    .boxgallery div {
      position: absolute;
    }

    .boxgallery,
    .bg-tile,
    .bg-img {
      overflow: hidden;
    }

    .boxgallery,
    .panel {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .panel {
      z-index: 0;
      -webkit-perspective: 1200px;
      perspective: 1200px;
    }

    .bg-tile {
      width: 50%;
      height: 50%;
    }

    .bg-tile:nth-child(2),
    .bg-tile:nth-child(4) {
      left: 50%;
    }

    .bg-tile:nth-child(3),
    .bg-tile:nth-child(4) {
      top: 50%;
    }

    .bg-img {
      width: 100%;
      height: 100%;
      background: #999;
    }

    .bg-img img {
      position: absolute;
      display: block;
      height: 200%;
      width: 200%;
    }

    .bg-tile:nth-child(2) .bg-img img,
    .bg-tile:nth-child(4) .bg-img img {
      left: -100%;
    }

    .bg-tile:nth-child(3) .bg-img img,
    .bg-tile:nth-child(4) .bg-img img {
      top: -100%;
    }

    .boxgallery > nav span {
      position: absolute;
      top: 50%;
      z-index: 1000;
      display: block;
      width: 50px;
      height: 50px;
      outline: none;
      text-align: left;
      cursor: pointer;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .boxgallery > nav span.prev {
      left: 0;
    }

    .boxgallery > nav span.next {
      right: 0;
    }

    .boxgallery > nav i {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }

    .boxgallery > nav span::before,
    .boxgallery > nav span::after,
    .boxgallery > nav i::before,
    .boxgallery > nav i::after {
      position: absolute;
      left: 50%;
      width: 3px;
      height: 50%;
      outline: 1px solid transparent;
      background: #dbccd0;
      content: '';
      -webkit-transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .boxgallery > nav i::before,
    .boxgallery > nav i::after {
      z-index: 100;
      height: 0;
      background: #fff;
      -webkit-transition: height 0.3s, -webkit-transform 0.3s;
      transition: height 0.3s, transform 0.3s;
    }

    .boxgallery > nav span::before,
    .boxgallery > nav i::before {
      top: 50%;
      -webkit-transform: translateX(-50%) rotate(-135deg);
      transform: translateX(-50%) rotate(-135deg);
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
    }

    .boxgallery > nav span.next::before,
    .boxgallery > nav span.next i::before {
      -webkit-transform: translateX(-50%) rotate(135deg);
      transform: translateX(-50%) rotate(135deg);
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
    }

    .boxgallery > nav span::after,
    .boxgallery > nav i::after {
      top: 50%;
      -webkit-transform: translateX(-50%) rotate(-45deg);
      transform: translateX(-50%) rotate(-45deg);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    .boxgallery > nav span.next::after,
    .boxgallery > nav span.next i::after {
      -webkit-transform: translateX(-50%) rotate(45deg);
      transform: translateX(-50%) rotate(45deg);
      -webkit-transform-origin: 100% 0%;
      transform-origin: 100% 0%;
    }

    .no-touch .boxgallery > nav span:hover i::before,
    .no-touch .boxgallery > nav span:hover i::after {
      height: 50%;
    }

    .no-touch .boxgallery > nav span:hover::before,
    .no-touch .boxgallery > nav span:hover i::before {
      -webkit-transform: translateX(-50%) rotate(-125deg);
      transform: translateX(-50%) rotate(-125deg);
    }

    .no-touch .boxgallery > nav span.next:hover::before,
    .no-touch .boxgallery > nav span.next:hover i::before {
      -webkit-transform: translateX(-50%) rotate(125deg);
      transform: translateX(-50%) rotate(125deg);
    }

    .no-touch .boxgallery > nav span:hover::after,
    .no-touch .boxgallery > nav span:hover i::after {
      -webkit-transform: translateX(-50%) rotate(-55deg);
      transform: translateX(-50%) rotate(-55deg);
    }

    .no-touch .boxgallery > nav span.next:hover::after,
    .no-touch .boxgallery > nav span.next:hover i::after {
      -webkit-transform: translateX(-50%) rotate(55deg);
      transform: translateX(-50%) rotate(55deg);
    }

    .panel.current {
      z-index: 2;
    }

    .panel.active {
      z-index: 1;
    }

    .panel.current .bg-img {
      -webkit-transition: -webkit-transform 1.1s ease-in-out;
      transition: transform 1.1s ease-in-out;
    }

    .boxgallery[data-effect="effect-1"] .panel.active .bg-tile,
    .boxgallery[data-effect="effect-2"] .panel.active .bg-tile {
      -webkit-animation: scaleDown 1.1s ease-in-out;
      animation: scaleDown 1.1s ease-in-out;
    }

    @-webkit-keyframes scaleDown {
      from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
      to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }

    @keyframes scaleDown {
      from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
      to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }

    .boxgallery[data-effect="effect-2"] .panel.current .bg-img {
      -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.7,0,0.3,1);
      transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
    }

    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(2) .bg-img {
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
    }

    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(3) .bg-img {
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }

    .boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(4) .bg-img {
      -webkit-transition-delay: 0.45s;
      transition-delay: 0.45s;
    }

    .boxgallery[data-effect="effect-3"] .panel::after {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      content: '';
      -webkit-transition: opacity 1.1s ease-in-out;
      transition: opacity 1.1s ease-in-out;
    }

    .boxgallery[data-effect="effect-3"] .panel.current::after,
    .boxgallery[data-effect="effect-3"] .panel.active::after {
      opacity: 0;
    }

    .boxgallery[data-effect="effect-3"] .panel.current::after {
      -webkit-transition: none;
      transition: none;
    }

    .boxgallery[data-effect="effect-3"] .panel.current .bg-img {
      -webkit-transition: -webkit-transform 1.1s cubic-bezier(0.7,0,0.3,1);
      transition: transform 1.1s cubic-bezier(0.7,0,0.3,1);
    }

    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(2) .bg-img {
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
    }

    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(3) .bg-img {
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }

    .boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(4) .bg-img {
      -webkit-transition-delay: 0.45s;
      transition-delay: 0.45s;
    }

  }
</style>
