<template>
  <div class="paper-swiper">
    <div ref="swiper" class="swiper">
      <div class="controller">
        <div class="left" title="上一个" @click="prev"><i class="el-icon-arrow-left" /></div>
        <div class="page-box">{{ length > 0 ? (currentIndex + 1 + '/' + length): '-' }}</div>
        <div class="right" title="下一个" @click="next"><i class="el-icon-arrow-right" /></div>
      </div>
      <div ref="content" class="content">
        <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 {
  data() {
    return {
      containerWidth: 0,
      currentIndex: 0,
      length: 0,
      intervalId: ''
    }
  },
  mounted() {
    // 初始化窗口
    this.resize()

    // 监听
    this.length = this.$refs.content.children.length
    this.intervalId = setInterval(() => {
      // 监听窗体大小变化
      const width = this.$refs.swiper.offsetWidth
      if (width != this.containerWidth) {
        this.resize()
        this.goto(this.currentIndex)
      }
      // 监听内容修改
      const length = this.$refs.content.children.length
      if (length == this.length) return
      this.length = length
      if (length != 0) {
        this.resize()
        if (this.currentIndex >= length) {
          this.goto(length - 1)
          this.currentIndex = length - 1
        }
        this.goto(this.currentIndex)
      } else {
        this.currentIndex = -1
      }
    }, 100)
  },
  destroyed() {
    clearInterval(this.intervalId)
  },
  methods: {
    /**
         * 上一页
         */
    prev() {
      this.goto(this.currentIndex - 1)
    },
    /**
         * 下一页
         */
    next() {
      this.goto(this.currentIndex + 1)
    },
    /**
         * 前往指定页
         */
    goto(index) {
      if (typeof index !== 'number') throw new Error('跳转页数参数与错误')
      index = parseInt(index)
      if (index < 0 || index > this.$refs.content.children.length - 1) return
      this.currentIndex = index
      // let marginLeft = 0
      // for(let i = 0; i < this.currentIndex; i++){
      //     let paper = this.$refs.content.children[i]
      //     let left = paper.style.marginLeft.replace('-', '').replace('px', '')
      //     left = left.length == 0 ? 0 : parseInt(left)
      //     marginLeft += (paper.offsetWidth + left)
      // }
      this.$refs.content.style.marginLeft = '-' + this.containerWidth * this.currentIndex + 'px'
    },
    /**
         * 获取指定索引下的paper页面元素
         * 不传时获取当前页
         */
    getPaperElement(index) {
      if (index === undefined) index = this.currentIndex
      return this.$refs.content.children[index]
    },
    /**
         * 获取当前索引
         */
    getIndex() {
      return this.currentIndex
    },
    /**
         * 重置大小
         */
    resize() {
      const swiper = this.$refs.swiper
      this.containerWidth = swiper.offsetWidth
      let offset = 0
      for (let i = 0; i < this.$refs.content.children.length; i++) {
        const paperWidth = this.$refs.content.children[i].offsetWidth
        const left = (this.containerWidth - paperWidth) / 2
        const eachPaper = this.$refs.content.children[i]
        eachPaper.style.left = (left > 0 ? left + offset : 0) + 'px'
        // 记录引发位移
        offset += 2 * left
      }
      this.$refs.content.style.width = swiper.offsetWidth * this.$refs.content.children.length + 'px'
    }
  }
}
</script>

<style lang="scss">
.paper-swiper{
    background-color:#e6e6e6;
    text-align:center;
    border:1PX solid #eee;
    min-height:800PX;
    overflow: hidden;
    .swiper{
        padding-top: 10px;
        overflow-x: hidden;
        white-space:nowrap;
    }
    // 翻页控制器样式
    .controller{
        letter-spacing: 0;
    }
    .controller:before,.controller:after.content:before,.content:after{
        content: '';
        display: block;
        clear: both;
        overflow: hidden;
        height: 0;
    }
    .controller>div.left,.controller>div.right{
        width: calc(49% - 100px);
        cursor: pointer;
        // letter-spacing: 0;
        color:white;
        background-color: #409EFF;// 要改
    }
    .controller>div.left:active,.controller>div.right:active{
        opacity: .8;;
    }
    .controller>div{
        box-shadow: 0 0 5px $color-primary-border;
        border:1px solid $color-primary-border;
        line-height: 50px;
        float: left;
        border-radius: 5px;
        margin-left:calc(((100% - 2*(49% - 100px) - 200px)) / 4);
    }
    // 分页信息展示样式
    .page-box{
        text-align: center;
        width:200px;
        background-color: white;
    }
    // 内容布局样式
    .content{
        padding:10px 0;
        float:left;
        transition: margin 1s;
        width:100%;
        text-align: left;
    }
}
</style>
