<template>
  <div class="n-slide-navigation">
    <div v-if="hasLine" class="n-slide-navigation-dot" :style="{top: active * 24 + 8 + 'px'}"></div>
    <template v-for="(data, index) in dataList">
      <div class="n-slide-navigation-item" :key="index" :class="{active: active === index, hover: hover === index}"
           @click="onClick(index)" @mouseenter="onMouseEnter(index)" @mouseleave="onMouseLeave(index)">
        <span v-if="hasLine" class="line"></span>
        <span v-if="hasText" class="text">{{index + 1}}. {{data.title}}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'n-slide-navs',
  props: {
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    active: {
      type: Number,
      default: 0
    },
    hover: {
      type: Number,
      default: -1
    },
    hasText: {
      type: Boolean,
      default: false
    },
    hasLine: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  methods: {
    onClick (index) {
      this.$emit('click', index)
    },
    onMouseEnter (index) {
      if (this.hover !== index) {
        this.$emit('update:hover', index)
      }
    },
    onMouseLeave (index) {
      if (this.hover === index) {
        this.$emit('update:hover', -1)
      }
    }
  }
}
</script>
