<template>
  <div id='chart_3{{sid}}'></div>
</template>

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

  let load = new HttpResetClass()
  let getData = function * (self) {
    load.load('POST', self.sql,
      {data:self.condition},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let model = []
        for (var i = 0; i < res.data.length; i++) {
          let item = {}
          item.name = res.data[i].name
          item.value = res.data[i].value
          model.push(item)
        }
        self.set(model)
      })
  }
  export default {
    data() {
      return {
        sid: new  Date().getSeconds()
      }
    },
    props: {
      sql: String,
      condition: {
        type: Object,
        default: '1=1'
      }
    },
    ready(){
      this.getdata()
    },
    watch:{
      'condition'(val){
        this.getdata()
      }
    },
    methods: {
      getdata(){
        co(getData(this))
      },
      set(model){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('chart_3'+this.sid))

        var scaleData = model
        var rich = {
          white: {
            //color: '#ddd',
            align: 'center',
            padding: [5, 0]
          }
        };
        var placeHolderStyle = {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
          }
        };
        var data = [];
        for (var i = 0; i < scaleData.length; i++) {
          data.push({
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 30,
                borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#7777eb'
                }, {
                  offset: 1,
                  color: '#70ffac'
                }]),
                shadowColor: 'rgba(142, 152, 241, 0.6)'
              }
            }
          }, {
            value: 4,
            name: '',
            itemStyle: placeHolderStyle
          });
        }
        var seriesObj = [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [95, 100],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                //color: '#000',
                formatter: function(params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < scaleData.length; i++) {
                    total += scaleData[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + '\n{white|' + '占比' + percent + '%}';
                  } else {
                    return '';
                  }
                },
                rich: rich
              },
              labelLine: {
                show: false
              }
            }
          },
          data: data
        }];
        var option = {
          // title : {
          //   text: this.model.title,
          //   x:'center',
          //   top: '30px'
          // },
          backgroundColor: '#eee',
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          series: seriesObj
        }
        // 绘制图表
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
