<template>

  <el-form-grid size="xs">
    <el-select v-model="value" size="small" @change="handleYearSelectChange" class="el-calendar__year-select">
      <el-option
        v-for="(year, index) in yearList"
        :label="year"
        :key="index"
        :value="year">
      </el-option>
    </el-select>
  </el-form-grid>
</template>

<script type="text/babel">
  import { hasClass } from 'nui-v2/src/utils/dom';
  import ElFormGrid from '../../../form-grid/src/form-grid';

  export default {
    components: {ElFormGrid},
    data() {
      return {
      };
    },
    props: {
      disabledDate: {},
      date: {},
      year: {}
    },
    computed: {
      value: {
        get() {
          return this.year;
        },
        set(value) {
          this.$emit('input', value);
        }
      },
      startYear() {
        return Math.floor(this.year / 10) * 10;
      },
      yearList() {
        let arr = [];
        for (let i = 0; i < 30; i++) {
          arr.push(this.startYear + i);
        }
        return arr;
      }
    },
    methods: {
      handleYearSelectChange(year) {
        this.$emit('input', year);
        this.$emit('change', year);
      },
      getCellStyle(year) {
        const style = {};
        const date = new Date(this.date);

        date.setFullYear(year);
        style.disabled = typeof this.disabledDate === 'function' &&
          this.disabledDate(date);
        style.current = Number(this.year) === year;

        return style;
      },

      nextTenYear() {
        this.$emit('pick', Number(this.year) + 10, false);
      },

      prevTenYear() {
        this.$emit('pick', Number(this.year) - 10, false);
      },

      handleYearTableClick(event) {
        const target = event.target;
        if (target.tagName === 'A') {
          if (hasClass(target.parentNode, 'disabled')) return;
          const year = target.textContent || target.innerText;
          this.$emit('pick', year);
        }
      }
    }
  };
</script>
