<template>
  <!-- 季度选择器 -->
  <div class="quarter-date-box">
    <div class="quarter-date-year">
      <a-select
        style="width: 100%"
        :size="size"
        placeholder="请选择年份"
        :value="currYear"
        @change="changeYear"
        allowClear>
        <a-select-option v-for="item in years" :value="item" :key="item">
          {{ item }}
        </a-select-option>
      </a-select>
    </div>
    <div class="quarter-date-jd">
      <a-select
        style="width: 100%"
        :size="size"
        placeholder="请选择季度"
        :value="currJd"
        @change="changeJd"
        allowClear>
        <a-select-option v-for="item in quarter" :value="item.id" :key="item.id">
          {{ item.val }}
        </a-select-option>
      </a-select>
    </div>
  </div>
</template>
<script>
import getDate from '@/libs/getDate.js'
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  data () {
    return {
      date: this.value,
      toYears: new Date().getFullYear(), // 今年
      currYear: this.toYears,
      currJd: undefined
    }
  },
  computed: {
    years () {
      const years = []
      const lens = (this.toYears - 2023) + 1
      for (let i = 0; i < lens; i++) {
        years.push(this.toYears - i)
      }
      return years
    },
    quarter () {
      const quarterData = [{ id: 1, val: '一季度' }, { id: 2, val: '二季度' }, { id: 3, val: '三季度' }, { id: 4, val: '四季度' }]
      const now = new Date()
      const month = now.getMonth()
      const numInfo = Math.floor(month / 3) + 1
      quarterData.map(item => {
        if (numInfo * 1 + 1 === item.id) {
          item.isToChoose = true
        } else {
          item.isToChoose = false
        }
      })
      return quarterData
    }
  },
  watch: {
    value (val) {
      this.date = val
      if (val.length > 0) {
        this.currYear = val[0]
        this.currJd = val[1]
      }
    }
  },
  methods: {
    changeYear (val) {
      this.currYear = val
      const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
      this.$emit('input', [this.currYear, this.currJd], valStr)
      this.$emit('change', [this.currYear, this.currJd], valStr)
    },
    changeJd (val) {
      this.currJd = val
      const valStr = getDate.getQuarterByYear(this.currYear, this.currJd)
      this.$emit('input', [this.currYear, this.currJd], valStr)
      this.$emit('change', [this.currYear, this.currJd], valStr)
    },
    resetDate () {
      this.currYear = this.toYears
      this.currJd = undefined
      this.$emit('input', [this.currYear, this.currJd], null)
      this.$emit('change', [this.currYear, this.currJd], null)
    }
  }
}
</script>
<style lange="less">
.quarter-date-box{
  display: flex;
  align-items: center;
  width:100%;
  .quarter-date-year{
    flex:1;
    width:49%;
  }
  .quarter-date-jd{
    flex:1;
    width:50%;
  }
}
</style>
