<template>
  <div class="box">
    <div
      class="middle"
      @mouseover="mouseOverAndOut('block')"
      @mouseout="mouseOverAndOut('none')"
      @mousemove="move($event)"
    >
      <img :src="src" />
      <div class="shade" />
      <div class="big">
        <img :src="src" />
      </div>
    </div>

    <div class="list-box">
      <div :class="{ 'is-contoller': isShowController }">
        <i
          class="el-icon-arrow-left prev"
          v-if="isShowController"
          @click="moveTo('prev')"
        />
        <ul ref="horizontalRef">
          <li
            v-for="(s, si) in img_list"
            @mouseenter="asd(si)"
            :class="s !== src ? 'a1' : 'a2'"
          >
            <img :src="s" />
          </li>
        </ul>
        <i
          class="el-icon-arrow-right next"
          v-if="isShowController"
          @click="moveTo('next')"
        />
      </div>
    </div>
  </div>
</template>
<script>
import resToken from "@/mixins/resToken";
export default {
  name: "showGoodImg",
  props: ["pList"],
  mixins: [resToken],
  data() {
    return {
      img_list: [],
      src: "",
    };
  },
  computed: {
    isShowController() {
      return this.img_list.length >= 7;
    },
  },
  created() {
    this.img_list = [];
    if (typeof this.pList === "string") {
      this.img_list = (this.pList || "").split(",");
    } else {
      this.img_list = this.pList;
    }

    this.img_list = this.img_list.map(
      (item) => item + "?t=" + this.generateRandomString(20)
    );
    if (this.img_list.length > 0) {
      this.src = this.img_list[0];
    }
  },
  methods: {
    generateRandomString(length) {
      let str = Math.random()
        .toString(36)
        .substring(2, length + 2);
      return str;
    },
    asd(index) {
      this.src = this.img_list[index];
    },
    mouseOverAndOut(val) {
      const box = document.querySelector(".box");
      box.querySelector(".shade").style.display = val;
      box.querySelector(".big").style.display = val;
    },
    moveTo(mode = "prev") {
      const horizontalRef = this.$refs.horizontalRef;
      const cW = horizontalRef.clientWidth;
      const sW = horizontalRef.scrollWidth;
      const sL = horizontalRef.scrollLeft;

      if (mode === "next") {
        // 前进越界
        if (sL + cW >= sW) return;
        const offset = sW - (cW + sL) >= cW ? cW : sW - (cW + sL);
        // horizontalRef.scrollTo({left:sL + offset,  behavior: 'smooth'})
        this.animationToNext(sL, sL + offset);
      }

      if (mode === "prev") {
        // 后退越界
        if (sL <= 0) return;
        const offset = sL - cW >= 0 ? cW : sL;
        // horizontalRef.scrollTo({ left:sL - offset, behavior: 'smooth'})
        this.animationToPrev(sL, sL - offset);
      }
    },

    animationToNext(source, current) {
      const horizontalRef = this.$refs.horizontalRef;
      if (current === source) {
        return;
      }

      window.requestAnimationFrame(() => {
        const cha = current - source > 10 ? 10 : current - source;

        horizontalRef.scrollTo({ left: source + cha });
        this.animationToNext(source + cha, current);
      });
    },
    animationToPrev(source, current) {
      console.log(source, current);
      const horizontalRef = this.$refs.horizontalRef;
      if (current === source) {
        return;
      }

      window.requestAnimationFrame(() => {
        const cha = source - current > 10 ? 10 : source - current;
        horizontalRef.scrollTo({ left: source - cha });
        this.animationToPrev(source - cha, current);
      });
    },
    move(evnt) {
      //小图元素
      const smallElm = document.querySelector(".middle");
      // 大图元素
      const bigElm = document.querySelector(".big");
      // 大图图片元素
      const bigImgElm = document.querySelector(".big>img");
      //遮罩层元素
      const maskElm = document.querySelector(".shade");
      //得到找着相对于小图的偏移量
      const { left, top } = smallElm.getBoundingClientRect();
      let s_left = evnt.pageX - maskElm.offsetWidth / 2 - left;
      let s_top = evnt.pageY - maskElm.offsetHeight / 2 - top;

      //计算遮罩层偏移量的临界值
      let max_left = smallElm.offsetWidth - maskElm.offsetWidth;
      let max_top = smallElm.offsetHeight - maskElm.offsetHeight;

      //遮罩层移动右侧大图移动
      let n = bigElm.offsetWidth / maskElm.offsetWidth;

      // 遮罩跟随鼠标移动前判断：遮罩相对于小图的偏移量不能超出范围，超出范围要重新赋值（临界值在上边已经计算完成：max_left和max_top）
      // 判断水平边界
      if (s_left < 0) {
        s_left = 0;
      } else if (s_left > max_left) {
        s_left = max_left;
      }
      // 判断垂直边界
      if (s_top <= 0) {
        s_top = 0;
      } else if (s_top > max_top) {
        s_top = max_top;
      }
      // 遮罩层的left和top赋值
      maskElm.style.left = s_left + "px";
      maskElm.style.top = s_top + "px";
      // bigImgElm的移动距离
      let horizontal = -n * s_left;
      let vertical = -n * s_top;
      bigImgElm.style.left = horizontal + "px";
      bigImgElm.style.top = vertical + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .middle {
    width: 402px;
    height: 402px;
    border: 1px solid #e8e8e8;
    position: relative;
    float: left;
    margin: 0 0 12px 0;
    box-sizing: border-box;

    & > img {
      display: inline;
      width: 400px;
      height: 400px;
      box-sizing: border-box;
    }

    .shade {
      width: 200px;
      height: 200px;
      background-color: rgba(64, 158, 255, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      cursor: move;
    }

    .big {
      width: 400px;
      height: 400px;
      background: #fff;
      position: absolute;
      left: 105%;
      top: 0;
      z-index: 9999;
      overflow: hidden;
      display: none;
      border: 1px solid #e8e8e8;

      img {
        width: 800px;
        height: 800px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .list-box {
    width: 400px;
    margin: 10px 0 0 0;
    box-sizing: border-box;

    // .is-contoller {
    // padding-left: 15px;
    // padding-right: 15px;
    // }

    div {
      width: 400px;
      display: flex;
      margin-top: 10px;
      position: relative;
      margin-left: 0px;
      justify-content: flex-start;

      .prev,
      .next {
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      ul {
        display: flex;
        overflow: hidden;
        scroll-bahavior: smooth;
        // width: 100%;
        flex: 1;

        li {
          margin: 0 5px 0 0;

          &.a1 {
            border: 2px solid transparent;
          }

          &.a2 {
            border: 2px solid #409eff;
          }

          img {
            float: left;
            width: 50px;
            height: 50px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
