<template>
  <div class="n-slide-navs-small" @mouseenter="visible = true" @mouseleave="visible = false">
    <div class="n-slide-navs-line" ref="line" @scroll="onScroll">
      <n-slide-navigation has-line :data-list="dataList" :active="active" :hover.sync="hover" @click="onClick"></n-slide-navigation>
    </div>
    <transition name="slide-navs">
      <div v-show="visible" class="n-slide-navs-text" ref="text" v-mousewheel="() => $refs.line">
        <n-slide-navigation has-text :data-list="dataList" :active="active" :hover.sync="hover" @click="onClick"></n-slide-navigation>
      </div>
    </transition>
  </div>
</template>

<script>
import NSlideNavigation from './slide-navigation'
import mousewheel from '@uif/next/lib/directives/mousewheel'

export default {
  name: 'n-slide-navigation-small',
  directives: {
    mousewheel
  },
  components: {
    NSlideNavigation
  },
  props: {
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    active: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      visible: false,
      hover: -1
    }
  },
  methods: {
    onClick (index) {
      this.$emit('click', index)
    },
    onScroll (event) {
      this.$refs.text.scrollTop = event.target.scrollTop
    },
    onMousewheel (event, data) {
      if (Math.abs(data.spinY) > 0) {
        const bodyScroll = this.$refs.line
        if (data.pixelY < 0 && bodyScroll.scrollTop !== 0) {
          event.preventDefault()
        }
        if (data.pixelY > 0 && bodyScroll.scrollHeight - bodyScroll.clientHeight > bodyScroll.scrollTop) {
          event.preventDefault()
        }
        bodyScroll.scrollTop += Math.ceil(data.pixelY / 5)
      }
    }
  }
}
</script>
