<template>
  <div>
    <div class="statistic-container">
      <span id="s2T" class="chart-tool-button" @click="fetchData('today')">今日</span>
      <span id="s2Y" class="chart-tool-button" @click="fetchData('yesterday')">昨日</span>
      <span id="s2L" class="chart-tool-button" @click="fetchData('lastSevenDays')">近7日</span>
    </div>
    <ve-line :data="chartData" :title="title" :settings="chartSettings" :extend="chartExtend"/>
  </div>
</template>

<script>
import { getDayTime } from '@/utils/dateutils'
import { countbyTime } from '@/api/statistics'
export default {
  name: 'PassOneDay',
  data() {
    this.title = {
      text: '当日通行趋势'
    }
    this.chartSettings = {
      labelMap: {
        'total': '通行人数'
      },
      metrics: ['total'],
      dimension: ['time']
    }
    this.chartExtend = {
      yAxis: { minInterval: 1 }
    }
    return {
      chartData: {
        columns: ['time', 'total'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchData(type) {
      var startDate = getDayTime(new Date().getTime()).Format('yyyy-MM-dd')
      var endDate = getDayTime(new Date().getTime()).Format('yyyy-MM-dd')
      document.getElementById('s2T').classList.add('selected')
      document.getElementById('s2Y').classList.remove('selected')
      document.getElementById('s2L').classList.remove('selected')
      if (type === 'yesterday') {
        document.getElementById('s2T').classList.remove('selected')
        document.getElementById('s2Y').classList.add('selected')
        document.getElementById('s2L').classList.remove('selected')
        startDate = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
        endDate = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')
      } else if (type === 'lastSevenDays') {
        document.getElementById('s2T').classList.remove('selected')
        document.getElementById('s2Y').classList.remove('selected')
        document.getElementById('s2L').classList.add('selected')
        startDate = getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd')
        endDate = getDayTime(new Date().getTime()).Format('yyyy-MM-dd')
      }
      const listQuery = {
        startDate: startDate,
        endDate: endDate
      }
      countbyTime(listQuery).then(response => {
        const data = response.data
        var hasData = false
        if (data.length !== 0) {
          for (var i = 0; i < data.length; i++) {
            if (parseInt(data[i].total) !== 0) {
              hasData = true
            }
          }
        }
        if (!hasData) {
          this.chartExtend.yAxis.max = 10
        }
        this.chartData.rows = data
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .statistic-container {
    /*padding:0px;*/
    margin-bottom: 10px;
    /*border: 1px solid #d3dce6;*/
    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;
  }
</style>