<template>
    <div>
      <span class="title-1">用户</span>
      <div class="text-1">
       <div class="text-11">
        <table>
          <tr>
<!--            <td><span  style="color: #ffff2c;">{{totaluser}}</span> <br/> 现有总用户数</td>-->
<!--            <td><span  style="color: #66fade;">{{apply}}</span><br/> 报装用户数</td>-->
<!--            <td><span  style="color: #f29961;">{{hiddenuser}}</span><br/> 潜在用户数</td>-->

            <td><span  style="color: #ffff2c;">111</span> <br/> 现有总用户数</td>
            <td><span  style="color: #66fade;">222</span><br/> 报装用户数</td>
            <td><span  style="color: #f29961;">333</span><br/> 潜在用户数</td>
          </tr>
        </table>
       </div>
       <div class="text-12">
       <div id="textuser"></div>
       </div>
      </div>
      <img class="img-bottom" src="../../../../../static/NewManageHome/1.gif" />
    </div>
</template>

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

    export default {
        name: "TextUser",
      data() {
        return {
          xc: '',
          usernum: [
            {value: 1048, name: '民用'},
            {value: 735, name: '非民用'},
            {value: 580, name: '民用锅炉'},
          ],     //用户数据
          usernumstring: [],
          totaluser: 11,   //总用户数
          hiddenuser: 22, //潜在用户数
          unit: [],        //用户数单位
          resdata: [],    //用户数据
          resdatapie: [],  //饼图数据
          resdataapply: 0,  //报建用户数
          apply: 33,  //报建用户数
          timer:'',
        }
      },
      methods: {
        //绘图
        setBar() {
          this.$parent.loadnum++
          this.xc = this.$echarts.init(document.getElementById('textuser'))
          console.log('图表信息~~~~~~~~~~~~~~~')
          console.log(this.xc)
          var scale=this.$parent.$parent.scale*0.8
          // DataSql.dataunitarray(this, 'usernum', 'usernumstring')
          var echartData = this.usernum
          // var echartData1 = this.usernumstring
          var rich = {
            blue: {
              color: '#15dce2',
              fontSize: 12 * scale,
              align: 'center',
              padding: [15*scale, 0, 15*scale, 0]
            }
          }
          var total = 0; //用户总和
          var result = 12;
          // echartData.forEach(function (value) {
          //   total += parseFloat(value.value);
          // });
          console.log(total,'asda')
          var index = total.toString().length
          // if (index > 4) {
          //   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', '#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 * scale,

                }
              },
              {
                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*scale,
              triggerOn:'mousemove',
              padding:10*scale,
                textStyle:{
                    fontSize:18*scale
                },
              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 * scale,
              itemHeight: 10 * scale,
              textStyle: {
                fontSize: 12 * scale,
                padding: [0, 0, 0, 4 * scale],
                color: '#ffffff'
              },
              data: ['民用', '非民用', '民用锅炉']
            },
            series: [
              {
                name: '总用户数',
                type: 'pie',
                radius: ['55%', '75%'],
                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() {
          // let sqldata = DataSql.getData(this, 'user',{}, 'resdata')
          // co(sqldata)
          // let sqldatapie = DataSql.getData(this,'useri',{}, 'resdatapie')
          // co(sqldatapie)
          // let sqldataone = DataSql.getData(this,'userapply',{}, 'resdataapply')
          // co(sqldataone)
            let sqldataone = DataSql.getData(this,'getUserifo',{}, 'resdata')
            co(sqldataone)
            let sqldataone1 = DataSql.getData(this,'getUsersort',{}, 'resdataapply')
            co(sqldataone1)
        },
          resize() {
            console.log('刷新用户')
              if(this.timer!=''){
                  this.resdata.splice(0,this.resdata.length)
                  this.resdataapply.splice(0,this.resdataapply.length)
                  clearInterval(this.timer);
              }
              this.searchdata()
          },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },

      watch: {
        // 监听用户数据并进行绘图
        'usernum': {
          deep: true,
          handler(val) {

            this.setBar()

          }
        },
        'resdata': {
          deep: true,
          handler(val) {
              if(this.resdata.length<1){
                  return
              }
            // this.usernum = []
              // let result = {}
              // result.name = '民用'
              // result.value = this.resdata[0]['民用']
              // this.usernum.push(result)
              // let result1 = {}
              // result1.name = '非民用'
              // result1.value = this.resdata[0]['非民用']
              // this.usernum.push(result1)
              // let result2 = {}
              // result2.name = '民用锅炉'
              // result2.value = this.resdata[0]['民用锅炉']
            this.usernum=this.resdata
          }
        },
        'resdataapply': {
          deep: true,
          handler(val) {
              var self=this
             this.resdataapply.forEach(function (row) {
                 if(row.name=='现有用户'){
                     self.totaluser = DataSql.dataunit(row.value)
                 }
                 if(row.name=='潜在用户'){
                     self.hiddenuser = DataSql.dataunit(row.value)
                 }
                 if(row.name=='报建用户'){
                     self.apply = DataSql.dataunit(row.value)
                 }
             })
          }
        },
      },

      ready() {
        // 拼接sql，请求后台
        // this.searchdata()
        this.setBar()
      }

    }
</script>

<style scoped>

</style>
