<template>
  <div class="wrapper-3d-slider">
    <div class="slider-3d">
      <div class="slider-item first">
        <img :src="imgs[0]" alt="" />
      </div>
      <div class="slider-item second right">
        <img :src="imgs[1]" alt="" />
      </div>
      <div class="slider-item third">
        <img :src="imgs[2]" alt="" />
      </div>
      <div class="slider-item second left">
        <img :src="imgs[3]" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "Slider3d",
  props: {
    imgs: Array,
    duration: {
      type: Number,
      default: 3,
    },
  },
  setup(props, ctx) {
    /*
     *组件挂载
     */
    onMounted(() => {
      const oSliderItems = document
        .querySelector(".slider-3d")
        .querySelectorAll(".slider-item");
      const classNames = [];
      let t = null;
      /*
       *初始话
       */
      const init = () => {
        collectClassName();
        sliderAction();
      };
      /*
       *获取className
       */
      const collectClassName = () => {
        for (let item of oSliderItems) {
          classNames.push(item.className);
        }
      };
      /*
       *设置className
       */
      const setClassNames = () => {
        classNames.unshift(classNames.pop());
        render();
      };
      /*
       *重新渲染
       */
      const render = () => {
        for (let i = 0; i < oSliderItems.length; i++) {
          oSliderItems[i].className = classNames[i];
        }
      };
      /*
       *设置运动函数
       */
      const sliderAction = () => {
        t = setInterval(setClassNames, props.duration * 1000);
      };

      init();
    });
  },
};
</script>

<style lang="scss" scoped>
.wrapper-3d-slider {
  .slider-3d {
    position: relative;
    width: 1000px;
    height: 500px;
    margin: 100px auto;
    .slider-item {
      width: 1000px;
      height: 300px;
      position: absolute;
      box-shadow: 10px 20px 10px #666;
      transition: all 0.6s linear;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .slider-item.first {
      width: 600px;
      z-index: 3;
      transform: translate3d(200px, 80px, 0);
    }
    .slider-item.third {
      z-index: 1;
      width: 300px;
      opacity: 0.4;
      transform: translate3d(350px, 50px, 0);
    }
    .slider-item.second {
      z-index: 2;
      width: 400px;
      height: 200px;
      opacity: 0.6;
    }
    .slider-item.second.left {
      transform: translate3d(0, 138px, 0);
    }
    .slider-item.second.right {
      transform: translate3d(600px, 138px, 0);
    }
    // .slider-item:nth-of-type(2) {
    //   background-color: salmon;
    // }
    // .slider-item:nth-of-type(3) {
    //   background-color: yellow;
    // }
    // .slider-item:nth-of-type(4) {
    //   background-color: hotpink;
    // }
  }
}
</style>