<style scoped>

</style>
<template>
  <div>
    <span class="title-1">用气性质分布图</span>
    <div class="text-1">
      <div id="TextGasProperties"></div>
    </div>
    <img class="img-bottom" src="/static/NewManageHome/1.gif"/>
  </div>
</template>

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


  export default {
    name: "TextGasProperties",
    props: ['orgid'],
    data() {
      return {

        xc: '',
        timer: '',
        resdata: [],
        name: [],
        value: [],
        start: 0,
        end: 2,
        echartData:[]
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('TextGasProperties'))
        var echartData = this.echartData
        var rich = {
          blue: {
            color: '#15dce2',
            fontSize: 12 ,
            align: 'center',
            padding: [15, 0, 15, 0]
          }
        }
        var total = 0; //用户总和
        var result = ''
        echartData.forEach(function (value) {
          total +=value.value;
        });
        var index = total.toString().length
        if (index > 4) {
          console.log('total---------------------------------')
          console.log(total)
          var t = total.toString().substring(0, index - 4)
          var s = total.toString().substring(index - 4, index - 3)
          var l = total.toString().substring(index - 3, index - 2)
          if (l > 4) {
            s = eval(s + '+1')
          }
          if (s > 9) {
            s = 0
            t = eval(t + '+1')
          }
          result = t + '.' + s + '万'
        }
        // else {
        //   result=total
        // }
        var color= ['#6fd9d0', '#ede61f', '#3a6cb2','#6d9bdc']
        function appendBaseColor(dataList, colorList, opacity){
          const temp = [];
          for (let i in dataList) {
            const tempObj = {
              ...dataList[i],
              itemStyle: {
                color: colorList[i],
                opacity: opacity
              }
            };
            temp.push(tempObj)
          }
          return temp;
        }
        var oroptionmapjsonr_charts=this.xc
        var option={
          title: [
            {
              text: '总客户数',
              left: '44%',
              top: '25%',
              textStyle: {
                color: '#ffffff',
                fontSize: 16 ,

              }
            },
            {
              text: result,
              left: '45%',
              top: '35%',
              padding: [10 , 10 ],
              textStyle: {
                color: '#00e2ea',
                fontSize: 16 ,

              }
            }],
          tooltip: {
            show: true,
            alwaysShowContent:true,
            backgroundColor:'#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
            triggerOn:'mousemove',
            padding:10,
            textStyle:{
              fontSize:18
            },
            formatter: function (params) {
              return  params.marker + " <span style=\"font-weight: normal\"> " + params.name + "</span>  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
            },
            enterable:true,
            position: function(point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置
              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }
              return [posX, posY];
            },
            extraCssText:'width: auto;height:auto;',
          },
          legend: {
            show:false,
            orient: 'horizontal',
            icon: 'circle',
            x: 'center',
            bottom: '6%',
            itemWidth: 20 ,
            itemHeight: 10 ,
            textStyle: {
              fontSize: 12 ,
              padding: [0, 0, 0, 4 ],
              color: '#ffffff'
            },
            data: this.name
          },
          series: [
            {
              name: '总客户数',
              type: 'pie',
              radius: ['45%', '65%'],
              center: ['50%', '40%'],
              // minAngle: 15,//最小角度
              // startAngle: 300, //起始角度
              hoverAnimation: false,
              label: {
                show:false
              },
              itemStyle: {
                opacity:0
              },

              data: appendBaseColor(echartData,color,1)
            }
          ]
        }

        oroptionmapjsonr_charts.setOption(option);

        // 轮播
        let idx = 0;
        var dataLen=echartData.length
        this.timer=setInterval(()=>{
          // 取消之前选中的图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieUnSelect',
            seriesIndex: 0,
            dataIndex: idx,
          });

          idx = (idx+ 1) % dataLen;
          //console.log(app.currentIndex);
          // 选中当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'pieSelect',
            seriesIndex: 0,
            dataIndex: idx
          });
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
          });

        }, 3000)

      },
      searchdata() {
        console.log('进入用气性质查询-------------------')
        let year = Util.toStandardDateString()
        year = year.toString().substring(0, 4)
        // startDate.toString().substring(0,4)
        let sqldata = DataSql.getData(this, 'gasproperties', {orgid: this.orgid}, 'resdata')
        co(sqldata)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          clearInterval(this.timer);
          this.echartData=[]
          this.name=[]
          this.value=[]
          console.log('resdata监听 进入用气性质查询====================================')
          console.log(val)
          let name=[]
          for (let i = 0; i < val.length; i++) {
            console.log('1111111111111111111111111111111111111111111111')
            console.log(val[i]===null)
            if(val[i].name===null){
              name.push('其他')
            }else{
              name.push(val[i].name)
            }

          }

          console.log('--------------------------------==================================sdasgdyjfashdgcqwgujefq3ty')
          console.log(name)
          console.log(name[0])
          if(name[0]==='工业用气'){
            this.value[0]=0
            this.name[0]='其他'
            for (let i = 0; i < val.length; i++) {
              this.value[i+1]=val[i].value
              this.name[i+1]=val[i].name
            }
          }
          if(name[0]==='民用用气'){
            this.value[0]=0
            this.name[0]='其他'
            this.value[1]=0
            this.name[1]='工业用气'
            for (let i = 0; i < val.length; i++) {
              this.value[i+2]=val[i].value
              this.name[i+2]=val[i].name
            }
          }
          if(name[0]==='商业用气'){
            this.value[0]=0
            this.name[0]='其他'
            this.value[1]=0
            this.name[1]='工业用气'
            this.value[2]=0
            this.name[2]='民用用气'
            for (let i = 0; i < val.length; i++) {
              this.value[i+3]=val[i].value
              this.name[i+3]=val[i].name
            }
          }
          if(name[0]==='其他'){
            for (let i = 0; i < val.length; i++) {
              var object={
                name:val[i].name===null?'其他':val[i].name,
                value:val[i].value,
              }
              console.log(val[i].value)
              console.log(val[i].name)
              this.echartData.push(object)
              console.log( this.echartData)
            }
          }
          this.setBar()
        }
      },
      'orgid'(val) {
        console.log('进入orgid监听===================12312333333333333====')
        console.log(val)
        console.log(this.orgid)
        clearInterval(this.timer);

        this.searchdata()
      },
    },
    ready() {
      // this.searchdata()
    }
  }
</script>

<style scoped>

</style>
