<!-- 放大缩小 -->
<template>
  <div id="zoom">
    <i @click="sacle(1)" class="el-icon-zoom-in btn"></i>
    <span>{{ sliderValPercent }}</span>
    <i @click="sacle(0)" class="el-icon-zoom-out btn"></i>
  </div>
</template>
<script>
import bus from "@/bus/bus";
export default {
  props: ["scale"],
  data() {
    return {
      min: 0.1,
      max: 5,
      initScale: 1, //初始 底图缩放比例
      sliderVal: 1, // 缩放比例
    };
  },
  computed: {
    sliderValPercent() {
      return `${(this.sliderVal * 100).toFixed(0)}%`;
    },
  },
  methods: {
    sacle(data) {
      const oldV = this.sliderVal;
      if (data) {
        this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
        if (this.sliderVal > this.maxScale) {
          this.sliderVal = this.maxScale;
        }
        bus.$emit("scale", this.sliderVal, oldV);
      } else {
        this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
        if (this.sliderVal < this.min) {
          this.sliderVal = this.min;
        }
        bus.$emit("scale", this.sliderVal, oldV);
      }
    },
    /**
     * @name getMouseScale
     * @description 滚轮滚动，导致的底图缩放比例 逻辑处理
     */
    getMouseScale() {
      //  zoom 为缩放后改变的比例
      bus.$off("mouseScale");
      bus.$on("mouseScale", (zoom) => {
        const s = Number((zoom * this.initScale).toFixed(2));
        this.sliderVal = s > 0.1 ? s : 0.1;
      });
    },
  },
  mounted() {
    this.getMouseScale();
  },
};
</script>
<style lang="less">
#zoom {
  color: #646a73;
  .btn {
    cursor: pointer;
    font: 18px;
  }
}
</style>