<template>
  <div class="magnify">
    <div class="left_contaner">
      <div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
        <img :src="middleImg" alt="" style="width:100%">
        <div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
      </div>
      <div class="carousel">
        <div class="left_arrow arrow" @click="leftArrowClick">

            <img src="../assets/image/userleft.jpg" alt="">
        </div>

        <div class="show_box">
          <ul class="picture_container" ref="middlePicture">
            <li class="picture_item" @click="tabPicture(item,index)" v-for="(item, index) in pictureList" :key="index">
              <img :src="item.url" class="small_img" alt="">
            </li>
          </ul>
        </div>
        <div class="right_arrow arrow" @click="rightArrowClick">

          <img src="../assets/image/userright.png" alt="">
        </div>
      </div>
    </div>
    <div class="right_contanier" v-show="isBig">
      <img :src="middleImg" ref="bigImg" class="big_img" alt="">
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  props:['parentmsg'],
  props: {

    tableLabelTest:Array,
    middleImgWidth: {
      default: 350,
      type: Number
    }, // 产品图片宽
    middleImgHeight: {
      default: 282,
      type: Number
    }, // 产品图片高
    thumbnailHeight: {
      default: 100,
      type: Number
    }, // 缩略图容器高度
    imgList: Array, // 图片数据
    zoom: {
      default: 2, // 缩略比例,放大比例
      type: Number
    },
 
  
    
  },
  data() {
    return {
      tableLabelTest1:this.tableLabelTest,
      pictureList: [
        {url: require("../assets/four.png")},
        {url: require("../assets/cat.png")},
          {url: require("../assets/one.png")},
         {url: require("../assets/six.png")},
            {url: require("../assets/six.png")},
               {url: require("../assets/six.png")},
      ],
      menu:[],
      middleImg: '', // 中图图片地址
      bigImg: '', // 大图图片地址
      isShade: false, // 控制阴影显示与否
      isBig: false, // 控制放大图显示与否
      initX: 0, // 初始clientX值
      initY: 0, // 初始clientY值
      leftX: 0, // 初始定位left
      topY: 0, // 初始定位top
      middleLeft: 0, // 当前放置小图盒子的定位left值,
      itemWidth: 80, // 缩略图每张的宽度
    }
  },
  watch:{
 data:'ifadroind',// 值可以为methods的方法名

  inputName: function(newValue) {
      this.pictureList=newValue;
      this.menu=newValue;
      console.log(this.newValue);
                }
  },
  created() {
 
    if (this.imgList && this.imgList.length) {
      this.pictureList = this.imgList
    }
    this.middleImg = this.pictureList[0].url
    // 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
    // this.itemWidth = (this.middleImgWidth-30) / 2
  },

  mounted() {
    console.log(this.parentmsg)

this.ifadroind();
    this.$nextTick(() => {
   console.log(this.menu);
      // 容器的高
      const imgWidth = this.middleImgHeight + this.thumbnailHeight + 20
      // 设置容器宽高
      // $('.magnify').css({
      //   width: this.middleImgWidth,
      //   height: imgWidth
      // })
  
      // 设置移动阴影图宽高
      $('.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: {
            //判断是手机打开还是电脑打开
       ifadroind(){
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
 
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
                 // 设置产品图宽高
      $('.middle_img').css({
        width: this.middleImgWidth,
        height: this.middleImgHeight
      })
      
    }else{
    
}
  },
    // 产品图片鼠标移入事件,显示阴影,显示大图
    boxMouseOver (e) {
      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();

      //用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
      var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
      //用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
      var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;

      //让阴影的坐标居中
      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
      })
      // console.log(e, x, y, xRate, yRate, 66677)
    },
    // 鼠标移入阴影,去除自定义事件
    shadeMouseOver (e) {
      e.preventDefault();
      e.stopPropagation();
      // console.log(88888, e)
    },
    // 图片移出隐藏阴影和大图
    boxMouseLeave () {
      this.isShade = false
      this.isBig = false
    },
    // 切换图片
    tabPicture (item,index) {
      this.middleImg = item.url
      this.$emit('changeName',item)
      console.log(item,index)
    },
    // 点击左边箭头
    leftArrowClick () {
      if (this.middleLeft < 0) {
        // 每次向右平移一个图片盒子的宽度
        this.middleLeft += this.itemWidth
        $('.picture_container').animate({
          left: this.middleLeft
        }, 500)
      }
    },
    // 点击右边箭头
    rightArrowClick () {
      // 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-4)*每张缩略图的宽度
      if (this.middleLeft > -this.itemWidth*(this.pictureList.length-4)) {
        this.middleLeft -= this.itemWidth
        $('.picture_container').animate({
          left: this.middleLeft
        }, 500)
      }
    },
    /**
     * 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
     * @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
      }
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and(min-width: 320px) and(max-width:768px) {
.magnify {
  position: relative;
  width: 100%;
}
.left_contaner {
  width: 100%;
  height: 100%;
}
.left_contaner .middle_img {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}
.left_contaner .shade {
  background-color: rgba(	135,206,235, .5);
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  display: none;
}
.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 .left_arrow {
  display: flex;
  align-items: center;
  img{
    width: 0.16rem;
    height: 0.24rem;
  }

  // background: url('../assets/image/userleft.jpg') no-repeat;
  // background-position: center center;
}
.left_contaner .carousel .right_arrow {
  // background: url('../assets/image/userright.png') no-repeat;
  // background-position: center right;
  // width: 8px;
  // height: 16px;
    display: flex;
  align-items: center;
   img{
    width: 0.16rem;
    height: 0.24rem;
    display: block;
    margin-left: 0.06rem;
  }
}
.left_contaner .carousel .picture_container {
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
}
.left_contaner .picture_container .picture_item {
  height: 100%;
  float: left;
  width: 60px;
  height: 60px;
  border: 1px solid #d8d8d8 ;
  margin-left: 5px;
  box-sizing: border-box;
}
.left_contaner .picture_container .picture_item:hover {
  border: 2px solid #E2001A;
}
.left_contaner .picture_container .picture_item img {

  width: 100%;
  height: 100%;
}
.right_contanier {
  overflow: hidden;
  position: absolute;
  top: 0;
  border: 1px solid #ccc;
  display: none;
}
.right_contanier .big_img {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}


}
// //    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
.magnify {
  position: relative;
}
.left_contaner {
  width: 100%;
  height: 100%;
}
.left_contaner .middle_img {
  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 .left_arrow {
  background: url('../assets/image/rc-left.png') no-repeat;
  background-position: center center;
}
.left_contaner .carousel .right_arrow {
  background: url('../assets/image/rc-left.png') no-repeat;
  background-position: center right;
}
.left_contaner .carousel .picture_container {
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 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 #E2001A;
}
.left_contaner .picture_container .picture_item img {
  width: 100%;
  height: 100%;
}
.right_contanier {
  overflow: hidden;
  position: absolute;
  top: 0;
  border: 1px solid #ccc;
}
.right_contanier .big_img {
  position: absolute;
  top: 0px;
  left: 0px;
}


}

</style>
