<template>
  <div class="columns is-mobile is-multiline mx-0">
    <span 
      v-for="(v,i) in years"
      class="column is-4 has-text-centered is-clickable fs-14" 
      :class="i===0 || i===11 ? 'has-text-grey-light' : ''" 
      @click="$emit('year', v)">{{ v }}</span>
  </div>
</template>
<script>
export default {
  props: ['year', 'month', 'action'],
  data() {
    return {
      years: []
    }
  },
  created() {
    this.years = [this.year]
      for(let i = 1; i < 7; i++) {
        this.years.push(this.year+i)
        this.years.push(this.year-i)
      }
      this.years.sort(function(a, b) {return a - b;})
      this.years = this.years.slice(0,12)
      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
  },
  watch: {
    action: function(newVal) {
      if(newVal.name==='next') this.next()
      if(newVal.name==='previous') this.previous()
    }
  },
  methods: {
    next() {
      let year = this.years[this.years.length-1]
      this.years = []
      for(let i = 0; i < 12; i++) {
        this.years.push(year+i)
      }
      this.years.sort(function(a, b) {return a - b;})
      this.years = this.years.slice(0,12)
      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
    },
    previous() {
      let year = this.years[0]
      this.years = []
      for(let i = 0; i < 12; i++) {
        this.years.push(year-i)
      }
      this.years.sort(function(a, b) {return a - b;})
      this.years = this.years.slice(0,12)
      this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
    }
  }
}
</script>
