<template lang="html">
  <div>
    <div class="label">用气性质分布图</div>
    <div id="gasdistri">
    </div>
  </div>
</template>

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

  export default {
    name: 'gasdistri',
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        parentgasname: [],
        childrengasname: [],
        resdata1: [],
        resdata2: [],
      }
    },

    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('gasdistri'))
        let legendname = []
        var parenttotal = 0
        var childrentotal = 0
        this.parentgasname.forEach(function (s) {
          parenttotal = parenttotal + s.value
          legendname.push(s.name)
        })
        this.childrengasname.forEach(function (s) {
          childrentotal = childrentotal + s.value
          legendname.push(s.name)
        })

        let echartsdata = this.childrengasname
        var userdata = this.parentgasname
        var scale = 0.8
        this.xc.setOption(
          {
            title: {
              text: '',
              subtext: '',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                if (params.name == legendname[0] || params.name == legendname[1] || params.name == legendname[2] || params.name == legendname[3]) {
                  var percentage = (params.value / parenttotal) * 100
                  return params.marker + " " + params.name + "  <span style=\"color:#64d8d4;\">" + params.value + "</span>" +
                    " <span style=\"color:#e1e52a;\">" + percentage.toString().substring(0, 5) + "%</span>"
                } else {
                  var percentage = (params.value / childrentotal) * 100
                  return params.data.parentname + "<br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;\">"
                    + params.value + "</span>" + " <span style=\"color:#e1e52a;\">" + percentage.toString().substring(0, 5) + "%</span>"
                }
              },
              extraCssText: 'width: auto;height: auto;'
            },
            legend: {
              orient: 'horizontal',
              icon: 'circle',
              x: 'center',
              y: 'bottom',
              itemWidth: 20 * scale,
              itemHeight: 10 * scale,
              textStyle: {
                fontSize: 12 * scale,
                padding: [0, 0, 0, 4],
                color: '#ffffff'
              },
              data: legendname
            },
            series: [
              {
                // name:'数量',
                type: 'pie',
                selectedMode: 'single',
                color: ['#f7cb32', '#ef7c3d', '#3d7ce5'],
                radius: [0, '26%'],
                center: ['50%', '35%'],
                label: {
                  normal: {
                    position: 'inner'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: userdata
              }, {
                name: 'Line 1',
                type: 'pie',
                animation: false,
                clockWise: false,
                radius: ['34%', '35%'],
                center: ['50%', '35%'],
                tooltip: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                  }
                },
                hoverAnimation: false,
                data: [{
                  value: 100,
                  name: '02',
                  itemStyle: {
                    normal: {
                      color: '#29b7ff',//未完成的圆环的颜色
                      label: {
                        show: false
                      },
                      labelLine: {
                        show: false
                      }
                    }
                  }
                }]
              },
              {
                // name:'数量',
                type: 'pie',
                color: ['#e5e280', '#6e93e0', '#3bdda9', '#6fd9d0', '#c7e06e', '#e68d8d'],
                label: {
                  show: false
                },
                radius: ['40%', '55%'],
                center: ['50%', '35%'],
                data: echartsdata
              }, {
                name: 'Line 2',
                type: 'pie',
                tooltip: {
                  show: false
                },
                animation: false,
                clockWise: false,
                radius: ['60%', '61%'],
                center: ['50%', '35%'],
                itemStyle: {
                  normal: {label: {show: false}, labelLine: {show: false},}
                },
                hoverAnimation: false,
                data: [{
                  value: 100,
                  name: '02',
                  itemStyle: {
                    normal: {color: '#29b7ff', label: {show: false}, labelLine: {show: false}}
                  }
                }]
              }
            ]
          }, true)
      },
      searchdata(flag) {
        let getGen = getData(this, flag)
        co(getGen)
      },
      linesql(param) {
        // 拼接sql，请求后台
        if (param == '') {
          let getGen = DataSql.getData(this, 'gasdistri',{item:param}, 'resdata1')
          co(getGen)
        } else {
          let getGen = DataSql.getData(this,'gasdistri',{item:param}, 'resdata2')
          co(getGen)
        }
      },
      resize() {
        // this.$parent.$parent.changeresize(this.xc)
      }
    },
    watch: {
      // 监听用户数据并进行绘图
      'parentgasname': {
        deep: true,
        handler(val) {
          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
            this.setBar()
            this.$parent.loaddata++
          }
        }
      },
      // 监听用户数据并进行绘图
      'childrengasname': {
        deep: true,
        handler(val) {
          if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
            this.setBar()
            this.$parent.loaddata++
          }
        }
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '' && this.listenheight !== 0) {
            // this.$parent.$parent.changeresize(this.xc)
            this.listenheight = 0
          }
        },
        immediate: true
      },
      'resdata1': {
        deep: true,
        handler(val) {
          var self = this
          this.resdata1.forEach(function (s) {
            let item = {}
            item.name = s.f_gasproperties
            item.value = s.num
            self.parentgasname.push(item)
          })
        },
      },
      'resdata2': {
        deep: true,
        handler(val) {
          var self = this
          this.resdata2.forEach(function (s) {
            let item = {}
            item.name = s.f_price_name
            item.parentname = s.f_gasproperties
            item.value = s.num
            self.childrengasname.push(item)
          })
        },
        immediate: true
      }
    },
    ready() {
      // this.searchdata()
      // this.set()
      this.linesql('')
      this.linesql('c.f_price_name,')
    },
  }
</script>
<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }

  #gasdistri {
    height: 90%;
    width: 100%;
  }
</style>
