<template>
  <div>
    <li id="fukui" class="items-list" @mousemove="setActiveClass($event)" @mouseleave="resetActive()">
      <router-link to="/destinations/gaula" class="link-items" :title="boxTitle">
        <ol class="items-list-wrap">
          <li class="items-wrap " v-for="(img, index) in localImgArray" :class="{active:
          isItemActive(index), inactive: !isItemActive(index)}">
            <img :src="img.path"/>
          </li>
          <li class="items-cover"><img src="/images/destinations/gaula/image-box/thumb_cover.png" alt=""></li>
        </ol>
        <div class="link-items-ttl">
          <h2><span class="vol">vol.{{ boxNumber }}</span><br><span class="location">{{ boxTitle }}</span></h2>
          <hr>
        </div>
      </router-link>
    </li>
  </div>
</template>

<script>
  export default {
    props: {
      imgArray: {
        type: Array,
        default: function () { return [] }
      },
      boxTitle: String,
      boxNumber: Number
    } ,
    data() {
      return {
        localImgArray: this.imgArray,
        activeItem: 0 // Hold styr på den aktive item
      }
    },
    name: 'image-box',
    methods: {
      setActiveClass(event) {
        var b, c, d, e, f, columnWidth, thumbnailId;
        b = $(event.currentTarget),
          c = this.localImgArray.length,
          d = b.offset(),
          columnWidth = b.width(),
          e = columnWidth / c,
          thumbnailId = Math.floor((event.clientX - d.left) / e)
          this.activeItem = thumbnailId < 0 ? 0 : thumbnailId // Set den aktive item til at være det index som musen 'peger' på
      },
      resetActive() {
        this.activeItem = 0 // Item 0 er aktiv ved mouse out
      },
      isItemActive(index){
        return index == this.activeItem // Er dette den aktive item? alle andre er inaktive
      }
    }
  }
</script>