<template>
  <div>
    <div class="statistic-container">
      <span id="s4TA" class="chart-tool-button" @click="fetchData('today')">今日</span>
      <span id="s4YA" class="chart-tool-button" @click="fetchData('yesterday')">昨日</span>
      <span id="s4LA" class="chart-tool-button" @click="fetchData('lastSevenDays')">近7日</span>
    </div>
    <ve-histogram :data="chartData" :title="title" :settings="chartSettings" :legend="legends" :extend="chartExtend" />
  </div>
</template>

<script>
import { getDayTime } from '@/utils/dateutils'
import { recordCountByArea } from '@/api/statistics'

export default {
  name: 'PassCountArea',
  data() {
    this.title = {
      text: '' +
        '各楼层通行情况'
    }
    this.legends = {
      orient: 'horizontal',
      x: 'right', // 可设定图例在左、右、居中
      padding: [0, 0, 0, 100]
    }
    this.chartSettings = {
      label: {
        normal: {
          show: true
        }
      }
    }
    this.chartExtend = {
      legend: {
        show: false
      },
      series: {
        label: {
          show: true,		// 开启显示
          align: 'center',	// 在上方显示
          position: 'top',	// 在上方显示
          textStyle: { // 数值样式
            color: '#18cca7',
            fontSize: 13
          }
          // formatter: this.showTotal
        }
      }
    }
    return {
      total: 0,
      chartData: {
        columns: ['deviceName', '通行人数'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    showTotal() {
      return this.total
    },
    fetchData(type) {
      // const startTime = '2020-06-01 00:00:00'
      // const endTime = '2020-07-01 00:00:00'
      this.total = 0
      var startTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 00:00:00'
      var endTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 23:59:59'
      document.getElementById('s4TA').classList.add('selected')
      document.getElementById('s4YA').classList.remove('selected')
      document.getElementById('s4LA').classList.remove('selected')
      if (type === 'yesterday') {
        document.getElementById('s4TA').classList.remove('selected')
        document.getElementById('s4YA').classList.add('selected')
        document.getElementById('s4LA').classList.remove('selected')
        startTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd') + ' 00:00:00'
        endTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd') + ' 23:59:59'
      } else if (type === 'lastSevenDays') {
        document.getElementById('s4TA').classList.remove('selected')
        document.getElementById('s4YA').classList.remove('selected')
        document.getElementById('s4LA').classList.add('selected')
        startTime = getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd') + ' 00:00:00'
        endTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 23:59:59'
      }
      // const startTime = '2020-06-01 00:00:00'
      // const endTime = '2020-06-20 00:00:00'
      const listQuery = {
        startTime: startTime,
        endTime: endTime
      }
      recordCountByArea(listQuery).then(response => {
        const data = response.data.map((item) => {
          return { deviceName: item.AREA_NAME, 通行人数: item.cardNum }
        })
        if (data.length > 10) data.length = 10
        // var indexDelete = []
        // for (var i = 0; i < data.length; i++) {
        //   if (parseInt(data[i].count) === 0) {
        //     indexDelete.push({ 'index': i })
        //   }
        //   this.total = this.total + parseInt(data[i].count)
        // }
        // if (indexDelete.length > 0) {
        //   for (var j = 0; j < indexDelete.length; j++) {
        //     data.splice(parseInt(indexDelete[j].index), 1)
        //     for (var h = j + 1; h < indexDelete.length; h++) {
        //       indexDelete[h].index = indexDelete[h].index - 1
        //     }
        //   }
        // }
        // this.chartSettings.label.normal.show = true
        // if (data.length === 0) {
        //   var data0 = {}
        //   data0['deviceName'] = ''
        //   data0['count'] = 0
        //   data.push(data0)
        //   this.chartSettings.label.normal.show = false
        // }
        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>