<template>
  <div>
    <!-- <div class="auto" style="height: 5%;">
      <button class="btn btn-link" @click="refresh()" style="position: relative;color: #fff;top: 40%;left: 85%;">返回</button>
    </div> -->
  <div id="trend">

  </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import co from 'co'
  import {HttpResetClass} from 'vue-client'
  let getDataGen = function * (self, data, sign) {
    // 判断是年份还是月份
    console.log('sign'+ sign)
    if (sign === 'year') {
      let url = 'api/af-revenue/logic/getNetLenYear'
      // data = {f_filialeids: '150'}
      // self.xData = ['2021', '2020', '2019', '2018']
      yield self.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
        console.log(res.data)
        // let getData = res.data.data
        // for (let i = 0; i < getData.length; i++) {
        // }
        self.init()
      })
    } else {
      // self.xData = function () {
      //   var data = []
      //   for (var i = 1; i < 13; i++) {
      //     data.push(i + '月')
      //   }
      //   return data
      // }()
      // let url = '/api/af-revenue/logic/getGasAmount'
      // yield self.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
      //   self.init()
      // })
    }
  }
  export default {
    title: '收费',
    data () {
      return {
        trendchart: {},
        xData: ['2021', '2020', '2019', '2018'],
        year: 2021,
        data1: [709, 1917, 2455, 2610],
        data2: [327, 1776, 507, 1200],
        data3: [1036, 3693, 2962, 3810]
      }
    },
    methods: {
      // 初始化echarts
      initEchart () {
        let option = {
          backgroundColor: '#ffffff00',
          title: {
            text: "建设管材长度",
            x: "4%",

            textStyle: {
              color: '#fff',
              fontSize: '22'
            },
            subtextStyle: {
              color: '#90979c',
              fontSize: '16'
            }
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              console.log('格式化的参数··················································')
              console.log(params)
              console.log(params[0].seriesName)
              return   params[0].seriesName + " " + params[0].data + "米"
            },
            extraCssText: 'width: auto;height: auto;box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
            axisPointer: {
              label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0
              }
            },

            textStyle: {
              color: '#fff'
            },
            padding: [10, 10]
          },
          grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
              color: "#fff"
            },
            left:'15%'
          },
          legend: {
            x: '4%',
            top: '8%',
            textStyle: {
              color: '#fff',
            },
            data: ['长度']
          },
          calculable: true,
          xAxis: [{
            type: "category",
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: this.xData
          }],
          yAxis: [{
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          }],
          series: [{
            name: "长度",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "rgba(255,144,128,1)",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  },
                  position: "inside",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            data: this.data1,
          },
            // {
            //   name: "PE管",
            //   type: "bar",
            //   stack: "总量",
            //   itemStyle: {
            //     normal: {
            //       color: "rgba(0,191,183,1)",
            //       barBorderRadius: 0,
            //       label: {
            //         show: true,
            //         position: "inside",
            //         formatter: function (p) {
            //           return p.value > 0 ? (p.value) : '';
            //         }
            //       }
            //     }
            //   },
            //   data: this.data2
            // },
            // {
            //   name: "总数",
            //   type: "line",
            //   symbolSize: 10,
            //   symbol: 'circle',
            //   itemStyle: {
            //     normal: {
            //       color: "rgba(252,230,48,1)",
            //       barBorderRadius: 0,
            //       label: {
            //         show: true,
            //         position: "top",
            //         formatter: function (p) {
            //           return p.value > 0 ? (p.value) : '';
            //         }
            //       }
            //     }
            //   },
            //   data: this.data3
            // }
          ]
        }
        this.trendchart = echarts.init(document.getElementById('trend'))
        this.trendchart.clear()
        this.trendchart.setOption(option)
      },
      addData(arr1, arr2) {

            if (arr2.length == 0) {
                return arr1;
            } else {
                arr1.map(function(value, index) {
                    arr2[index] += value;
                })
            }
            return arr2;

      },
      refresh () {
        let data = {year: 2021, condition: '1=1'}
        this.getInitData(data, 'year')
      },
      init () {
        // 初始化echarts
        this.initEchart()
        var _this = this
        // 添加点击事件
        this.trendchart.on('click', function (param) {
          _this.year = param.name
          console.log(param)
          // 点击月份，数据不刷新
          if (_this.year.toString().indexOf('月') !== -1) {
            return
          } else {
            // 获取更新数据
            let data = {year: param.name, condition: '1=1'}
            _this.getInitData(data, 'month')
          }
        })

        // let i = 0
        // setInterval(function(){
        //   console.log(i)
        //   i = i === xData.length ? 0 : i+1
        //   this.trendchart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex:0,  // 显示第几个series
        //     dataIndex: i // 显示第几个数据
        //   });
        // }, 1000)
      },
      getInitData (data, sign) {
        let dt = new Date()
        let year = dt.getFullYear()
        let http = new HttpResetClass()
        if (sign === 'year') {
          let url = '/api/af-revenue/logic/getNetLenYear'
          this.data1 = []
          this.data2 = []
          this.data3 = []
          this.xData = [year-2, year-1, year]
          http.load('post', url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
            console.log(res.data)
            for(let i=0;i<res.data.length;i++){
              this.data1.push(res.data[i].len.toFixed(2))
            // if(res.data[i].name ==='PE'){
            //   this.data1.push(res.data[i].len.toFixed(2))
            // }
            //    if(res.data[i].name ==='钢'){
            //   this.data2.push(res.data[i].len.toFixed(2))
            // }

            }
            console.log(this.data1)
            console.log(this.data2)
          //  this.data3 =  this.addData(this.data1,this.data2)
          let param
          for(let j=0;j<this.data2.length;j++){
             param = parseFloat(this.data2[j])+parseFloat(this.data1[j])
            this.data3.push(param.toFixed(2))
          }

            // let getData = res.data.data
            // for (let i = 0; i < getData.length; i++) {
            // }
            this.init()
          })
        } else {
          // this.xData = function () {
          //   var data = []
          //   for (var i = 1; i < 13; i++) {
          //     data.push(i + '月')
          //   }
          //   return data
          // }()
          // let url = '/api/af-revenue/logic/getGasAmount'
          // this.$resetpost(url, data, {rejectMsg: null, resolveMsg: null}).then((res) => {
          //   this.init()
          // })
        }
      }
    },
    ready () {
      this.getInitData({},'year')
    },
    props: {}
  }
</script>
<style scoped>
  /*div{*/
  /*height: auto;*/
  /*}*/
</style>

