<template>
  <div>
    <div class="f1">
      <div class="label">客户</div>
      <div class="f2">
        <table>
          <tr>
            <td><span v-model="totaluser">{{totaluser}}</span><br/><font size="4">现有总客户</font></td>
            <td><span v-model="apply">{{apply}}</span><br/><font size="4">民用生活用气户数</font></td>
            <td><span v-model="boiler">{{boiler}}</span><br/><font size="4">民用壁挂锅炉户数</font></td>
            <td><span v-model="hiddenuser">{{hiddenuser}}</span><br/><font size="4">非民用户数</font></td>
          </tr>
        </table>
      </div>
    </div>
    <div id="userdata" class="f3"></div>
  </div>
</template>

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

  export default {
    name: "user-module",
    props: {
      listenheight: String,
      f_filiale:String,
    },
    data() {
      return {
        xc: '',
        usernum: [],     //用户数据
        usernumstring: [],
        totaluser: '',   //总用户数
        hiddenuser: '', //潜在用户数
        boiler:'',//民用锅炉
        unit: [],        //用户数单位
        resdata: [],    //用户数据
        resdatapie: [],  //饼图数据
        resdataapply: 0,  //报建用户数
        apply: '',  //报建用户数
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      //绘图
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('userdata'))
        var scale=this.$parent.$parent.$parent.scale*1.1
        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 = total
        }
        this.xc.setOption({
          title: [
            {
              text: '总客户数',
              left: '45%',
              top: '31%',
              textStyle: {
                color: '#ffffff',
                fontSize: 10 ,

              }
            },
            {
              text: result,
              left: '46%',
              top: '40%',
              textStyle: {
                color: '#00e2ea',
                fontSize: 10 ,

              }
            }],
          tooltip: {
            show: true,
            alwaysShowContent:true,
            backgroundColor:'rgba(2, 59, 63, 0.6)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
              padding:10*scale,
              textStyle:{
                  fontSize:16*scale
              },
            triggerOn:'mousemove',
              padding:10*scale,
              textStyle:{
                  fontSize:16*scale
              },
            formatter: function (params) {
              return  params.marker + " " + params.name + "  <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: {
            orient: 'horizontal',
            icon: 'circle',
            x: 'center',
            bottom: '6%',
            itemGap: 20,
            itemWidth: 20 ,
            itemHeight: 10 ,
            textStyle: {
              fontSize: 12 ,
              // padding: [0, 0, 0, 4 * scale],
              color: '#ffffff'
            },
            data: ['民用', '非民用', '民用锅炉']
          },
          series: [
            // {
            //   name: 'Line 1',
            //   type: 'pie',
            //   animation: false,
            //   clockWise: false,
            //   radius: ['35%', '36%'],
            //   center: ['50%', '49%'],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false
            //       },
            //       labelLine: {
            //         show: false
            //       },
            //     }
            //   },
            //   hoverAnimation: false,
            //   tooltip: {
            //     show: false
            //   },
            //   data: [{
            //     value: 100,
            //     name: '02',
            //     itemStyle: {
            //       normal: {
            //         color: '#29b7ff',//未完成的圆环的颜色
            //         label: {
            //           show: false
            //         },
            //         labelLine: {
            //           show: false
            //         }
            //       }
            //     }
            //   }]
            // },
            {
              name: '总客户数',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '42%'],
              minAngle: 15,//最小角度
              startAngle: 300, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f', '#6d9bdc'],
              label: {
                show:false
                // normal: {
                //   borderWidth: 20 * scale,
                //   borderRadius: 4 * scale,
                //   formatter: function (params, ticket, callback) {
                //     for (var i = 0; i < echartData1.length; i++) {
                //       if (echartData1[i].name == params.name) {
                //         return '{blue|' + params.name + '}{blue|' + echartData1[i].value + '}\n';
                //       }
                //     }
                //   },
                //   padding: [0, -80 * scale],
                //   rich: rich,
                // }
              },
              labelLine: {
                normal: {
                  length: 25 * scale,
                  length2: 90 * scale,
                }
              },
              data: echartData
            }
            // , {
            //   name: 'Line 2',
            //   type: 'pie',
            //   animation: false,
            //   clockWise: false,
            //   radius: ['54%', '55%'],
            //   center: ['50%', '49%'],
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: false
            //       },
            //       labelLine: {
            //         show: false
            //       },
            //     }
            //   },
            //   hoverAnimation: false,
            //   tooltip: {
            //     show: false
            //   },
            //   data: [{
            //     value: 100,
            //     name: '02',
            //     itemStyle: {
            //       normal: {
            //         color: '#29b7ff',//未完成的圆环的颜色
            //         label: {
            //           show: false
            //         },
            //         labelLine: {
            //           show: false
            //         }
            //       }
            //     }
            //   }
            //   ]
            // }
          ]
        }, true)

        let idx = 0;
        var dataLen=echartData.length
        var oroptionmapjsonr_charts=this.xc
        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',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
        co(sqldata)
        // let sqldatapie = DataSql.getData(this,'useri',{f_filiale:this.$parent.$parent.f_filiale}, 'resdatapie')
        // co(sqldatapie)
        // let sqldataone = DataSql.getData(this,'userapply',{f_filiale:this.$parent.$parent.f_filiale}, 'resdataapply')
        // co(sqldataone)
      },
    },
    watch: {
      // 监听用户数据并进行绘图
      'usernum': {
        deep: true,
        handler(val) {
          console.log('----------------------------------------------------------')
          console.log(this.usernum,'usernum')
          var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
          var value1 = this.usernum[0].value
          var value2 =this.usernum[1].value
          var value3 =this.usernum[2].value
          this.totaluser = DataSql.dataunit(value)
          this.apply = DataSql.dataunit(value1)
          this.hiddenuser = DataSql.dataunit(value2)
          this.boiler = DataSql.dataunit(value3)
          this.setBar()
          this.$parent.loaddata++
        }
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      },
      '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)
        }
      },


      'f_filiale'(){
        clearInterval(this.timer);
        this.searchdata()
      }
    },

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

<style scoped>

  @media screen and (max-width: 1920px) {
    /*标题样式*/
    .label {
      font-size: 1.85rem;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }

    /*标题及用户数据表格样式*/
    .f1 {
      height: 31%;
      width: 100%;
    }

    /*用户数据表格样式*/
    .f2 {
      /*height: 72px;*/
      /*width: 450px;*/
      /*margin-left: 20px*/
      padding: 2% 1%;
      height: 92%;
      width: 100%;
    }

    /*echarts绘制区域样式*/
    .f3 {
      height: 68.3%;
      width: 100%;
      padding-top: 3%;
    }

    table {
      width: 100%;
      height: 100%;
    }

    td {
      /*height: 72px;*/
      /*width: 140px;*/
      height: 100%;
      width: 18%;
      font-size: 1.4rem;
      text-align: center;
      color: #ffffff;
    }

    /*td加载图片*/
    .td-1 {
      /*width: 40px;*/
      width: 1%;
      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
      /*background-repeat: no-repeat;!**!*/
      /*background-size: 80% 40%;*/
      /*background-position: center;*/
    }

    span {
      font-size:2.2rem;
      font-weight: bolder;
      color: #69d8d2;
    }
  }
  @media screen and (max-width: 1366px) {
    /*标题样式*/
    .label {
      font-size: 1.85rem;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }

    /*标题及用户数据表格样式*/
    .f1 {
      height: 31%;
      width: 100%;
    }

    /*用户数据表格样式*/
    .f2 {
      /*height: 72px;*/
      /*width: 450px;*/
      /*margin-left: 20px*/
      padding: 2% 1%;
      height: 92%;
      width: 100%;
    }

    /*echarts绘制区域样式*/
    .f3 {
      height: 68.3%;
      width: 100%;
      padding-top: 3%;
    }

    table {
      width: 100%;
      height: 100%;
    }

    td {
      /*height: 72px;*/
      /*width: 140px;*/
      height: 100%;
      width: 18%;
      font-size: 1rem;
      text-align: center;
      color: #ffffff;
    }

    /*td加载图片*/
    .td-1 {
      /*width: 40px;*/
      width: 1%;
      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
      /*background-repeat: no-repeat;!**!*/
      /*background-size: 80% 40%;*/
      /*background-position: center;*/
    }

    span {
      font-size:1.8rem;
      font-weight: bolder;
      color: #69d8d2;
    }
  }

</style>
