<template>
  <div id="charts" style="display: flex; flex-wrap: wrap; height: 100%;">
    <div v-for="item in pieData" :key="item.name" style="width: 33%; height: 100%;">
      <div :id="'pie-' + item.name" style="width: 100%; height: 98%;"></div>
    </div>
  </div>
</template>

<script>
import * as Util from '../../Util'
import co from 'co'
import echarts from 'echarts'
import { HttpResetClass } from 'vue-client'

let getData = function* (self) {
  let load = new HttpResetClass()
  load.load('POST', 'api/af-revenue/sql/BusinessType', {
    data: {
      startDate: self.startdate,
      endDate: self.enddate,
      f_orgid: self.orgid
    }
  }, {
    resolveMsg: null,
    rejectMsg: null
  }).then((res) => {
    // res.data 是 [{name, num, total}, ...]
    self.pieData = res.data
    self.$nextTick(() => {
      self.renderPies(res.data)
    })
  })
}

export default {
  props: {
    startdate: {
      type: String,
      default: Util.toStandardDateString()
    },
    enddate: {
      type: String,
      default: Util.toStandardDateString()
    },
    orgid: {
      type: String
    }
  },
  data () {
    return {
      pieCharts: [],
      pieData: null
    }
  },
  methods: {
    renderPies (dataList) {
      // 清除旧图表
      this.pieCharts.forEach(chart => chart.dispose())
      this.pieCharts = []

      dataList.forEach(item => {
        const abnormal = item.num || 0
        const normal = (item.total || 0) - abnormal
        const domId = 'pie-' + item.name
        const chart = echarts.init(document.getElementById(domId))

        chart.setOption({
          title: {
            text: item.name,
            subtext: `占比分析 用户总数:  ${item.total || 0}`,

            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: 10,
            left: 'center',
            data: ['异常', '正常']
          },
          series: [
            {
              name: '异常分布',
              type: 'pie',
              radius: '70%',
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              },
              data: [
                { value: abnormal, name: '异常' },
                { value: normal, name: '正常' }
              ]
            }
          ]
        })

        this.pieCharts.push(chart)
      })
    },
    searchdata () {
      let getGen = getData(this)
      co(getGen)
    }
  },
  ready () {
    this.searchdata()
  },
  beforeDestroy () {
    this.pieCharts.forEach(chart => chart.dispose())
  },
  watch: {
    'startdate' (val) {
      this.searchdata()
    },
    'enddate' (val) {
      this.searchdata()
    },
    'orgid' (val) {
      this.searchdata()
    }
  }

}
</script>
