<template>
  <ve-pie :data="chartData" :title="title" :legend="legends" :tooltip="tooltip" :settings="chartSettings"/>
</template>

<script>
import { peopleCountByDept } from '@/api/statistics'

export default {
  name: 'PassAnalysis',
  data() {
    this.title = {
      text: '通行情况分析'
    }
    this.chartSettings = {
      label: {
        normal: {
          show: true
        }
      }
    }
    this.legends = {
      show: true,
      orient: 'horizontal',
      x: 'right', // 可设定图例在左、右、居中
      padding: [0, 0, 0, 100]
    }
    this.tooltip = {
      show: true
    }
    return {
      isLegendVisible: true,
      isTipVisible: true,
      chartData: {
        columns: ['deptName', 'count'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // const startTime = (new Date().toLocaleDateString().split('/').join('-')) + ' 00:00:00'
      // const endTime = new Date().toLocaleDateString().split('/').join('-') + ' 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
      }
      peopleCountByDept(listQuery).then(response => {
        const data = response.data
        if (data.length !== 0) {
          if (data.length === 1 && data[0].count === 0) {
            this.legends.show = false
            this.tooltip.show = false
            this.chartSettings.label.normal.show = false
          }
          this.chartData.rows = data
        }
      })
    }
  }
}
</script>