<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 {
      props:[
        'orgid'
      ],
        name: "TextUser",
      data() {
        return {
          xc: '',
          usernum: [],     //用户数据
          usernumstring: [],
          totaluser: '',   //总用户数
          hiddenuser: '', //潜在用户数
          unit: [],        //用户数单位
          resdata: [],    //用户数据
          resdatapie: [],  //饼图数据
          resdataapply: 0,  //报建用户数
          apply: '',  //报建用户数
          timer:'',
          orgid:''
        }
      },
      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
          console.log('echartData---------------------dddddddddddddddddddddddddddddddddddddddddddddddd')
          console.log(echartData)
          // var echartData1 = this.usernumstring
          // 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', '#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: ['民用', '非民用', '其他']
            },
            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',{orgid:this.orgid}, 'resdata')
          co(sqldata)
        },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
      watch: {

        'resdata': {
          deep: true,
          handler(val) {
            clearInterval(this.timer);
            console.log('进入监听================================')
            console.log('val',val)
            this.usernum = []
            console.log(val.length)
            if(val.length===0){
              let result = {}
              let result2 = {}
              let result3 = {}
              result3.name='民用'
              result3.value=0
              this.usernum[2]=result3
              result.name='其他'
              result.value=0
              this.usernum[0]=result
              result2.name='非民用'
              result2.value=0
              this.usernum[1]=result2
            } else
            if(val[0].f_user_type===null){ // 如果第一个 时null
              let result = {}
              let result2 = {}
              let result3 = {}
              result.name='其他'
              result.value=val[0].num
              this.usernum[0]=result
              if(val[1]===undefined){ //如果没有第二个  后面两个都给0
                result2.name='非民用'
                result2.value=0
                this.usernum[1]=result2
                result3.name='民用'
                result3.value=0
                this.usernum[2]=result3
              }else if(val[1].f_user_type==='非民用'){ // 如果第二个是  非民用 是
                result2.name='非民用'
                result2.value=val[1].num
                this.usernum[1]=result2
                if(val[2]===undefined){ // 如果第三个 没有时
                  result3.name='民用'
                  result3.value=0
                  this.usernum[2]=result3
                }else{ // 如果 有 就是 民用
                  result3.name='民用'
                  result3.value=val[2].num
                  this.usernum[2]=result3
                }
              }else if(val[2]===undefined){ // 如果第三个没有时
                result3.name='民用'
                result3.value=0
                this.usernum[2]=result3
              }else{
                result3.name='民用'
                result3.value=val[2].num
                this.usernum[2]=result3
              }
            }else

            if(val[0].f_user_type==='非民用'){ // 如果第一个值是 非民用 其他就肯定是没有值的 那就给0
              let result = {}
              let result2 = {}
              let result3 = {}
              result2.name='非民用'
              result2.value=val[0].num
              this.usernum[1]=result2
              result.name='其他'
              result.value=0
              this.usernum[0]=result
              if(val[1]===undefined){ //如果第二值 没有 给0
                result3.name='民用'
                result3.value=0
                this.usernum[2]=result3
              }else if(val[1].f_user_type==='民用'){
                result3.name='民用'
                result3.value=val[1].num
                this.usernum[2]=result3
              }
            }else

            if(val[0].f_user_type==='民用'){ //如果第一个值为民用时 那就是 其他和非民用没值  就给这个两个补0
              let result = {}
              let result2 = {}
              let result3 = {}
              result3.name='民用'
              result3.value=val[0].num
              this.usernum[2]=result3
              result.name='其他'
              result.value=0
              this.usernum[0]=result
              result2.name='非民用'
              result2.value=0
              this.usernum[1]=result2
            }
            console.log('-------------------------------------------------------------------------------------------------')
            console.log("this.usernum=================")
            console.log(this.usernum)
            var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
            var value1 = this.usernum[2].value
            var value2 =this.usernum[1].value
            this.totaluser = DataSql.dataunit(value)
            this.apply = DataSql.dataunit(value1)
            this.hiddenuser = DataSql.dataunit(value2)

            this.setBar()
          }
        },
        'orgid'(val){
          console.log('进入orgid监听=======================')
          console.log(val)
          // this.orgid
          clearInterval(this.timer);

          this.searchdata()
        },

      },

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

      }
    }


</script>

<style scoped>

</style>
