季度时间类型组件

<template>
  <!--季度时间类型组件-->
  <div class="quarter-picker">
    <div class="picker-content">
      <div class="header">
        <button type="button" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
        <span role="button" class="el-date-picker__header-label">{{year}}年</span>
        <button type="button" @click="next" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
      </div>
      <div class="picker-item">
        <el-button type="text" class="season-item" @click="selectSeason(0)">第一季度</el-button>
        <el-button type="text" class="season-item" @click="selectSeason(1)">第二季度</el-button>
      </div>
      <div class="picker-item">
        <el-button type="text" class="season-item" @click="selectSeason(2)">第三季度</el-button>
        <el-button type="text" class="season-item" @click="selectSeason(3)">第四季度</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  export default {
    props: {
      valueArr: {
        default: () => {
          return ['01-03', '04-06', '07-09', '10-12']
        },
        type: Array
      },
      getValue: {
        default: () => {},
        type: Function
      },
      defaultValue: {
        default: '',
        type: String
      }
    },
    data () {
      return {
        showSeason: false,
        season: '',
        year: new Date().getFullYear(),
        showValue: ''
      }
    },
    created () {
      if (this.defaultValue) {
        let value = this.defaultValue
        let arr = value.split('-')
        this.year = arr[0].slice(0, 4)
        let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
        let arrAll = this.valueArr
        this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
      }
    },
    watch: {
      defaultValue: function (value, oldValue) {
        let arr = value.split('-')
        this.year = arr[0].slice(0, 4)
        let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
        let arrAll = this.valueArr
        this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
      }
    },
    methods: {
      prev () {
        this.year = this.year * 1 - 1
      },
      next () {
        this.year = this.year * 1 + 1
      },
      selectSeason (i) {
        let self = this
        for (let j in $('.season-item')) {
          $('.season-item').eq(j).css('color', '#fff')
        }
        $('.season-item').eq(i).css('color', '#249bff')
        self.season = i + 1
        let arr = self.valueArr[i].split('-')
        self.getValue(self.year + arr[0] + '-' + self.year + arr[1])
        self.showSeason = false
        this.showValue = `${this.year}年${this.season}季度`
        this.$emit('getQuarter', this.year, this.season)
      }
    }
  }
</script>

<style lang="scss">

  .picker-content {
    border-radius: 4px;

    .header {
      text-align: center;
      padding: 0;
      margin: 12px;

      button, span {
        color: #fff;

        &:hover {
          color: #249bff;
        }
      }
    }

    .picker-item {
      .el-button {
        width: 120px;
        cursor: pointer;
        color: #fff;
        padding: 20px 3px;
        line-height: 22px;

        &:hover {
          color: #249bff;
        }
      }
    }
  }
</style>