<template>
  <div>
    <div class="f1">
      <div class="label">用户</div>
      <div class="f2">
        <table>
          <tr>
            <td class="td-1"></td>
            <td><span v-model="totaluser">{{totaluser}}</span><br/>现有总用户</td>
            <td class="td-1"></td>
            <td><span>228万</span><br/>开发用户数</td>
            <td class="td-1"></td>
            <td><span>228万</span><br/>潜在用户数</td>
          </tr>
        </table>
      </div>
    </div>
    <div id="userdata" class="f3"></div>
  </div>
</template>

<script>
  import co from 'co'
  import {HttpResetClass} from 'vue-client'

  let getData = function* (self) {
    let load = new HttpResetClass()
    load.load("POST", 'rs/sql/singleTableParam',
      {data: self.sqlcondition},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        let result = {}
        result.name = '民用'
        result.value = res.data[0]['民用']
        self.usernum.push(result)
        let result1 = {}
        result1.name = '非民用'
        result1.value = res.data[0]['非民用']
        self.usernum.push(result1)
        let result2 = {}
        result2.name = '民用锅炉'
        result2.value = res.data[0]['民用锅炉']
        self.usernum.push(result2)
      })
  }

  export default {
    name: "user-module",
    props:{
      listenheight:String,
    },
    data() {
      return {
        xc: '',
        usernum: [],
        totaluser: '',
        unit: [],
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('userdata'))
        var scale = 0.8;
        var echartData = this.usernum
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 10 * scale,
            padding: [11, 0, 11, 0]
          },
          blue: {
            color: '#15dce2',
            fontSize: 14 * scale,
            align: 'center',
            padding: [10, 0]
          }
        }
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc.setOption({
          title: [
            {
              text: '总用户数',
              left: '26%',
              top: '38%',
              textStyle: {
                color: '#ffffff',
                fontSize: 10 * scale,

              }
            },
            {
              text: total,
              left: '28%',
              top: '47%',
              padding: [10 * scale, 10 * scale],
              textStyle: {
                color: '#00e2ea',
                fontSize: 10 * scale,

              }
            }],
          legend: {
            orient: 'vertical',
            icon: 'circle',
            x: '73%',
            bottom: '6%',
            right: '3%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 14 * scale,
              padding: [0,0, 0, 4 * scale],
              color: '#ffffff'
            },
            data: ['民用', '非民用', '民用锅炉']
          },
          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['25%', '26%'],
              center: ['35%', '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: ['30%', '40%'],
              center: ['35%', '49%'],
              minAngle: 15,//最小角度
              startAngle: 300, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f', '#6d9bdc'],
              label: {
                normal: {
                  borderWidth: 20 * scale,
                  borderRadius: 4 * scale,
                  formatter: function (params, ticket, callback) {
                    var total = 0; //用户总数量
                    var percent = 0;
                    echartData.forEach(function (value, index, array) {
                      total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{blue|' + params.name + '}{blue|' + params.value + '}\n\n';
                  },
                  padding: [0, -70 * scale],
                  rich: rich,
                }
              },

              labelLine: {
                normal: {
                  length: 15 * scale,
                  length2: 60 * scale,
                  lineStyle: {
                    formatter: function (params, ticket, callback) {
                      var total = 0; //用户总数量
                      var percent = 0; //用户占比
                      echartData.forEach(function (value, index, array) {
                        total += value.value;
                      });
                      percent = ((params.value / total) * 100).toFixed(1);
                      return '{white|     ' + params.name + '}\n{hr|}\n{yellow|     ' + params.value + '}\n{blue|    ' + percent + '%}';
                    },
                  }
                }
              },
              data: echartData
            }, {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['45%', '46%'],
              center: ['35%', '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)
      },
      searchdata() {
        var self = this
        let sqldata = getData(this)
        co(sqldata)
      },
      dataunit(value) {
        var index = value.toString().length
        if (index > 4) {
          var i = value.toString().substring(0, index - 4)
          var s = value.toString().substring(index - 4, index - 3)
          this.totaluser = i + '.' + s + '万'
        }else {
          this.totaluser=value
        }

      },
    },
    watch: {
      'usernum':{
        deep:true,
        handler(val) {
          console.log(this.usernum,'测试点')
          var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
          this.dataunit(value)
          this.setBar()
        }
      },
      'listenheight':{
        deep:true,
        handler(val) {
          if(this.listenheight!==''){
            this.$parent.$parent.changeresize(this.xc)
          }
        },
        immediate:true
      }
    },
    ready() {
      var items = '(aa.qq-cc.ee) 民用, bb.ww 非民用, cc.ee 民用锅炉'
      var tablename = '(select count(f_userinfo_id) qq from t_userinfo where f_user_type=\'民用\') aa,\n' +
        '\n' +
        '(select count(f_user_type) ww from t_userinfo where f_user_type=\'非民用\') bb,\n' +
        '\n' +
        '(select count(b.f_userinfo_id) ee from T_USERINFO a, T_DEVICES b where a.F_USERINFO_ID=b.f_userinfo_id and F_DEVICES_TYPE=\'壁挂炉\' and a.f_user_type=\'民用\') cc'
      var condition = "1=1"
      this.sqlcondition = {items: items, tablename: tablename, condition: condition}
      this.searchdata()
    }
  }
</script>

<style scoped>

  .label {
    font-size: 0.85em;
    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%;
  }

  .f3 {
    height: 68.3%;
    width: 100%;
  }

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

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

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

  img {

  }

  span {
    font-size: 12px;
    color: #69d8d2;
  }
</style>
