<template>
  <div id="expiremeter" style="height: 100%;width:100%"></div>
</template>

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

  export default {
    name: 'expiremeter',
    data() {
      return {
        xc: '',
        legend: [],
        sdata: [],
        sum_meter: 0,
        totalArr: []
      }
    },
    ready() {
      this.setBar()
    },
    methods: {
      calSingleMonth(res){
        let data = res
        for(let i = 1;i<data.length;i++){
          if(data[i]&&data[i-1])
            data[i] -= data[i-1]
        }
        return data;
      },
      async setBar() {
        let http = new HttpResetClass()
        await http.load('post', 'api/af-revenue/sql/getTenYearsMaturityMeter', {data: {}}, {
          rejectMsg: null,
          resolveMsg: null
        }).then((res) => {
          console.log('十年到期换表')
          console.log(res)
          let january = 0
          let february = 0
          let march = 0
          let april = 0
          let may = 0
          let june = 0
          let july = 0
          let august = 0
          let september = 0
          let october = 0
          let november = 0
          let december = 0
          res.data = this.calSingleMonth(res.data)
          for (let i = 0; i < res.data.length; i++) {
            let arr = []
            this.legend.push(res.data[i].tgsjbm + '' + res.data[i].child_total)
            this.sum_meter += parseInt(res.data[i].child_total)
            arr[0] = res.data[i].january
            arr[1] = res.data[i].february
            arr[2] = res.data[i].march
            arr[3] = res.data[i].april
            arr[4] = res.data[i].may
            arr[5] = res.data[i].june
            arr[6] = res.data[i].july
            arr[7] = res.data[i].august
            arr[8] = res.data[i].september
            arr[9] = res.data[i].october
            arr[10] = res.data[i].november
            arr[11] = res.data[i].december
            this.sdata.push(arr)
            january = january + res.data[i].january
            february = february + res.data[i].february
            march = march + res.data[i].march
            april = april + res.data[i].april
            may = may + res.data[i].may
            june = june + res.data[i].june
            july = july + res.data[i].july
            august = august + res.data[i].august
            september = september + res.data[i].september
            october = october + res.data[i].october
            november = october + res.data[i].november
            december = october + res.data[i].december
          }


          this.totalArr = [january, february, march, april, may, june, july, august, september, october, november, december]
          console.log('===========================================totalArr')
          console.log(this.totalArr)
          console.log('this.legend=============================', this.legend)
          console.log('this.sdata22222222', this.sdata)


        })
        this.xc = this.$echarts.init(document.getElementById('expiremeter'))
        var data = {

          area: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // legend: ['城东分公司', '城西分公司', '三供一业', '城南分公司','城北分公司'],
          data: this.sdata

        }
        var colors = ['#e87689', '#ef9861', '#9a7efa', '#42a8ef', '#6fd9d0']

        var option = {
          title: [{
            text: "累计十年到期表更换数",
            top: 0,
            left: 200,
            textStyle: {
              fontSize: 16,
              color: '#fff'
            },

          }, {
            text: this.sum_meter,
            left: 370,
            textStyle: {
              fontSize: 22,
              color: '#FEE449'
            }
          }],
          color: colors,
          legend: {
            top: 20,
            left: 150,
            itemWidth: 15,
            itemHeight: 7,
            // padding: [5, 10],
            textStyle: {
              fontSize: 14,
              color: '#96A4F4',
              padding: [3, 0, 0, 0]
            },
            formatter: function (item) {
              console.log('item====================')
              console.log(item)
              if (item.indexOf('业') === 3) {
                console.log('进来了=============')
                return item.substr(0, 4) + '\n' + item.substr(4, item.length)
              } else
                return item.substr(0, 5) + '\n' + item.substr(5, item.length)

            },
            data: this.legend
          },
          grid: {
            left: '3%',
            right: '10%',
            bottom: '13%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'width:auto;height:auto;',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              console.log('==========================parmas')
              console.log(params)
              var res = params[0].name;
              for (var i = 0; i < params.length; i++) {
                console.log(params[i])
                if (params[i].seriesName.indexOf('业') === 3) {
                  console.log('进来了=============')
                  res += "<br>" + params[i].seriesName.substr(0, 4) + ':' + params[i].data
                } else
                  res += "<br>" + params[i].seriesName.substr(0, 5) + ':' + params[i].data
              }
              return res;

            },
          },
          xAxis: {
            name: '近12月',
            type: 'category',
            axisLabel: {
              color: '#96A4F4'
            },
            axisLine: {
              lineStyle: {
                color: '#96A4F4'
              },
              width: 5
            },
            axisTick: {
              show: false,
            },
            data: data.area
          },
          yAxis: {
            name: '数量',
            type: 'value',
            axisLabel: {
              color: '#96A4F4'
            },
            axisLine: {
              lineStyle: {
                color: '#96A4F4'
              },
              width: 5
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(150, 164, 244, 0.3)'
              }
            },
          },
          series: []
        };
        console.log('option===============================option')
        console.log(this.legend.length)
        console.log(data.data)
        for (var i = 0; i < this.legend.length; i++) {
          // debugger
          console.log('option===============================')
          option.series.push({
            name: this.legend[i],
            type: 'bar',
            stack: '详细',
            barWidth: '30',

            // label: {
            //   show: true,
            //   position: 'top',
            //   fontSize :12,
            //   formatter:function(params){
            //     console.log(params.data)
            //     if(params.data<=0){
            //       return ""
            //     }
            //     return params.value
            //   }
            // },
            data: data.data[i]
          })

        }

        option.series.push({
          name: '总量',
          type: 'bar',
          barGap: "-100%",
          barWidth: '30',
          z: -1,
          label: {
            show: true,
            position: 'top',
            fontSize: 12,
            formatter: function (params) {
              // console.log(params.data)
              if (params.data <= 0) {
                return ""
              }
              return params.value
            }
          },
          data: this.totalArr
        })
        this.xc.setOption(option)
        console.log('aaaaaaaaa')
        console.log('执行了~~~~~~~~~~~~~~~')
      },
    }
  }

</script>

<style scoped>

</style>
