<template>
  <div class="network">
    <div class="label">季报</div>
    <div style="height: 40%;width: 100%;">
      <div id="seasondata" class="d0"></div>
    </div>
    <div style="height: 51%; width: 100%;">
      <div id="f_gxcbl"></div>
    </div>
  </div>
</template>

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

  export default {
    name: "season-data",
    props: {
      listenheight: String,
      f_filiale:String,
    },
    data() {
      return {
        xc: '',
        seasondata:[],
        seasondatas:[],
        f_gxcbl:0,
        f_startdate: 0,
        f_enddate : 0,
        bgData : [],
        yLabel:['上游供气总量','用气量']

      }
    },

    methods: {
      //绘图
      setBar() {
        console.log('setBar----=----=-=-=seasondatas'+this.seasondatas)
        this.xc = this.$echarts.init(document.getElementById('seasondata'))
        this.xc1 = this.$echarts.init(document.getElementById('f_gxcbl'))
        var max = Math.max.apply(null, this.seasondatas);
        console.log(max/10+max)
        for(let i in this.seasondatas){
          this.bgData.push(max/10+max)
        }
        this.xc.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function(params) {
              return params[0].name + '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                params[0].seriesName + ' : ' + params[0].value + '万m3 <br/>'
            }
          },
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              margin:15,
              textStyle: {
                color: '#fff',
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: this.yLabel
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#9aeced',
                fontSize: '12'
              },
              formatter:'{value}万m3'
            },
            data: this.seasondatas
          }],
          series: [{
            name: '气量',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [0,30,30,0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#52d8da'
                }, {
                  offset: 1,
                  color: '#57dcde'
                }]),
                shadowBlur:0,
                shadowColor:'#57dcde'
              },
            },
            barWidth: 10,
            data: this.seasondatas
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: 10,
              barGap: '-100%',
              data: this.bgData,
              itemStyle: {
                normal: {
                  color: '#003D4C',
                  barBorderRadius: [0,30,30,0],
                }
              },
            },
          ]
        })
        this.xc1.setOption({
          title: [{
            text: '供销差比率',
            x: 'center',
            top: '55%',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 16,
              fontWeight: '100',
            }
          }, {
            text: this.f_gxcbl+'%',
            x: 'center',
            top: '38%',
            textStyle: {
              fontSize: '15',
              color: '#FFFFFF',
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600',
            },
          }],
          polar: {
            radius: ['75%', '60%'],
            center: ['50%', '50%'],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [{
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)',
            },
            data: [this.f_gxcbl],
            coordinateSystem: 'polar',

            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#6fd97a',
                },
                  {
                    offset: 1,
                    color: '#6FD9D0',
                  },
                ]),
              },
            },
          },
            {
              name: '',
              type: 'pie',
              startAngle: 80,
              radius: ['80%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .1)',
                borderWidth: 1,
                borderColor: '#6FD9D0',
              },
              data: [1],
            },
            {
              name: '',
              type: 'pie',
              startAngle: 80,
              radius: ['55%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .1)',
                borderWidth: 1,
                borderColor: '#6FD9D0',
              },
              data: [2],
            }
          ],



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

        let seasondata = DataSql.getData(this, 'seasondata', {},'seasondata')
        co(seasondata)
      },
      // 截取当前数据到小数点后两位
      numFilter(value) {
        const realVal = parseFloat(value).toFixed(2);
        return realVal;
      },
    },
    watch: {

      //监听浏览器大小变化
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      },
      'seasondata': {
        deep: true,
        handler(val) {
          console.log('季报数据是下面的------------------')
          console.log(this.seasondata)
          this.seasondatas =[]
          if(this.seasondata.length===0){
            this.seasondatas.push(0)
            this.seasondatas.push(0)
            this.f_gxcbl=0
          }else{
            this.seasondatas.push(this.numFilter(this.seasondata[0].f_sum_gas/1000))
            this.seasondatas.push(this.numFilter(this.seasondata[0].f_yqgas/1000))
            this.f_gxcbl=this.seasondata[0].f_gxcbl
            this.f_startdate=this.seasondata[0].f_startdate.substr(0,10)
            this.f_enddate=this.seasondata[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>
