<template>
  <div class="list-scroll">
    <div class="left-btn" @click="scrollPrev" v-if="scrollable">
      <Icon type="ios-arrow-back"></Icon>
    </div>
    <div class="content" ref="navScroll">
      <div class="content-nav" ref="nav" :style="navStyle">
        <slot></slot>
      </div>
    </div>
    <div class="right-btn" @click="scrollNext" v-if="scrollable">
      <Icon type="ios-arrow-forward"></Icon>
    </div>
  </div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
  name: 'ScrollBox',
  data () {
    return {
      navStyle: {
        transform: ''
      },
      scrollable: false
    }
  },
  methods: {
    scrollPrev () {
      const containerWidth = this.$refs.navScroll.offsetWidth
      const currentOffset = this.getCurrentScrollOffset()
      if (!currentOffset) return

      const newOffset = currentOffset > containerWidth
        ? currentOffset - containerWidth
        : 0

      this.setOffset(newOffset)
    },
    scrollNext () {
      const navWidth = this.$refs.nav.offsetWidth
      const containerWidth = this.$refs.navScroll.offsetWidth
      const currentOffset = this.getCurrentScrollOffset()
      if (navWidth - currentOffset <= containerWidth) return
      const newOffset = navWidth - currentOffset > containerWidth * 2
        ? currentOffset + containerWidth
        : (navWidth - containerWidth)

      this.setOffset(newOffset)
    },
    getCurrentScrollOffset () {
      const {navStyle} = this
      return navStyle.transform
        ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
        : 0
    },
    setOffset (value) {
      this.navStyle.transform = `translateX(-${value}px)`
    },
    handleResize () {
      const navWidth = this.$refs.nav.offsetWidth
      const containerWidth = this.$refs.navScroll.offsetWidth
      const currentOffset = this.getCurrentScrollOffset()
      if (containerWidth < navWidth) {
        if (navWidth - currentOffset < containerWidth) {
          this.setOffset(navWidth - containerWidth)
        }
      }
      this.scrollable = containerWidth < navWidth
      // 如果resize后不需要显示箭头，则滚动回开始位置
      if (!this.scrollable) {
        this.setOffset(0)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.observer = elementResizeDetectorMaker()
      this.observer.listenTo(this.$refs.nav, this.handleResize)
    })
  }
}
</script>
<style scoped lang="less">
.list-scroll {
  position: relative;
  display: flex;
  .content {
    overflow: hidden;
    width: calc(~"100% - 40px");
    .content-nav {
      float: left;
      transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    }
  }
  .left-btn, .right-btn {
    display: inline-block;
    line-height: 32px;
    cursor: pointer;
    z-index: 999;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 30px;
    font-size: 20px;
  }
  .left-btn {
    left: 0;
  }
  .right-btn {
    right: 0;
  }
  .left-btn:active, .right-btn:active {
    color: #999;
  }
}
</style>
