<!--事件来源统计-->
<template>
  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
</template>

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
import { getCaseStatisticsBySource } from '@/api/statistics'

export default {
  name: 'CaseSource',
  props: {
    listQuery: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    this.extend = {
      series: {
        label: { show: true, position: 'right' }
      }
    }
    this.grid = {
      right: 60
    }
    this.title = {
      text: ''
    }
    this.chartSettings = {
      itemStyle: {
        'barCategoryGap': 5
      },
      barWidth: 15,
      labelMap: {
        'source': '事件来源',
        'caseNum': '事件数量'
      },
      dimension: ['source'],
      metrics: ['caseNum']
    }
    return {
      chartData: {
        columns: ['source', 'caseNum'],
        rows: []
      }
    }
  },
  // watch: {
  //   listQuery(val) {
  //     this.search()
  //   }
  // },
  // created() {
  //   this.fetchData()
  // },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      getCaseStatisticsBySource(this.listQuery).then(response => {
        this.chartData.rows = response.data
        // this.chartData.rows = [
        //   { 'source': '热线电话', 'caseNum': 1393, '下单用户': 1093, '下单率': 0.32 },
        //   { 'source': '微信', 'caseNum': 3530, '下单用户': 3230, '下单率': 0.26 },
        //   { 'source': '微博', 'caseNum': 2923, '下单用户': 2623, '下单率': 0.76 },
        //   { 'source': '邮箱', 'caseNum': 1723, '下单用户': 1423, '下单率': 0.49 },
        //   { 'source': '短信', 'caseNum': 3792, '下单用户': 3492, '下单率': 0.323 },
        //   { 'source': '其他平台', 'caseNum': 353, '下单用户': 4293, '下单率': 0.78 }
        // ]
      })
    }
  }
}
</script>