<template>
  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" :colors="colors" />
</template>

<script>
import { getDayTime } from '@/utils/dateutils'
import { jobStaticsByDept } from '@/api/data/dataStatics'

export default {
  name: 'JobByStatus',
  data() {
    return {
      title: {
        text: '30日工单数量统计'
      },
      colors: ['#fa6e86', '#f5ab6f', '#fdde51', '#19d4ae'],
      chartSettings: {
        labelMap: {
          'deptName': '权属单位',
          'beforeGet': '待处理',
          'beforeConfirm': '待确认',
          'inHandle': '处理中',
          'over': '已完成'
        },
        stack: {
          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
        }
      },
      extend: {
        xAxis: {
          type: 'value',
          minInterval: 1
        },
        series: {
          barMaxWidth: 35
        }
      },
      chartData: {
        columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
        rows: []
      }
    }
  },
  mounted() {
    // TODO:待调试真接口
    this.fetchData()
    // this.chartData.rows = [
    //   { 'deptName': '电力公司', 'beforeGet': 139, 'beforeConfirm': 109, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '开拓热力', 'beforeGet': 353, 'beforeConfirm': 323, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '市政集团', 'beforeGet': 292, 'beforeConfirm': 262, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '博大网信', 'beforeGet': 172, 'beforeConfirm': 142, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '信息办', 'beforeGet': 379, 'beforeConfirm': 349, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '燃气四分', 'beforeGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 },
    //   { 'deptName': '其他', 'beforeGet': 459, 'beforeConfirm': 429, 'inHandle': 123, 'over': 456 }
    // ]
  },
  methods: {
    fetchData() {
      const beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000).Format('yyyy-MM-dd hh:mm:ss')
      const endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
      const listQuery = {
        beginTime: beginTime,
        endTime: endTime
      }
      jobStaticsByDept(listQuery).then(response => {
        this.chartData.rows = response.data
        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
        }))
        if (maxValue < 10) {
          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
        } else {
          this.extend.xAxis = { type: 'value', minInterval: 1 }
        }
      })
    }
  }
}
</script>