<template>

  <div class="itf-slider">
    <flicking ref="slider" :options="{ align: 'prev' }">
      <slot />
    </flicking>
  </div>

</template>
<style lang="scss" scoped>
@import '~@egjs/vue-flicking/dist/flicking.css';
</style>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Flicking } from '@egjs/vue-flicking';

export default
@Component({
  name: 'itfSlider',
  components: {
    Flicking
  }
})
class itfSlider extends Vue {
  @Prop() value;

  mounted() {
    this.$refs.slider.disableInput();
  }

  async prev() {
    try {
      if (this.$refs.slider.index === 0) {
        await this.$refs.slider.moveTo(this.$refs.slider.panels.length - 1);
        return;
      }
      await this.$refs.slider.prev();
    } catch (e) {
      // ignore FlickingError: Animation is already playing.
    }
  }

  async next() {
    try {
      if (this.$refs.slider.index + 1 > this.$refs.slider.panels.length - 1) {
        await this.$refs.slider.moveTo(0);
        return;
      }
      await this.$refs.slider.next();
    } catch (e) {
      // ignore FlickingError: Animation is already playing.
    }
  }

  async moveTo(index) {
    try {
      await this.$refs.slider.moveTo(index);
    } catch (e) {
      // ignore FlickingError: Animation is already playing.
    }
  }
}
</script>
