<!--
 * @Description: 时间筛选器
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="statistic-container">
    <el-button round size="mini" :class="{'checked-btn':selected=='year'}" @click="setDefaultTime('year')">本年度</el-button>
    <el-button round size="mini" :class="{'checked-btn':selected=='season'}" @click="setDefaultTime('season')">本季度</el-button>
    <el-button round size="mini" :class="{'checked-btn':selected=='month'}" @click="setDefaultTime('month')">近30日</el-button>
    <el-button round size="mini" :class="{'checked-btn':selected=='week'}" @click="setDefaultTime('week')">近7日</el-button>
    <el-button round size="mini" :class="{'checked-btn':selected=='today'}" @click="setDefaultTime('today')">今日</el-button>
    <el-date-picker
      v-model="timeRange"
      :picker-options="pickerOptions"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      size="mini"
      style="width:250px;margin-right: 20px"
      @change="change('other')"/>
  </div>
</template>

<script>
  import { getDayTime } from '@/utils/dateutils'
  export default {
    name: "FunctionArea",
    props:{
      select:{
        type: String,
        default: 'today'
      }
    },
    data() {
      return {
        selected:'',
        timeRange: [],
        pickerOptions: {
          disabledDate: function(date) {
            var oDate1 = new Date(date)
            var oDate2 = new Date()
            if (oDate1.getTime() > oDate2.getTime()) {
              return true
            } else {
              return false
            }
          }
        }
      }
    },
    methods: {
      init(){
        this.setDefaultTime(this.select)
      },
      change(type){
        this.$emit('change', this.timeRange, type )
      },
      setDefaultTime(val) {
        this.selected = val
        if (val === 'year') {
          var today = new Date()
          var tYear = today.getFullYear()
          const beginTime = tYear + '-01-01'
          const endTime = getDayTime(new Date().getTime())
          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
        }if (val === 'season') {
          var today = new Date()
          var tYear = today.getFullYear()
          var tMonth = today.getMonth() + 1
          const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
          const beginTime = tYear + '-' + oldMonth + '-01'
          const endTime = getDayTime(new Date().getTime())
          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
        }else if (val === 'month') { // 30日
          // var today = new Date()
          // var tYear = today.getFullYear()
          // var tMonth = today.getMonth() + 1
          // if (tMonth.toString().length === 1) {
          //   tMonth = '0' + tMonth
          // }
          // const beginTime = tYear + '-' + tMonth + '-01'
          // const endTime = getDayTime(new Date().getTime())
          // this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
          this.timeRange = [getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]

        } else if (val === 'week') {
          // const nowDayOfWeek =  new Date().getDay()-1
          const nowDayOfWeek =  6
          this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
        } else if (val === 'yesterday') {
          this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
        } else if (val === 'today') {
          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
        }
        this.change(val)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .statistic-container {

    .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>