<template>
  <div class="chart-tools">
    <span class="chart-tool-button" @click="changeDate('today')">今日</span>
    <span class="chart-tool-button" @click="changeDate('week')">最近7天</span>
    <span class="chart-tool-button" @click="changeDate('month')">最近30天</span>
    <span class="chart-tool-button" @click="changeDate('season')">最近一季</span>
    <span class="chart-tool-button" @click="changeDate('year')">最近一年</span>
  </div>
</template>

<script>
import { getDayTime, getLastYear } from '@/utils/dateutils'

export default {
  name: 'ChartTools',
  // model: {
  //   props: 'timeRange',
  //   event: 'change'
  // },
  // props: {
  //   timeRange: {
  //     type: Array,
  //     default: function() {
  //       return []
  //     }
  //   }
  // },
  data() {
    return {
      timeRange: []
    }
  },
  methods: {
    changeDate(date) {
      let startDate, endDate
      if (date === 'today') { // 选择今日
        startDate = getDayTime(new Date().getTime())
        endDate = startDate
      } else if (date === 'week') {
        startDate = getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000)
        endDate = new Date()
      } else if (date === 'month') {
        startDate = getDayTime(new Date().getTime() - 24 * 29 * 60 * 60 * 1000)
        endDate = new Date()
      } else if (date === 'season') {
        startDate = getDayTime(new Date().getTime() - 24 * 89 * 60 * 60 * 1000)
        endDate = new Date()
      } else if (date === 'year') {
        startDate = getLastYear()
        // startDate = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
        endDate = new Date()
      }
      this.timeRange = [startDate.Format('yyyy-MM-dd'), endDate.Format('yyyy-MM-dd')]
      this.$emit('change', this.timeRange)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-tools {
    display: inline-block;
    background-color: #f2f2f2;
    line-height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    .chart-tool-button{
      padding: 5px;
      line-height: 16px;
      margin-top:5px;
      font-size:13px;
    }
    .chart-tool-button:hover{
      background-color: #8cc5ff;
      cursor: pointer;
      color:white
    }
    .chart-tool-button:active{
      background-color: #8cc5ff;
      color:white
    }
  }

</style>