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

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

export default {
  name: 'TempAnalysis',
  data() {
    this.title = {
      text: '测温情况'
    }
    this.chartSettings = {
      labelMap: {
        'temp1': '<36℃',
        'temp2': '36.1~36.6℃',
        'temp3': '36.7~37.3℃',
        'temp4': '体温异常'
      },
      stack: { '体温': ['temp1', 'temp2', 'temp3', 'temp4'] },
      filterZero: true
    }
    this.legends = {
      x: 'right' // 可设定图例在左、右、居中
    }
    this.chartExtends = {
      color: ['#66CC66', '#40c9c6', '#36a3f7', '#f4516c'],
      barWidth: 20,
      'series.3.label.show': true,
      'series.3.label.position': 'top',
      'series.3.label.textStyle.color': '#808069',
      'series.3.label.formatter': (e) => {
        var total = parseInt(this.showName(e.dataIndex))
        if (total > 0) {
          return this.showName(e.dataIndex)
        } else {
          return ''
        }
      },
      xAxis: {
        axisLabel: {
          interval: 0,
          rotate: 45 // 代表逆时针旋转45度
        }
      },
      yAxis: {
        minInterval: 1
      },
      filterZero: true
    }
    return {
      total: 0,
      isLegendVisible: true,
      isTipShow: true,
      chartData: {
        columns: ['deviceName', 'temp1', 'temp2', 'temp3', 'temp4'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    showName(index) {
      return this.chartData.rows[index].total
    },
    fetchData(type) {
      // const startTime = '2020-06-01 00:00:00'
      // const endTime = '2020-07-01 00:00:00'
      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('s3T').classList.add('selected')
      document.getElementById('s3Y').classList.remove('selected')
      document.getElementById('s3L').classList.remove('selected')
      if (type === 'yesterday') {
        document.getElementById('s3T').classList.remove('selected')
        document.getElementById('s3Y').classList.add('selected')
        document.getElementById('s3L').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('s3T').classList.remove('selected')
        document.getElementById('s3Y').classList.remove('selected')
        document.getElementById('s3L').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 listQuery = {
        startTime: startTime,
        endTime: endTime
      }
      peopleCountByDevice(listQuery).then(response => {
        const data = response.data
        // const data = [
        //   { 'deviceName': 'ww', 'temp1': 7, 'temp2': 12, 'temp3': 3, 'temp4': 4 },
        //   { 'deviceName': 'ww2', 'temp1': 0, 'temp2': 0, 'temp3': 0, 'temp4': 0 },
        //   { 'deviceName': 'ww3', 'temp1': 11, 'temp2': 2, 'temp3': 3, 'temp4': 4 },
        //   { 'deviceName': 'ww4', 'temp1': 0, 'temp2': 5, 'temp3': 6, 'temp4': 0 },
        //   { 'deviceName': 'ww5', 'temp1': 8, 'temp2': 2, 'temp3': 3, 'temp4': 4 },
        //   { 'deviceName': 'ww6', 'temp1': 0, 'temp2': 0, 'temp3': 0, 'temp4': 0 },
        //   { 'deviceName': 'ww7', 'temp1': 8, 'temp2': 2, 'temp3': 3, 'temp4': 4 }
        // ]

        var indexDelete = []
        for (var i = 0; i < data.length; i++) {
          if (parseInt(data[i].temp1) === 0 && parseInt(data[i].temp2) === 0 && parseInt(data[i].temp3) === 0 && parseInt(data[i].temp4) === 0) {
            indexDelete.push({ 'index': i })
          } else {
            // var d = {}
            // d['total'] = parseInt(data[i].temp1) + parseInt(data[i].temp2) + parseInt(data[i].temp3) + parseInt(data[i].temp4)
            data[i]['total'] = parseInt(data[i].temp1) + parseInt(data[i].temp2) + parseInt(data[i].temp3) + parseInt(data[i].temp4)
          }
        }
        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
            }
          }
        }
        if (data.length === 0) {
          var data0 = {}
          data0['deviceName'] = ''
          data0['temp1'] = 0
          data0['temp2'] = 0
          data0['temp3'] = 0
          data0['temp4'] = 0
          data.push(data0)
          this.chartExtends.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>