<template>
  <div>
    <div class="label t1" @click="drillclick" >{{title}}</div>
    <div id="usergascontrast"></div>
  </div>
</template>

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

  export default {
    name: "user-gas",
    props: {
      listenheight: String,
      f_filiale: String,
    },
    data() {
      return {
        title: '主要用户展示',
        principaluser: [],
        principalstring: [],
        usertag1: false,
        resdata: []
      }
    },
    methods: {
      // 三级页面点击入口
      drillclick() {
        var initdatatr = {
          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-4') + '-01-01 00:00:00',
          endDate: Util.toStandardDateString() + ' 00:00:00',
          param: '',
          param1: '',
          listparam: '',
        }
        this.$emit('drill', 'mainuser', 'usergas', this.title, initdatatr)
        this.$emit('drilldata', this.principaluser)
      },
      setBar(id) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale=this.$parent.$parent.$parent.scale
        var visits = []
        var grade = []
        var l = this.principaluser.length
        for (var i = 0; i < l; i++) {
          let s = this.principaluser[l - 1 - i]
          grade.push(s.name)
          visits.push(s.value)
        }
        var echartData1 = this.principalstring
        var data = {
          grade: grade,
          visits: visits,
        }
        var rich = {
          blue: {
            color: '#f3c832',
            fontSize: 16 * scale,
            align: 'center',
            padding: [-12*scale, 0, 0, 0]
          }
        }
        this.xc.setOption({
          title: [
            {
              text: '售气量top5',
              // padding:[0,0,'1%',0],
              x: '45%',
              textStyle: {
                align: 'left',
                color: '#fff',
                fontSize: 14 * scale
              }
            },
          ],
          grid: {
            left: '30%',
            right: '14%',
            height: '85%',
            top: '6%',
            bottom: '0'
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              // margin: 10,
              show: true,
              color: '#6fd9d0',
              fontSize: 12 * scale,
              formatter: function (value, index) {
                //进行客户名称截取换行
                var s = ''
                // 长度超过10个字符进行换行
                if (value.toString().length > 10 && value.toString().length < 20) {
                  var s0 = value.toString().substring(0, 10)
                  var s1 = value.toString().substring(10, value.toString().length)
                  s = s0 + '\n' + s1
                  return s
                }
                // 长度超过20个字符进行再次换行
                if (value.toString().length > 19) {
                  var s0 = value.toString().substring(0, 10)
                  var s1 = value.toString().substring(10, 20)
                  var s2 = value.toString().substring(20, value.toString().length)
                  s = s0 + '\n' + s1 + '\n' + s2
                  return s
                }
                s = value.toString()
                return s;
              }
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
          series: [{
            type: 'bar',
            barGap: '-99%',
            barWidth: '25%',
            itemStyle: {
              normal: {
                barBorderRadius: 12 * scale,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6fd9d0'
                  }, {
                    offset: 1,
                    color: '#6fd9d0'
                  }]
                }
              },
            },
            max: 1,
            labelLine: {
              show: true,
            },
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                for (var i = 0; i < echartData1.length; i++) {
                  // 对比列名,显示单位化后的数据
                  if (echartData1[i].name == params.name) {
                    return '{blue|' + echartData1[i].value + '}\n';
                  }
                }
              },
              rich: rich,
            },
            data: data.visits,
          }]
        })
      },
      //请求后台数据
      searchdata(year) {
        let sqldata = DataSql.getData(this, 'usergas',{startDate:year,f_filiale:this.$parent.$parent.f_filiale}, "resdata")
        co(sqldata)
      },
      resize() {
        // this.$parent.$parent.changeresize(this.xc)
      }
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          this.principaluser = this.resdata
          console.log(this.resdata, '主要用户数据')
        }
      },
      // 监听用户数据并进行绘图
      'principaluser': {
        deep: true,
        handler(val) {
          DataSql.dataunitarray(this, 'principaluser', 'principalstring')
          this.setBar('usergascontrast')
          this.$parent.loaddata++
        }
      },
      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      }
    },
    ready() {
      // 拼接sql，请求后台
      var year = Util.toStandardDateString()
      year = year.toString().substring(0, 4)
      year = eval(year + '-1')
      this.searchdata(year)
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 1.85rem;
    color: #fff;
    width: 100%;
    height: 9%;
  }
  .t1{
    color: #4bf2ff;
  }
</style>
