<template>
  <el-form-grid size="xs">
    <el-select v-model="value" size="small" @change="handleMonthSelectChange" class="el-calendar__month-select">
      <el-option
        v-for="(month, index) in monthList"
        :label="month"
        :key="index"
        :value="index">
      </el-option>
    </el-select>
  </el-form-grid>
</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: {
      handleMonthSelectChange(month) {
        this.$emit('change', month);
      },

      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>
