<template>
  <div class="year-calender">
    <div class="calendar-top">
      <n-space justify="space-between">
        <n-button class="cercle"
                  :circle="true"
                  @click="subYear">
          <template #icon>
            <n-icon>
              <ArrowBack />
            </n-icon>
          </template>
        </n-button>
        <div class="current-year">{{ currentYear }}</div>
        <n-button class="cercle"
                  :circle="true"
                  @click="addYear">
          <template #icon>
            <n-icon>
              <ArrowForward />
            </n-icon>
          </template>
        </n-button>
      </n-space>
    </div>
    <div class="calendar-bottom">
      <div class="month"
           v-for="(item, index) in 12"
           :key="index"
           :class="{ active: index == timeIndex }"
           @click="checkMonth(item)">
        {{ item }}月
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { ArrowBack, ArrowForward } from '@vicons/ionicons5';
import bus from '@/utils/util';
export default {
  components: {
    ArrowBack,
    ArrowForward,
  },
  props: {
    emits: ['getYearMonth'],
  },
  setup(props, context) {
    const allData = reactive({
      currentYear: new Date().getFullYear(),
      timeIndex: new Date().getMonth(),
      year: null,
      month: null,
    });
    // 点击月份
    const checkMonth = (item) => {
      allData.timeIndex = item - 1;
      let obj = {
        year: allData.currentYear,
        month: item,
      };
      bus.emit('getCurrentData', obj);
    };
    function subYear() {
      allData.currentYear--;
      checkMonth(allData.timeIndex + 1);
    }
    function addYear() {
      allData.currentYear++;
      checkMonth(allData.timeIndex + 1);
    }
    onMounted(() => { });
    onBeforeMount(() => { });
    return {
      ...toRefs(allData),
      checkMonth,
      subYear,
      addYear,
    };
  },
};
</script>
<style lang="less">
.year-calender {
  .calendar-top {
    margin: 17px;
    .cercle {
      width: 25px;
      height: 25px;
      border: 2px solid #25d8f5;
    }
    .current-year {
      font-weight: 600;
      color: #25d8f5;
      font-size: 22px;
    }
  }
  .calendar-bottom {
    display: flex;
    flex-wrap: wrap;
    .month {
      width: 94.51px;
      height: 83.51px;
      border-left: 1px solid #25d8f5;
      border-top: 1px solid #25d8f5;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .active {
      font-weight: 600;
      color: #25d8f5 !important;
    }
  }
}
</style>