<!--
 * @Description: 垃圾转运作业次数
 * @Author: 王晓颖
 * @Date: 2021-01-11 18:41:56
 -->
<template>
  <div style="width: 100%;height: 100%;">
    <ve-histogram :data="chartData" :legend-visible="false" :extend="extend" :settings="chartSettings" :grid="grid" height="100%" style="width: 100%;height: 100%;"/>
  </div>
</template>

<script>
import { getCleanJobCount } from '@/api/sanitation/statistics'
import { getTransferJobCount } from '@/api/sanitation/statistics'
import { getToiletJobCount } from '@/api/sanitation/statistics'
import { getToday, getLastWeek } from '@/utils/dateutils'
export default {
  name: 'WasteTransfer',
  data() {
    return {
      type: 'waste', // waste,clean,toilet
      listQuery: {
        type: 'day', // 统计方式，day按天，month按月
        startTime: getLastWeek('yyyy-MM-dd'), // 开始时间
        endTime: getToday('yyyy-MM-dd') // 结束时间
      }, // 筛选条件
      grid: {
        right: 20,
        bottom: 0,
        top: 20
      },
      extend: {
        'xAxis.0.axisLabel.rotate': 45
      },
      chartSettings: {
        labelMap: {
          'name': '日期',
          'value': '作业次数'
        },
        metrics: ['value'],
        dimension: ['name']
      },
      chartData: {
        labelMap: {
          'name': '日期',
          'value': '作业次数'
        },
        columns: ['name', 'value'],
        rows: [
          { 'name': '1月12日', 'value': 1393 },
          { 'name': '1月13日', 'value': 3530 },
          { 'name': '1月14日', 'value': 2923 },
          { 'name': '1月15日', 'value': 1723 },
          { 'name': '1月16日', 'value': 3792 },
          { 'name': '1月17日', 'value': 4593 }
        ]
      }
    }
  },
  created(){
    this.fetchData()
  },
  methods: {
    fetchData() {
      if (this.type === 'clean') {
        this.fetchCleanData()
      } else if (this.type === 'waste') {
        this.fetchWasteData()
      } else {
        this.fetchToiletData()
      }
    },
    fetchCleanData() {
      getCleanJobCount(this.listQuery).then(response => {
        const data = response.data
        this.chartData.rows = data.map(item => {
          return {
            name: item.name.substring(5),
            value: item.count
          }
        })
      })
    },
    fetchWasteData() {
      getTransferJobCount(this.listQuery).then(response => {
        const data = response.data
        this.chartData.rows = data.map(item => {
          return {
            name: item.name.substring(5),
            value: item.count
          }
        })
      })
    },
    fetchToiletData() {
      getToiletJobCount(this.listQuery).then(response => {
        const data = response.data
        this.chartData.rows = data.map(item => {
          return {
            name: item.name.substring(5),
            value: item.count
          }
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>