<template>
  <div id="monitor"></div>
</template>

<script>
  import co from 'co'
  import {HttpResetClass} from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load("POST",self.url,
      {data: self.sqlcondition},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.result=res.data
      })
  }
  export default {
    name: "monitor",
    data() {
      return {
        xc:'',
        result:[],
        url:'',
        sqlcondition:{},
      }

    },
    methods: {
      setBar(id, param, data, type, formatter) {
        this.xc = this.$echarts.init(document.getElementById(id))
        let legendname=[]
        for(var i=0;i<data.length;i++){
          legendname.push(data[i]["name"])
        }
        let itemStyle = {
          normal: {
            color: function () {
              return "#" + ("0000000000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
            },
            label:{
              show: true,
              formatter: '{b} : {c} ({d}%)'
            }
          }
        }

        this.xc.setOption({
          title: {
            text:'总用户数',
            left:'center',
            top:'53%',
            padding:[24,0],
            textStyle:{
              color:'#1446ff',
              fontSize:18,
              align:'center'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: formatter,
            position: function (p) {                //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10];
            },
            extraCssText: 'width:160px;height:80px;'
          },
          legend: {
            selectedMode:false,
            formatter: function(name) {
              var total = 0;
              data.forEach(function(value, index, array) {
                total += value.value;
              });
              return total;
            },
            data: [data[0].name],
            left: 'center',
            top: 'center',
            icon: 'none',
            align:'center',
            textStyle: {
              color: "#0f58ff",
              fontSize: 19,
            },
          },
          series: [
            {
              name: '',
              type: type,
              radius: ['70%', '90%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              barWidth: '20%',
              itemStyle: itemStyle,
              emphasis: {},
              label: {
                normal: {
                  textStyle: {
                    fontSize: '10',
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: data                       //饼状图数据
            },
          ]
        }, true)
      },
      searchdata(){
        var self=this
        let sqldata=getData(this)
        co(sqldata)
        var s=setInterval(function () {
          self.$showMessage('正在加载数据,请等待...')
          if(self.result.length>0){
            self.$closeMessage()
            self.setBar('monitor', '用户数据', self.result,  'pie', '{b}: {c} ({d}%)')
            clearInterval(s)
            return
          }
        },100)

      },
    },

    ready() {
      this.url='rs/sql/singleTable_Final'
      var items='f_user_type as name,count(f_user_type) as value'
      var tablename='t_userinfo'
      var condition="f_user_state='正常' and f_user_type is not null "
      var groupitem='f_user_type'
      var orderitem='f_user_type'
      this.sqlcondition={items:items,tablename:tablename,condition:condition,groupitem:groupitem,orderitem:orderitem}
      this.searchdata()
    }
  }
</script>

<style scoped>

</style>
