<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>
          </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: [],     //用户数据
          usernumstring: [],
          totaluser: '',   //总用户数
          hiddenuser: '', //潜在用户数
          unit: [],        //用户数单位
          resdata: [],    //用户数据
          resdatapie: [],  //饼图数据
          resdataapply: 0,  //报建用户数
          apply: '',  //报建用户数
          timer:'',
        }
      },
      methods: {
        //绘图
        setBar() {
          this.xc = this.$echarts.init(document.getElementById('textuser'))
          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 = ''
          echartData.forEach(function (value) {
            total += value.value;
          });
          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 = value
          }
         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 * scale, 10 * scale],
                textStyle: {
                  color: '#00e2ea',
                  fontSize: 16 * scale,

                }
              }],
            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)
        },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
      watch: {
        // 监听用户数据并进行绘图
        'usernum': {
          deep: true,
          handler(val) {
            var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
            this.totaluser = DataSql.dataunit(value)
            this.setBar()
            this.$parent.loaddata++
          }
        },
        'resdata': {
          deep: true,
          handler(val) {
            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.push(result2)
          }
        },
        'resdatapie': {
          deep: true,
          handler(val) {
            var totalnum = 0
            for (var i = 1; i < 6; i++) {
              let item0 = {}
              totalnum = totalnum + this.resdatapie[i].totalnum
            }
            this.hiddenuser = DataSql.dataunit(totalnum / 5,)
          }
        },
        'resdataapply': {
          deep: true,
          handler(val) {

            this.apply = DataSql.dataunit(this.resdataapply[0].totalnum)
          }
        }
      },

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

<style scoped>

</style>
