<template>
  <div ref="imgWrap" @mousewheel.prevent="rollImg" class="left">
  <img class="img" ref="img" src="../../../../assets/img/img/riskDistributionPic.svg" alt="" @mousedown="moveImg"
        :style="{transform:'scale('+multiples+')'}">
  </div>
</template>

<script>
  export default {
    name: 'riskDistributionPic',
    data() {
      return {
        multiples: 1,
      };
    },
    created() {
    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      moveImg (e) {
          e.preventDefault()
        // 获取元素
        let imgWrap = this.$refs.imgWrap
        let img = this.$refs.img
        let x = e.pageX - img.offsetLeft
        let y = e.pageY - img.offsetTop
        // 添加鼠标移动事件
        imgWrap.addEventListener('mousemove', move)
        function move (e) {
          img.style.left = e.pageX - x + 'px'
          img.style.top = e.pageY - y + 'px'
        }
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        img.addEventListener('mouseup', () => {
          imgWrap.removeEventListener('mousemove', move)
        })
        // 鼠标离开父级元素，把事件移除
        imgWrap.addEventListener('mouseout', () => {
          imgWrap.removeEventListener('mousemove', move)
        })
      },
      // 滚轮滑动
      rollImg(e) {
        let direction = e.deltaY > 0 ? 'down' : 'up'
        if (direction === 'up') {
          // 滑轮向上滚动
          if (this.multiples >= 99) {
            return;
          }
          this.multiples += 0.25;
        } else {
          // 滑轮向下滚动
          if (this.multiples <= 1) {
            return;
          }
          this.multiples -= 0.25;
        }
      },
      toBIgChange() {
        if (this.multiples >= 2) {
          return;
        }
        this.multiples += 0.25;
      },
      // 缩小
      toSmallChange() {
        if (this.multiples <= 1) {
          return;
        }
        this.multiples -= 0.25;
      },
    },
  };
</script>

<style scoped>
  .left {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #fff;
      padding: 20px;
      float: left;
      overflow: hidden;
  }
  .img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 5px;
      left: 7px;
      .rightulliimg {
        max-width: 100%;
        max-height: 1024px;
      }
      cursor: move;
  }
</style>
