<!--
 * @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>
    <el-button v-show="todayShow" :class="{'checked-btn':selected=='today'}" round size="mini" @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'
    },
    todayShow: {
      type: Boolean,
      default: true
    }
  },
  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>