<template>
    <div class="slider">
      <div class="arrow left" :class="{disable:currentIndex<1}" v-if="currentIndex > 0" @click="previous"></div>
      <div class="arrow right" @click="next" v-if="currentIndex < links.length - 4"></div>
      <div class="slides" id="slides">
        <div class="slide" v-for="link in slides" :key="link">
            <img src="@/assets/img/selectPage/item-icona.png" alt="">
            <div class="text">
                <div class="name">系统选择一</div>
                 <div class="remake">system selection</div>
            </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Slider',
    props: {
      links: Array
    },
    data() {
      return {
        currentIndex: 0
      };
    },
    computed: {
      slides() {
        const slidesDIV = document.getElementById('slides');
        if(slidesDIV){
            slidesDIV.classList.add('slide-out');
            setTimeout(function () {
                slidesDIV.classList.remove('slide-out');
            }, 500);
        }
        return this.links.slice(this.currentIndex, this.currentIndex + 4);
      }
    },
    methods: {
      previous() {
        // console.log('currentIndex',this.currentIndex);
        this.currentIndex -= 4;
      },
      next() {
        // console.log('currentIndex',this.currentIndex);
        this.currentIndex += 4;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .arrow {
    width: 101px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  .arrow.left {
    // background: url(~@/assets/img/selectPage/left.png) center no-repeat;
    background: url(~@/assets/img/selectPage/right.png) center no-repeat;
    transform: rotate(180deg);
    left: 0;
  }
  
  .arrow.right {
    background: url(~@/assets/img/selectPage/right.png) center no-repeat;
    right: 0;
  }
  
  .slides {
    display: flex;
    justify-content: center;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide {
    /* width: 25%; */
    cursor: pointer;
    width: 320px;
    height: 465px;
    flex-shrink: 0;
    text-align: center;
    padding: 20px;
    padding-top:70px;
    box-sizing: border-box;
    background: url(~@/assets/img/selectPage/item-bg.png) center no-repeat;
    &:not(:last-of-type){
        margin-right: 29px;
    }
    img{
        opacity: 0.5;
        transition: all 0.5s;
    }
    .text{
        opacity: 0.5;
    }
    .name{
        font-size: 28px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42px;
        text-shadow: 0px 0px 12px #3394FF;
        margin-top: 35px;
        margin-bottom: 6px;
    }
    .remake{
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 21px;
    }
    &:hover{
        .text,img{
            opacity: 1;
        }
        img{
            transform: translateY(-10px);
        }
        background-image: url(~@/assets/img/selectPage/item-bga.png);
    }
  }
.slides {
    transition: all 0.5s ease-in-out;
    // transform-origin: 50% 100%;
    // transform: perspective(700px);
}
.slides.slide-out {
    // transform: translateX(100%);
    transform: rotateX(90deg);
    opacity: 0;
}

  </style>