<template>
  <div class="scorll">
    <!-- 缩放按钮 -->
    <div class="resizeBox">
      <p >当前宽度:{{ imageWidth }}px</p>
      <i class="el-icon-zoom-out" @click="resizeImage(-1)"></i>
      <i class="el-icon-zoom-in" @click="resizeImage(1)"></i>
    </div>
    <!-- 拖拽移动 -->
    <div class="abutton">
      <div ref="firstDom" v-move class="mode">
        <!-- 点击区域 -->
        <div class="pfdDivBox">
          <!-- 底图 -->
          <img src="../../../assets/pfdImg/indexImg/JLQ.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">

        </div>
      </div>
    </div>
  </div>

</template>

<script>
let dragging = false;
let dragData = {
  left:"",
  top: "",
};
import throttle from "@/utils/throttle";
export default {
    data() {
        return {
            // 缩放比例
            scaleNum: 200,
            // 底图初始化宽度
            imageWidth:1200,

        };
    },
    mounted () {

    },
    computed: {
      imageStyle() {
        return {
          width: `${this.imageWidth}px`, // 动态设置图片宽度
        };
      },

    },
    components: {},
    //在vue自定义指令中添加该指令
    directives: {
      move(el) {

        setTimeout(() => {
          // 图片缩小时图片位置问题
          let imgHeight = el.children[0].children[0].offsetHeight;
          if(imgHeight < -dragData.top *1.5){ // 当位置小于图片高度时，表示图片被缩放到了屏幕外
            el.style.top = "20%";
            el.style.left = "50%";
          }
          console.log("666",el);
        }, 500);

        // 防止放大缩小时图片位置问题
        if(dragData.left != "" || dragData.top != ""){
          el.style.left =  dragData.left + "px";
          el.style.top =  dragData.top + "px";
        }else{
          el.style.left =  "50%";
          el.style.top =  "90px";
        }
        //鼠标拖拽功能
        el.onmousedown = function (e) {
          // 阻止点击事件冒泡
          e.preventDefault();
          //获取鼠标点击处分别与div左边和div上边的距离：鼠标位置-div位置
          let startX = e.clientX - el.offsetLeft,
            startY = e.clientY - el.offsetTop;
          throttle(
            (document.onmousemove = function (ev) {
              dragging = false;
              // 阻止点击事件冒泡
              ev.preventDefault();
              let event = ev || window.event;
              let moveX = event.clientX - startX,
                moveY = event.clientY - startY;
              // el.style.left = moveX + "px";
              // el.style.top = moveY + "px";
              if(dragData.left != "" || dragData.top != ""){
                  el.style.left =  dragData.left + "px";
                  el.style.top =  dragData.top + "px";
                }else{
                  el.style.left = moveX + "px";
                  el.style.top = moveY + "px";
                }
                dragData.left = moveX;
                dragData.top = moveY;
            }),
            500
          );

          // 鼠标弹起时不再移动
          document.onmouseup = function () {
            dragging = true;
            document.onmousemove = null;
          };
          console.log(dragData)
          // 解决放大缩小时图片位置问题
          if(dragData.left != "" || dragData.top != ""){
            el.style.left = dragData.left + "px";
            el.style.top =  dragData.top + "px";
          }
        };
      },
    },
    created() {
      this.$nextTick(() => {
        // 初始化
        console.log(this.$route.query.id)

      });
    },
    methods: {
      // 图片缩放函数
      resizeImage(type){

        if(type === -1){ //缩小
          // 底图宽度
          this.imageWidth -= this.scaleNum;

        }else if(type === 1){ //放大
           // 底图宽度
          this.imageWidth += this.scaleNum;

        }
      },

    },

};
</script>

<style scoped>
body{
    background-image: linear-gradient(to bottom, #ffffff, #d8deea) !important;

}
.scorll{
    width: 100%;
    height: 100%;
}
.pfdDivBox {
    width: 100%;
    height: 100%;
    position: relative;
    /* overflow: scroll; */
    cursor: move;
    margin-top: -77px;

}
.indexImg{
  width: 100%;
  height: 100%;
}

/* 放大缩小按钮 */
.resizeBox{
  position: fixed;
  bottom: 4%;
  right: 3%;
  z-index: 999;
  font-size: 35px;
}
.resizeBox p{
  margin: 0;
  font-size: 12px;
  color: #409eff;
  opacity: 0.4;
}

.resizeBox .el-icon-zoom-out,
.resizeBox .el-icon-zoom-in{
  cursor: pointer;
  color: #409eff;
}

/* 拖拽 */
.mode{
  position: absolute;
  left: "calc(100% - 1300px)";
  bottom: "calc(100% - 500px)";
  z-index: 99;
  transform: translate(-50%, 0);
}


</style>



