<!--
 * @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, getYesterDay } from '@/utils/dateutils'
export default {
  name: 'WasteTransfer',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // type: 'waste', // waste,clean,toilet
      listQuery: {
        type: 'day', // 统计方式，day按天，month按月
        startTime: getLastWeek('yyyy-MM-dd'), // 开始时间
        endTime: getYesterDay('yyyy-MM-dd') // 结束时间
      }, // 筛选条件
      grid: {
        right: 20,
        bottom: 0,
        top: 20
      },
      itemStyle:{
        borderRadius: [5, 5, 0, 0]
      },
      extend: {
        'xAxis.0.axisLabel.rotate': 45,
        'xAxis.0.axisLabel.color': '#000',
        'yAxis.0.axisLabel.color': '#000',
        'yAxis.axisLine.lineStyle.color': '#3b51f0'
      },
      chartSettings: {
        labelMap: {
          'name': '日期',
          'value': '作业次数'
        },
        metrics: ['value'],
        dimension: ['name']
      },
      chartData: {
        labelMap: {
          'name': '日期',
          'value': '作业次数'
        },
        columns: ['name', 'value'],
        rows: [
          { 'name': '1月12日', 'value': 139 },
          { 'name': '1月13日', 'value': 353 },
          { 'name': '1月14日', 'value': 292 },
          { 'name': '1月15日', 'value': 172 },
          { 'name': '1月16日', 'value': 379 },
          { 'name': '1月17日', 'value': 459 }
        ]
      }
    }
  },
  created() {
    if (this.type) {
      this.fetchData(this.type)
    }
  },
  methods: {
    fetchData(type) {
      console.log('请求类型', type)
      if (type === 'clean') {
        this.fetchCleanData()
      } else if (type === 'waste') {
        this.fetchWasteData()
      } else if (type === 'toilet') {
        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
          }
        })
        this.resetChart(data)
      })
    },
    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
          }
        })
        this.resetChart(data)
      })
    },
    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
          }
        })
        this.resetChart(data)
      })
    },
    // 格式化轴最大值
    resetChart(data) {
      const maxValue = Math.max.apply(Math, data.map(function(item) { return parseInt(item.count) }))
      if (maxValue < 10) {
        this.extend.yAxis = { max: 10 }
      } else {
        this.extend.yAxis = {}
      }
    }
  }
}
</script>

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

</style>