<template>
  <div>
    <div class="label">售差分析</div>
    <div id="BuySub"></div>
  </div>
</template>

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

  export default {
    name: "BuySub",
    data() {
      return {
        xc: '',
        year: '',
        resdata: [],
        gassupply: [],
        gasbuy: [],
        gasbuysub: [],
        timer:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('BuySub'))
        var scale=this.$parent.$parent.$parent.scale
        var xAxisData = []
        var metaDate = []
        var metaDate1 = []

        this.gassupply.forEach(function (s) {
          xAxisData.push(s.name)
          metaDate1.push(s.value)
        })
        this.gasbuy.forEach(function (l) {
          metaDate.push(l.value)
        })
        xAxisData.push("")
        var legendData = ['售气量', '供气量']


        var metaDate2 = []
        for (var i = 0; i < metaDate.length; i++) {
          var s = metaDate1[i] - metaDate[i]
          metaDate2.push(s)
        }
        var Auxiliarydata = []
        this.gasbuysub.forEach(function (m) {
          var index = m.value.toString().indexOf(".")
          Auxiliarydata.push(m.value.toString().substring(0, index + 3))
        })
        var yname = '年'
        var serieData = [
          {
            name: legendData[0],
            type: "bar",
            stack: "1",
            barWidth: '40%',
            barGap: "20%",
            xAxisIndex: 0,
            z: 2,
            itemStyle: {
              normal: {
                color: "#2f9ed1",
                label: {
                  show: false,
                }
              }
            },
            data: metaDate,
          },
          {
            name: legendData[1],
            type: "bar",
            stack: "1",
            barWidth: '40%',
            barGap: "-100%",
            xAxisIndex: 0,
            z: 2,
            itemStyle: {
              normal: {
                color: '#053850',
                label: {
                  show: true,
                  textStyle: {
                    color: "#ffffff",
                    fontSize:14*scale
                  },
                  position: "top",
                  formatter: function (p) {
                    return Auxiliarydata[p.dataIndex] != '' ? Auxiliarydata[p.dataIndex] + '%' : '0%';
                  }
                }
              }
            },
            data: metaDate2
          }
        ];
        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%", height: '70%', containLabel: true},
          tooltip: {
            alwaysShowContent:true,
            backgroundColor:'rgba(2, 59, 63, 0.45)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
              padding:10*scale,
              textStyle:{
                  fontSize:18*scale
              },
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              for (var i = 0; i < params.length; i++) {
                let item = params[i].value

                if (params[i].seriesName == '供气量') {
                  item = metaDate1[params[i].dataIndex]
                }
                result = result + params[i].seriesName + '&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder;color:#e1e52a;">' + DataSql.dataunit(item) + '</span><br/>'
              }
              // result = "供气量 ： " + metaDate1[params[0].dataIndex] + "<br/>" + params[0].seriesName + " ：" + params[0].value + "<br/>"
              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '年 </div><br/> ' + result + "售差比 &nbsp;&nbsp;&nbsp;<span style='font-weight: bolder;color:#e1e52a;'>" + Auxiliarydata[params[0].dataIndex] + '%</span>'
            },
            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: [40 * scale, 0, 0, -50 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            }, {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: xAxisData
            }, {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: xAxisData
            }
          ],
          yAxis: [
            {
              name: '气量',
              type: 'value',

              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,
                show: true,
                textStyle: {
                  color: '#15dce2',
                  fontSize: 14 * scale,
                },
                formatter: function (value) {
                  var index = value.toString().length
                  if (index > 9) {
                    return value.toString().substring(0, index - 9) + '亿'
                  } else if (index > 4) {
                    return value.toString().substring(0, index - 4) + '万'
                  }
                }
              },
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        }, true)

        let idx = -1;
        var dataLen=metaDate.length
        var oroptionmapjsonr_charts1=this.xc
        this.timer= setInterval(()=>{
          idx = (idx+ 1) % dataLen;
          oroptionmapjsonr_charts1.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, 3000)
      },
    },
    watch: {
      //监听浏览器大小变化
      'listenheight':
        {
          deep: true,
          handler(val) {
            if (this.listenheight !== '') {
              // this.$parent.$parent.changeresize(this.xc)
            }
          }
          ,
          immediate: true
        }
      ,
      'resdata':
        {
          deep: true,
          handler(val) {
            console.log(this.resdata, '测试安检数据')
            var self = this
            let ss = [{
              "mingyong": 1320073949.9925918,
              "year": 2015,
              "menzhan": 2712865655,
              "bigua": 646517409.5704748,
              "sum": 2590786701.72130392,
              "buysub": 4.444444,
              "gongye": 624195342.15823732
            }, {
              "mingyong": 1480585102.07480832,
              "year": 2016,
              "menzhan": 3144163445,
              "bigua": 720106956.6559638,
              "sum": 3002676090.88791644,
              "buysub": 4.444444,
              "gongye": 801984032.15714432
            }, {
              "mingyong": 1566106468.36711528,
              "year": 2017,
              "menzhan": 3371415280,
              "bigua": 757701474.80762272,
              "sum": 3219701592.38536412,
              "buysub": 4.444444,
              "gongye": 895893649.21062612
            }, {
              "mingyong": 6455508724.215388292000000000000000000001,
              "year": 2018,
              "menzhan": 15793238393,
              "bigua": 3037696848.465216433052631578947368421053,
              "sum": 12718452812.4932287004210526315789473684,
              "buysub": 19.46965745263157894736842105263157894737,
              "gongye": 3225247239.812623975368421052631578947369
            }]

            // this.resdata.forEach(function (s) {
            ss.forEach(function (s) {
              let item = {}
              item.name = s.year
              item.value = s.sum
              self.gasbuy.push(item)
              let item1 = {}
              item1.name = s.year
              item1.value = s.menzhan
              self.gassupply.push(item1)
              let item2 = {}
              item2.name = s.year
              item2.value = s.buysub
              self.gasbuysub.push(item2)
            })
            self.setBar()
            this.$parent.loaddata++
          },
        },
    },
    ready() {
      this.year = Util.toStandardDateString()
      this.year = this.year.toString().substring(0, 4)
      // let getData = DataSql.getData(this, 'buysub',{startDate:eval(this.year + '-4') + '-01-01 00:00:00',endDate:Util.toStandardDateString()}, 'resdata')
      // co(getData)
      this.resdata = 1

      // this.linesql(eval(this.year + '-4'), eval(this.year + '+1'))
    }
  }
</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%;

  }
</style>
