<template>
  <table @click="handleQuqrterlyTableClick" class="el-month-table el-quarterly-table">
    <tbody>
    <tr>
      <td :class="getCellStyle(1)">
        <a class="cell">一季度</a>
      </td>
      <td :class="getCellStyle(2)">
        <a class="cell">二季度</a>
      </td>
      <td :class="getCellStyle(3)">
        <a class="cell">三季度</a>
      </td>
      <td :class="getCellStyle(4)">
        <a class="cell">四季度</a>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script type="text/babel">
  import Locale from 'element-ui/src/mixins/locale';
  import { isDate } from '../util';
  import { hasClass } from 'element-ui/src/utils/dom';

  export default {
    props: {
      disabledDate: {},
      value: {},
      defaultValue: {
        validator(val) {
          // null or valid Date Object
          return val === null || (val instanceof Date && isDate(val));
        }
      },
      date: {}
    },
    mixins: [Locale],
    methods: {
      getCellStyle(quarterly) {
        if (this.value) {
          return parseInt(this.value.split('#')[1], 10) === quarterly ? 'current' : '';
        }
        return '';
      },

      handleQuqrterlyTableClick(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 quarterly = row * 4 + column;

        const year = this.date.getFullYear();

        this.$emit('pick', `${year}#${quarterly + 1}`);
      }
    }
  };
</script>
