<template>
  <div class="card-loop">
    <transition-group name="list-complete" tag="div">
      <div
        v-for="(item, index) in list"
        :key="item.id"
        :class="`block${5 - index}`"
        class="list-complete-item"
        @click="openLink(item.id)"
      >
        <img :src="item.img" alt="图片" />
        <!-- <span class="name">{{ item.name }}</span> -->
      </div>
    </transition-group>
  </div>
</template>

<script>
import pic from "@/assets/imgs/boutique/1.jpg";

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getLoopData() {
      let arr = [];
      for (let i = 0; i < 5; i++) {
        arr.push({
          id: i,
          name: `card${i + 1}`,
          url: `/#/`,
          img: pic,
        });
      }
      this.list = arr;

      this.$nextTick(() => {
        let _this = this;
        setInterval(() => {
          let list = _this.list;
          let first = list[0];
          //   Math.floor(Math.random() * 1000 + Math.random())
          //   list.splice(list.length - 1, 1);
          //   list.splice(0, 0, first);
          list.splice(0, 1);
          list.push(first);
        }, 5000);
      });
    },
  },
  mounted() {
    this.getLoopData();
  },
};
</script>

<style lang="scss" scoped>
.card-loop {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 40%;
  & > div {
    width: 100%;
    height: 100%;
    &:hover {
      & > div {
        opacity: 0.3;
      }
    }
  }
  & > div > div {
    // width: 240px;
    // height: 380px;
    width: 75%;
    height: 80%;
    // border-radius: 1%;
    perspective: 100px;
    transform-origin: 0 100%;
    position: absolute;
    bottom: 0;
    &:hover {
      // hover放大，突出显示
      opacity: 1;
      z-index: 100!important;
      left: 0!important;
      bottom: 0!important;
      transform: scale(1.5) !important;
      & > img {
        cursor: pointer;
        transform: rotate(0);
      }
      & > span {
        display: block;
      }
    }
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      transform: rotateY(-4deg);
      transition: all 0.2s ease;
      box-shadow: 0 0 12px 0px #ddd;
      /* &:hover {
        cursor: pointer;
        transform: rotate(0);
      } */
    }
    /* & > span {
      position: absolute;
      top: 20px;
      left: 18px;
      width: 1px;
      font-size: 18px;
      color: rgba(8, 255, 255, 1);
      text-shadow: 1px 2px #0f0f0f;
      word-break: break-all;
      display: none;
    } */

    &.block5 {
      //   transform: scale(1.1);
      left: 0px;
      bottom: 0%;
      z-index: 5;
      /* > img {
        transform: rotateY(0);
      } */
    }
    &.block4 {
      //   transform: scale(1.2);
      left: 8%;
      bottom: 5%;
      z-index: 4;
    }
    &.block3 {
      //   transform: scale(1.3);
      left: 16%;
      bottom: 10%;
      z-index: 3;
    }
    &.block2 {
      //   transform: scale(1.4);
      left: 24%;
      bottom: 15%;
      z-index: 2;
    }
    &.block1 {
      //   transform: scale(1.5);
      left: 32%;
      bottom: 20%;
      z-index: 1;
      //   visibility: hidden;
    }
  }
}
.list-complete-item {
  transition: all .3s ease;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
