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

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

  export default {
    name: "NoBuyGas",
    data() {
      return {
        title: '长期未购气用户统计',
        xc: '',
        resdata: [],
        nobuygasdata: [],
      }
    },
    methods: {
      setBar(id) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale = 0.8
        var xAxisData = [];
        var legendData = ['用户数量'];
        var serieData = [];
        var metaDate = []
        var num = 0
        for (var i = this.nobuygasdata.length; i > 0; i--) {
          xAxisData.push(this.nobuygasdata[i - 1].name)
          metaDate.push(this.nobuygasdata[i - 1].value)
          num = num + this.nobuygasdata[i - 1].value
        }
        this.$parent.suspiciousnum = this.$parent.suspiciousnum + num
        xAxisData.push("")
        var yname = ' 月份'
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[0],
            type: "bar",
            stack: "总量",
            barWidth: '40%',
            barGap: "20%",
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [
                    "#ffe8cb",
                    "#fdc784",
                    "#ffa530",
                    "#ff9000",
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  },
                  position: "top",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: metaDate,
          }
          serieData.push(serie)
        }
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
        this.xc.setOption({
          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},
          color: colors,
          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", containLabel: true}, dataZoom: [{
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            left: '9%',
            bottom: -5,
            start: 2,
            end: 90 //初始化滚动条
          }],

          tooltip: {
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                if (item.seriesName !== 'ser') {
                  result += item.marker + " " + item.seriesName + " : " + item.value + "</br>";
                }
              });
              return params[0].axisValue + '月 <br/> ' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 14 * scale,
                color: '#15dce2',
                padding: [48 * scale, 0, 0, -70 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '用户数量',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [-10 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {interval: 0, textStyle: {color: '#15dce2', fontSize: 14 * scale}},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
      },
      // 查询sql
      sqlsearch() {
        var date = DataSql.toBeforeDate(365)
        let getData = DataSql.getData(this,  'longnotbuygas',{startDate:date}, 'resdata')
        co(getData)
      },
      //整理数据
      processData() {
        var l = 0
        let num = [0, 0, 0, 0]
        this.resdata.forEach(function (s) {
          if (l < 7) {
            num[0] = num[0] + s.num
          }
          if (l > 6 && l < 9) {
            num[1] = num[1] + s.num
          }
          if (l > 8 && l < 10) {
            num[2] = num[2] + s.num
          }
          if (l > 9 && l < 11) {
            num[3] = num[3] + s.num
          }
          l++
        })
        var self = this
        let date = ['一', '二', '四', '六']
        var i = 3
        num.forEach(function (s) {
          let item = {}
          item.name = date[i]
          item.value = s
          self.nobuygasdata.push(item)
          i--
        })
        console.log(this.nobuygasdata)
      },
      // 钻取入口
      drillclick() {
        console.log(this.title)
        var total = this.nobuygasdata
        var date = DataSql.toBeforeDate(365)+ ' 00:00:00'
        var initdatatr = {
          startDate: date,
          endDate: Util.toStandardDateString() + ' 00:00:00',
          param: '',
          param1: '',
          listparam: '  al.f_operate_date>=\''+date+'\' and '
        }
        this.$emit('drill', 'longnotbuygas', 'nobuygas', this.title, initdatatr)
        this.$emit('drilldata', total)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          console.log(this.resdata, '长期未购气用户统计')
          this.processData()
          this.setBar('NoBuyGas')
          this.$parent.loaddata++
        }
      },
    },
    ready() {
      this.sqlsearch()
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    height: 8%;
  }

  #NoBuyGas {
    height: 91%;
    width: 99%;
    padding: 1% 2% 3% 2%;

  }
  .t1{
    color: #4bf2ff;
  }
</style>
