<!--
 * @Description: 时间筛选器
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="statistic-container">
    <el-button :class="{'checked-btn':selected=='year'}" round size="mini" @click="setDefaultTime('year')">本年度</el-button>
    <el-button :class="{'checked-btn':selected=='season'}" round size="mini" @click="setDefaultTime('season')">本季度</el-button>
    <el-button :class="{'checked-btn':selected=='month'}" round size="mini" @click="setDefaultTime('month')">近30日</el-button>
    <el-button :class="{'checked-btn':selected=='week'}" round size="mini" @click="setDefaultTime('week')">近7日</el-button>
  </div>
</template>

<script>
export default {
  name: 'FunctionArea2',
  props: {
    select: {
      type: String,
      default: 'week'
    }
  },
  data() {
    return {
      selected: '',
      days: 7
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.setDefaultTime(this.select)
    },
    change(type) {
      this.$emit('change', this.days)
    },
    setDefaultTime(val) {
      this.selected = val
      if (val === 'year') {
        const currentYear = new Date().getFullYear().toString()
        const hasTimestamp = new Date() - new Date(currentYear)
        this.days = Math.ceil(hasTimestamp / 86400000)
      } if (val === 'season') {
        var month = new Date().getMonth() // 获取当前月份
        let newmonth // 季度第一天
        if (month < 3) {
          newmonth = new Date(new Date().setMonth(0))
        } else if (month > 2 && month < 6) {
          newmonth = new Date(new Date().setMonth(3))
        } else if (month > 5 && month < 9) {
          newmonth = new Date(new Date().setMonth(6))
        } else if (month > 8 && month < 11) {
          newmonth = new Date(new Date().setMonth(9))
        }
        const thisseason1 = new Date(newmonth.setDate(1))
        const hasTimestamp = new Date() - thisseason1
        this.days = Math.ceil(hasTimestamp / 86400000) + 1
      } else if (val === 'month') { // 30日
        this.days = 30
      } else if (val === 'week') {
        this.days = 7
      }
      this.change(val)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .statistic-container {
    //position: absolute;
    //top: 0px;
    //right: 10px;
    .el-button{
      padding: 5px 10px;
    }
    margin-bottom: 10px;
    text-align: center;
    .chart-tool-button {
      padding: 5px;
      line-height: 16px;
      margin-top: 5px;
      font-size: 14px;
    }
    .chart-tool-button:hover {
      background-color: #8cc5ff;
      cursor: pointer;
      color: white;
    }
    .chart-tool-button:active {
      background-color: #8cc5ff;
      color: white;
    }
  }
  .selected {
    background-color: #8cc5ff;
    color: white;
  }
  .checked-btn{
    color: #278DF9;
    border-color: #beddfd;
    background-color: #e9f4fe;
  }
</style>