<!--父组件调用时需要写一个按钮和两个方法  一个方法用来显示组件和传图片  另一个方法用来关闭此组件
  具体用法参照 ImageVieweTest.vue
-->
<template>
  <div class="full-img" v-show="show">
    <div class="bor">
      <div class="magnify">
      <!-- 左边产品图片区域 -->
      <div class="left_contaner">
        <div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
          <!-- 产品图片 -->
          <img :src="middleImg" alt="">
          <!-- 阴影盒子 -->
          <div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
        </div>
        <div>
          <!-- 缩略图容器 -->
          <div class="carousel">
            <!-- 缩略图展示盒子 -->
            <div class="show_box">
              <ul class="picture_container" ref="middlePicture">
                <li class="picture_item" @mouseover="tabPicture(item)" v-for="(index , item) in src" :key="index">
                  <img :src="item.url" class="small_ima" alt="">
                </li>
              </ul>
            </div>
          </div>
          <button class="btn_" @click="clone">关闭</button>
        </div>
      </div>
      <!-- 右边放大区域 -->
        <div class="right_contanier" v-show="isBig">
          <img :src="middleImg" ref="bigImg" class="big_img" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    title: '图片查看器',
    props: {
      src: {
        type: Array
      },
      show: {
        type: Boolean,
        default: false,
      },
      middleImgWidth: {
        default: 400,
        type: Number
      }, // 产品图片宽
      middleImgHeight: {
        default: 300,
        type: Number
      }, // 产品图片高
      thumbnailHeight: {
        default: 80,
        type: Number
      }, // 缩略图容器高度
      zoom: {
        default: 2, // 缩略比例,放大比例
        type: Number
      },
      width: {
        default: 80
      },
      height: {
        default: 60
      },
      alt: {
        default: '图片加载失败'
      },
      attach: {
        type: String,
        default: 'name'
      }
    },
    data () {
      return {
        middleImg: '', // 中图图片地址
        bigImg: '', // 大图图片地址
        isShade: false, // 控制阴影显示与否
        isBig: false, // 控制放大图显示与否
        initX: 0, // 初始clientX值
        initY: 0, // 初始clientY值
        leftX: 0, // 初始定位left
        topY: 0, // 初始定位top
        middleLeft: 0, // 当前放置小图盒子的定位left值,
        itemWidth: 80 // 缩略图每张的宽度
      }
    },
    ready () {
      this.$nextTick(() => {
        // 容器的高
        const imgWidth = this.middleImgHeight + this.thumbnailHeight + 120
        // const imgWidth = 400
        // 设置容器宽高
        $('.magnify').css({
          width: this.middleImgWidth,
          height: imgWidth
        })
        // 设置产品图宽高
        $('.middle_img').css({
          width: this.middleImgWidth,
          height: this.middleImgHeight
        })
        // 设置移动阴影图宽高
        $('.middle_img .shade').css({
          width: this.middleImgWidth/this.zoom,
          height: this.middleImgHeight/this.zoom
        })
        // 设置缩略图容器高
        $('.carousel').css({
          height: this.thumbnailHeight
        })
        // 设置每个缩略图宽
        $('.picture_item').css({
          width: this.itemWidth
        })
        // 设置放大后图片容器的宽高,left
        $('.right_contanier').css({
          left: this.middleImgWidth,
          width: imgWidth,
          height: imgWidth
        })
        // 设置放大图片的宽高(图片的放大倍数)
        $('.right_contanier .big_img').css({
          width: imgWidth * this.zoom,
          height: imgWidth * this.zoom
        })
      })
    },
    methods: {
      clone () {
        //tag
        this.$emit('clone_f')
      },
      // 产品图片鼠标移入事件,显示阴影,显示大图
      boxMouseOver (e) {
        //tag
        e.preventDefault();
        e.stopPropagation();
        this.isShade = true
        this.isBig = true
        // 计算阴影的位置
        let x = e.offsetX - $('.shade').width()/2
        let y = e.offsetY - $('.shade').height()/2
        let maxLeft = $('.middle_img').width() - $('.shade').width()
        let maxTop = $('.middle_img').height() - $('.shade').height()
        x = x <= 0 ? 0 : x
        x = x >= maxLeft ? maxLeft : x
        y = y <= 0 ? 0 : y
        y = y >= maxTop ? maxTop : y

        $('.shade').css({
          left: x,
          top: y
        })

      },
      // 鼠标在阴影移动
      shadeMouseMove (e) {
        e.preventDefault();
        e.stopPropagation();
        // //tag[0].offsetParent.clientLeft)
        // //tag[0].offsetParent.offsetLeft)
        // 用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
        var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
        // var x = this.getEventPage(e).pageX - 312;
        // 用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
        // //tag[0].offsetParent.offsetTop)
        var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
        // var y = this.getEventPage(e).pageY - 109 ;

        // 让阴影的坐标居中
        x -= $('.shade').width() / 2;
        y -= $('.shade').height() / 2;

        // 移动边界限制
        let maxLeft = $('.middle_img').width() - $('.shade').width()
        let maxTop = $('.middle_img').height() - $('.shade').height()
        x = x <= 0 ? 0 : x
        x = x >= maxLeft ? maxLeft : x
        y = y <= 0 ? 0 : y
        y = y >= maxTop ? maxTop : y
        // 重新赋值当前的定位值
        $('.shade').css({
          left: x,
          top: y
        })
        // 计算出实时的大图的定位,首先计算出比例
        // 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
        const xRate = $('.big_img').width() / $('.middle_img').width()
        const yRate = $('.big_img').height() / $('.middle_img').height()
        $('.big_img').css({
          left: -x*xRate,
          top: -y*yRate
        })
        // //tag
      },
      // 鼠标移入阴影,去除自定义事件
      shadeMouseOver (e) {
        e.preventDefault();
        e.stopPropagation();
        // //tag
      },
      // 图片移出隐藏阴影和大图
      boxMouseLeave (e) {
        this.isShade = false
        this.isBig = false
      },
      // 切换图片
      tabPicture (item) {
        this.middleImg = item.url
      },
      /**
       * 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
       * @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
       */
      getPageScroll() {
        return {
          scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
          scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
        }
      },
      /**
       * 获取事件对象点击的点，相对于文档左上角的坐标
       * @param e
       * @returns {{pageX: *, pageY: *}}
       */
      getEventPage(e) {
        return {
          pageX: e.clientX + this.getPageScroll().scrollLeft,
          pageY: e.clientY + this.getPageScroll().scrollTop
        }
      }
    },
    // 监听图片查看器是否打开 给产品图设默认值
    watch: {
      'show'(val) {
        if (val) {
          this.middleImg = this.src[0].url
        }
      }
    }
  }
</script>

<style scoped>
  .full-img {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(0,0,0,0.6);
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .bor {
    /*border: 2px solid #18D797;*/
    width: 904px;
    height: 504px;
  }
  .magnify {
    position: relative;
  }
  .small_ima {
    width: 80px;
    height: 80px;
    display: inline-block;
  }
  .left_contaner {
    width: 100%;
    height: 100%;
  }
  .left_contaner .middle_img {
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
  }
  .left_contaner .shade {
    background-color: rgba(    135,206,235, .5);
    position: absolute;
    top: 0;
    left: 0;　cursor: move;}
  .left_contaner .middle_img img {
    width: 100%;
    height: 100%;
  }
  .left_contaner .carousel {
    width: 100%;
    margin-top: 20px;
    display: -webkit-flex;
  }
  .left_contaner .carousel .show_box {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  .left_contaner .carousel .arrow {
    flex-basis: 25px;
    cursor: pointer;
  }
  .left_contaner .carousel .picture_container {
    position: absolute;
    overflow: hidden;
    top: 0;
  }
  .left_contaner .picture_container .picture_item {
    height: 100%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
  }
  .left_contaner .picture_container .picture_item:hover {
    border: 2px solid #f2019f;
  }
  .right_contanier {
    overflow: hidden;
    position: absolute;
    top: 0;
    border: 1px solid #ccc;
  }
  .right_contanier .big_img {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .btn_ {
    background-color: #6aa6e2;
    position: absolute;
    bottom: 11px;
    left: 13px;
    width: 55px;
    height: 35px;
    border-radius: 5px;
    border: none;
  }

</style>
