<template>
  <div class="network">
    <div class="label">往期周报</div>
    <div style="height: 100%;width: 100%;">
      <div id="aweekdata" class="d0"></div>
    </div>

  </div>
</template>

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

  export default {
    name: "week-data1",
    props: {
      listenheight: String,
      f_filiale:String,
    },
    data() {
      return {
        xc: '',
        weeklydatas:[],
        gas1:[],
        gas2:[],
        gas3:[],
        f_startdate: 0,
        f_enddate : 0,
        xdata : []
      }
    },

    methods: {
      //绘图
      setBar() {
        console.log('往期周报----weekdatas'+this.weeklydatas1)
        this.xc = this.$echarts.init(document.getElementById('aweekdata'))
        var max1 = Math.max.apply(null, this.gas1);
        var max2 = Math.max.apply(null, this.gas2);
        let maxArr=[max1,max2]
        var max = Math.max.apply(null, maxArr);
        console.log('周报--------------------------==========拿到最大值')
        console.log(max)
        let interval = Math.round(max/5)
        var scale=this.$parent.$parent.$parent.scale
        this.xc.setOption({
          tooltip: {
            trigger: 'axis',
            extraCssText:'width:200px;height:100px;'
          },

          legend: {
            data: ['上游购气量', '用气量', '供销率'],
            textStyle:{
              color:"white",
              fontSize:'14'
            }
          },
          grid: {
            left:60,//y轴与左侧的距离
            right:60,//y轴与右侧的距离
            bottom:70,
            tooltip: {
              show: true,
              alwaysShowContent:true,
              backgroundColor:'rgba(2, 59, 63, 0.45)',
              // borderColor :'rgba(13, 109, 180)',
              borderWidth:0,
              hideDelay:100,
              triggerOn:'mousemove',
              padding:10*scale,
              textStyle:{
                fontSize:16*scale
              },

              trigger: 'axis',
              axisPointer: {type: 'line', lineStyle: {width: 0}},
              extraCssText: 'width: auto;height: auto;'
            },
          },
          xAxis: [
            {
              show:true,
              type: 'category',
              data: this.xdata,
              axisPointer: {
                type: 'none'
              },
              textStyle: { //改变刻度字体样式
                color: 'white',
                fontSize:15
              },
              splitLine:{
                show:false,
                lineStyle: {
                  type: 'dashed',
                  color: '#004371',
                }
              },
              axisTick:{
                show:false // 关闭刻度线
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14, //设置x轴字体大小
                  color: '#ffffff'
                }
              }

            }
          ],
          yAxis: [
            {
              show:true,
              nameTextStyle: {
                fontSize: 14 ,
                padding: [0 , 25 , 12, 5], //上右下左
                color: '#15dce2',
              },
              type: 'value',
              name: '万m3',
              min: 0,
              interval: interval,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: 'white',
                  fontSize:15,
                  formatter: '{value} m3'
                }
              },
              splitLine: {
                show: false,

              },
              axisPointer: {
                type: 'none'
              }
            },
            {
              nameTextStyle: {
                fontSize: 15 ,
                padding: [0 , 25 , 12, 5], //上右下左
                color: '#15dce2',
              },
              type: 'value',
              name: '供销率',
              min: 0,
              max: 100,
              interval: 20,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: 'white',
                  fontSize:15,
                  formatter: '{value} m3'
                }
              },
              axisPointer: {
                type: 'none' //关闭
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#004371',
                }
              },
            }
          ],
          series: [
            {
              name: '上游购气量',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {
                normal: {color: '#6fd9d0',},
              },
              data: this.gas1
            },
            {
              name: '用气量',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {normal: {color: '#f7cb32'}},
              data: this.gas2
            },
            {
              name: '供销率',
              type: 'line',
              yAxisIndex: 1,
              data: this.gas3
            }
          ]

        })

      },
      //请求后台数据
      searchdata() {

        let weeklydatas = DataSql.getData(this, 'weeklydata1', {},'weeklydatas')
        co(weeklydatas)
      },
    },
    watch: {

      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      },
      'weeklydatas': {
        deep: true,
        handler(val) {
          console.log('往期周报数据是------------------')
          console.log(this.weeklydatas)
          console.log('往期周报数据长度是=================')
          console.log(this.weeklydatas.length)
          for (let i = 0; i <this.weeklydatas.length ; i++) {
            //判断是否有数据
            console.log('循环的数据是============================')
            console.log(this.weeklydatas[i])
            console.log('------------------------------------')
            console.log('开始时间')
            this.xdata.push(this.weeklydatas[i].f_startdate.substring(2,10))
            console.log(this.weeklydatas[i].f_startdate)
            console.log(this.weeklydatas[i].f_enddate)
            console.log(this.weeklydatas[i].f_sum_gas)
            if(this.weeklydatas[i].f_sum_gas==="undefined"){
              this.gas1.push(0)
            }else{
              this.gas1.push(this.weeklydatas[i].f_sum_gas/1000)
            }

            if(this.weeklydatas[i].f_yqgas==="undefined"){
              this.gas2.push(0)
            }else{
              this.gas2.push(this.weeklydatas[i].f_yqgas/1000)
            }

            if(this.weeklydatas[i].f_gxcbl==="undefined"){
              this.gas3.push(0)
            }else{
              this.gas3.push(this.weeklydatas[i].f_gxcbl)
            }
          }
          // this.weeklydatas.push(this.weeklydata[0].f_sum_gas)
          // this.weeklydatas.push(this.weeklydata[0].f_yqgas)
          // this.f_gxcbl=this.weeklydata[0].f_gxcbl
          // this.f_startdate=this.weeklydata[0].f_startdate.substr(0,10)
          // this.f_enddate=this.weeklydata[0].f_enddate.substr(0,10)
          this.setBar()
        }
      },
    },

    ready() {
      // 拼接sql，请求后台
      this.searchdata()
    }
  }
</script>

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

  .d0 {
    padding-left: 2%;
    width: 100%;
    height: 100%;
    float: left;
  }
</style>
