other / mew-iview

  <template>

      <div :class="classes">
          <span
              :class="getCellCls(cell)"
              v-for="cell in cells"
              @click="handleClick(cell)"
              @mouseenter="handleMouseMove(cell)"
          >
              <em>{{ cell.date.getFullYear() }}</em>
          </span>

      </div>

  </template>
  <script>

      import { clearHours } from '../util';

      import { deepCopy } from '../../../utils/assist';

      import mixin from './mixin';
      import prefixCls from './prefixCls';

      export default {

          mixins: [ mixin ],
  
          props: {/* in mixin */},

          computed: {

              classes() {

                  return [
                      `${prefixCls}`,
                      `${prefixCls}-year`

                  ];

              },
              startYear() {

                  return Math.floor(this.tableDate.getFullYear() / 10) * 10;

              },
              cells () {
                  let cells = [];
                  const cell_tmpl = {
                      text: '',
                      selected: false,
                      disabled: false
                  };
  

                  const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));

                  const focusedDate = clearHours(new Date(this.focusedDate.getFullYear(), 0, 1));

                  for (let i = 0; i < 10; i++) {
                      const cell = deepCopy(cell_tmpl);
                      cell.date = new Date(this.startYear + i, 0, 1);
                      cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';

                      const day = clearHours(cell.date);
                      cell.selected = selectedDays.includes(day);
                      cell.focused = day === focusedDate;

                      cells.push(cell);
                  }
  
                  return cells;
              }
          },
          methods: {
              getCellCls (cell) {
                  return [
                      `${prefixCls}-cell`,
                      {
                          [`${prefixCls}-cell-selected`]: cell.selected,

                          [`${prefixCls}-cell-disabled`]: cell.disabled,

                          [`${prefixCls}-cell-focused`]: cell.focused,

                          [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end

                      }

                  ];

              },

          }

      };
  </script>