<template>
  <div>
    <div class="label t1" @click="drillclick">{{title}}</div>
    <div id="ComparedGas"></div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'
  import * as Util from '../../../Util'

  export default {
    name: "ComparedGas",
    data() {
      return {
        title: '往期购气对比',
        xc: '',
        comparedgas: [],
        resdata: [],
        pastscale: '',
      }
    },
    methods: {
      setBar(id) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale=this.$parent.$parent.$parent.scale
        let echartData = this.comparedgas
        let legendname = []
        this.comparedgas.forEach(function (s) {
          legendname.push(s.name)
          console.log("监控---往期购气量================"+legendname)
        })
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 14 * scale,
            padding: [6, 4]
          },
          blue: {
            color: '#e1e52a',
            fontWeight:'bolder',
            fontSize: 16 * scale,
            align: 'center',
            padding: [6, 4]
          },
          hr: {
            borderColor: '#64d8d4',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
        }
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc.setOption({
          title: [],
          legend: {
            orient: 'horizontal',
            itemGap: 30,
            icon: 'circle',
            x: '26%',
            bottom: '2%',
            itemWidth: 20 ,
            itemHeight: 10 ,
            textStyle: {
              fontSize: 12 ,
              color: '#ffffff'
            },
            data: legendname
          },
          grid: {
            left: '35%',
            right: '35%',
            top: '0',
            bottom: '0'
          },
          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['30%', '31%'],
              center: ['50%', '40%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }]
            },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['35ddd%', '50%'],
              center: ['50%', '40%'],
              minAngle: 15,//最小角度
              startAngle: 300, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f'],
              label: {
                normal: {
                  borderWidth: 1,
                  borderRadius: 4,
                  backgroundColor: '#004b5c',
                  borderColor: '#64d8d4',
                  formatter: function (params, ticket, callback) {
                    var total = 0; //用户总数量
                    var percent = 0;
                    echartData.forEach(function (value, index, array) {
                      total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{white|' + params.name + '}\n{hr|}\n{blue|  ' + params.value + '}{blue|   ' + percent + '%}';
                  },
                  rich: rich,
                }
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 12,
                }
              },
              data: echartData
            },
            {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['54%', '55%'],
              center: ['50%', '40%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
              ]
            }
          ]
        }, true)
      },
      // 查询sql
      sqlsearch() {
        var date = Util.toStandardDateString()
        date = eval(date.toString().substring(0, 4) + '-1')
        var param = date + '-01-01 00:00:00'
        var param1 = eval('1+' + this.pastscale)
        var param2 = eval('1-' + this.pastscale)
        let getData = DataSql.getData(this, 'pastscale',{startDate:param,scale1:param1,scale2:param2,f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(getData)
      },
      // 处理数据
      processData() {
        let item1 = {}
        item1.name = '高于往期购气量' + eval(this.pastscale + '*100') + '%'
        item1.value = this.resdata[0]['above']
        this.comparedgas.push(item1)
        let item2 = {}
        item2.name = '低于往期购气量' + eval('100-' + this.pastscale + '*100') + '%'
        item2.value = this.resdata[0]['below']
        this.comparedgas.push(item2)
        this.$parent.suspiciousnum = this.$parent.suspiciousnum + item2.value
      },
      // 钻取入口
      drillclick() {
        var total = this.comparedgas
        var initdatatr = {
          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-1') + '-01-01 00:00:00',
          endDate: Util.toStandardDateString() + ' 00:00:00',
          param: eval('1+' + this.pastscale),
          param1: eval('1-' + this.pastscale),
          listparam: '(ab.pastscale>' + eval('1+' + this.pastscale) + ' or ab.pastscale<' + eval('1-' + this.pastscale) + ') and '
        }
        this.$emit('drill', 'pastscale', 'comparedgas', this.title, initdatatr)
        this.$emit('drilldata', total)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          console.log(this.resdata, '往期购气对比')
          this.processData()
          this.setBar('ComparedGas')
          this.$parent.loaddata++
        }
      },
    },
    ready() {
      this.pastscale = '0.5'
      this.sqlsearch()
    }
  }
</script>

<style scoped>
  .label {
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }

  #ComparedGas {
    height: 90%;
    width: 100%;
  }
  .t1{
    color: #4bf2ff;
  }
</style>
