<template>
  <div class="el-calendar__month-tab"  v-model="value" @change="handleMonthTabChange">
    <span :style="{width: 100 / 12 + '%'}" class="tab-item"  v-for="(month, index) in monthList" :key="index" v-text="month" :class="{'is-active': value === index}" @click="handleClick(index, month)"></span>
  </div>
</template>
<script type="text/babel">
  import Locale from 'nui-v2/src/mixins/locale';
  import { hasClass } from 'nui-v2/src/utils/dom';
  import ElFormGrid from '../../../form-grid/src/form-grid';

  export default {
    components: {ElFormGrid},
    data() {
      return {
        monthList: [this.t('el.datepicker.months.jan'),
          this.t('el.datepicker.months.feb'),
          this.t('el.datepicker.months.mar'),
          this.t('el.datepicker.months.apr'),
          this.t('el.datepicker.months.may'),
          this.t('el.datepicker.months.jun'),
          this.t('el.datepicker.months.jul'),
          this.t('el.datepicker.months.aug'),
          this.t('el.datepicker.months.sep'),
          this.t('el.datepicker.months.oct'),
          this.t('el.datepicker.months.nov'),
          this.t('el.datepicker.months.dec')]
      };
    },
    props: {
      disabledDate: {},
      date: {},
      month: {
        type: Number
      }
    },
    computed: {
      value: {
        get() {
          return this.month;
        },
        set(value) {
          this.$emit('input', value);
        }
      }
    },
    watch: {
    },
    mixins: [Locale],
    methods: {
      handleMonthTabChange(month) {
        this.$emit('change', month);
      },
      handleClick(index, month) {
        this.value = index;
        this.$emit('month-tab-click', index);
      },
      handleMonthTableClick(event) {
        const target = event.target;
        if (target.tagName !== 'A') return;
        if (hasClass(target.parentNode, 'disabled')) return;
        const column = target.parentNode.cellIndex;
        const row = target.parentNode.parentNode.rowIndex;
        const month = row * 4 + column;

        this.$emit('pick', month);
      }
    },
    mounted() {
    }
  };
</script>
