<template>
  <div class="paper-scale">
    <div ref="scale" class="scale">
      <div ref="content" class="content" :style="scaleFun">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 打印文书翻页器
 * 组件方法：
 *  prev() 上一页
 *  next() 下一页
 *  goto(index) 转往指定页
 *  getPaperElement(index) 获取当前页的页面元素，不传index时获取当前页
 *  getIndex() 获取当前页索引
 * @author lroyia
 * @since 2021年3月14日 16:43:19
 */
export default {
  props: {
    scale: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      containerWidth: 0,
      currentIndex: 0,
      length: 0,
      intervalId: '',
      over: false,
      value: 1
    }
  },
  computed: {
    scaleFun() {
      return `transform:scale(${this.value})`
    }
  },
  watch: {
    scale() {
      this.value = this.scale
    }
  },
  mounted() {
    this.value = this.scale
  },
  methods: {
    // 设置缩放
    setScale(scale) {
      this.value = parseFloat(scale)
    },
    // 放大一点
    scaleUp() {
      this.value += 0.1
    },
    // 缩小一点
    scaleDown() {
      if (this.value < 0.2) return
      this.value -= 0.1
    },
    // 获取内容
    getContent() {
      return this.$refs.content.children
    }
    // mouseScoll(e) {
    //   if (!this.over) return
    //   const direction = e.deltaY > 0 ? 'down' : 'up'
    //   this.$refs.content
    //   if (direction === 'down') {
    //   } else {

    //   }
    // }
  }
}
</script>

<style lang="scss">
.paper-scale {
  background-color: #e6e6e6;
  text-align: center;
  border: 1px solid #eee;
  min-height: 300px;
  overflow: hidden;
  .scale {
    padding: 10px;
    overflow-x: hidden;
    white-space: nowrap;
  }
  // 内容布局样式
  .content {
    text-align: center;
    padding: 10px;
    float: left;
    transition: all .3s;
    width: 100%;
  }
}
</style>
