<style scoped>

</style>
<template>
  <div>
    <span class="title-1">分公司年度购进量</span>
    <div class="text-1">
      <div id="textchildsellgas"></div>
    </div>
    <img class="img-bottom" src="../../../../../static/NewManageHome/1.gif" />
  </div>
</template>

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


  export default {
    name: "TextChildsellgas",
    props: {
      showdate: {
        type: Boolean,
        default: false
      },
      listenheight: String,
    },
    data() {
      return {
        date: [2018, 2017, 2016],
        xc: '',
        warn: '',
        suspicious: '',
        // resdata: '',
        monitordata: [],
        monitordata1: [],
        monitorscale: [],
          timer:'',
          grade:[],
        // grade: ['保定绿豪', '保定富瑞康', '保定富瑞斯', '定兴富瑞安','廊坊富瑞克','富瑞康管道','高碑店富瑞克'],
        resdata :[
          {name:'公司1' ,value:222} ,
          {name:'公司2' ,value:333} ,
          {name:'公司3' ,value:444} ,
          {name:'公司4' ,value:555} ,
          {name:'公司5' ,value:666} ,
        ]
      }
    },
    methods: {
      setBar(cdata) {
          this.$parent.loadnum++
        this.xc = this.$echarts.init(document.getElementById('textchildsellgas'))
        var scale=this.$parent.$parent.scale*1.2
          var maxdata=0
          var data = {
              grade: [],
              visits: [],
              totalCost: [],
              cost: [],
          }

         cdata.forEach(function (s) {
             data.grade.push(s.name)
             data.visits.push(s.value)
             if(parseInt(s.value)>maxdata){
                 maxdata=parseInt(s.value)
             }
         })

         for (var i=0;i<cdata.length;i++){
             data.totalCost.push(maxdata)
             this.monitordata1.push(cdata[i].value)
         }
               console.log(data.visits,data.totalCost,data.grade,'数据监测')
         // this.scale()
         //  data.cost=this.monitorscale
        var rich = {
          blue: {
            fontSize:18,
            color: '#15dce2'
          },
          white: {
            color: '#fff'
          }
        }
        this.xc.setOption({
          grid: {
            left: '20%',
            right: '20%',
            top: '8%',
            bottom: '0'
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              margin: 10 ,
              show: true,
              color: '#95bad7',
              fontSize: 12
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
            dataZoom: [{
                type: "inside",
                startValue:0,
                endValue:3,
                zoomLock:false,
                throttle:10,
                orient:'vertical',
            }],
          series: [{
            type: 'bar',
            barGap: '-100%',
            label: {
              normal: {
                show: true,
                position: 'right',
                fontSize: 18,
                formatter:
                  function (param) {
                    // return '{blue|' + DataSql.dataunit(data.visits[param.dataIndex]) + '}';
                    return '{blue|' + data.visits[param.dataIndex] + '}';
                  },
                rich: rich,
              }
            },
            barWidth: '30%',
            itemStyle: {
              normal: {
                // borderColor: 'rgba(1,207,242,0.05)',
                borderWidth: 2,
                barBorderRadius: 15,
                color: '#003d4c'
              }
            },
            z: 1,
            data:  data.totalCost,
            // data: da
          }, {
            type: 'bar',
            barGap: '-99%',
            barWidth: '30%',
            itemStyle: {
              normal: {
                barBorderRadius: 16 ,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6fd9d0'
                  }, {
                    offset: 1,
                    color: '#6fd9d0'
                  }]
                }
              },
            },
            label:{
              formatter:function (param) {
                console.log(param,'cdd')
                  // return
              }
            },
            max: 1,
            labelLine: {
              show: true,
            },
            z: 2,
            data:  data.visits,
          }]
        })
          var oroptionmapjsonr_charts1=this.xc
          // 取消之前选中的图形
          // 轮播
          let idx = -1;
          var dataLen=7
          this.timer=setInterval(()=>{
            var maxidx=0
            var minidx=0
            // 取消之前选中的图形
            idx = (idx+ 1) % dataLen;
            //console.log(app.currentIndex);
            // 选中当前图形

            maxidx=idx+3
            minidx=idx
            if(minidx>=dataLen-3){
              maxidx=dataLen
              minidx=dataLen-4
            }
            oroptionmapjsonr_charts1.dispatchAction({
              type: 'dataZoom',
              startValue:minidx,
              endValue: maxidx
            });
          }, 3000)

      },
      searchdata() {
        let sqldata = DataSql.getData(this, 'getBuygas',{}, 'resdata')
        co(sqldata)
      },
      scale() {
        var l = this.monitordata1[1]
        for (var i = 1; i < 7; i++) {
          l = l + this.monitordata1[i + 1]
          if (l < this.monitordata1[i + 1]) {
            l = this.monitordata1[i + 1]
          }
        }
        l = l * 1.3
        for (var i = 1; i < 8; i++) {
          if (this.monitordata1[i] == 0 || l == 0) {
            this.monitorscale[i] = 0
            continue
          }
          this.monitorscale[i] = this.monitordata1[i] / l
        }
        this.monitorscale[0] = 0
      },
        resize() {
            console.log('刷新分公司售气')
            if(this.timer!=''){
                this.resdata.splice(0,this.resdata.length)
                clearInterval(this.timer);
            }
            this.searchdata()
        },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
            if(this.resdata.length<1){
                return
            }
          this.setBar(this.resdata)
          this.$parent.loaddata++
        }
      },
      'monitordata': {
        deep: true,
        handler(val) {
          let s = []
          for (var i = 1; i < 6; i++) {
            s[i] = this.monitordata[0][this.grade[i]]
          }
          this.monitordata1 = s
          // this.scale()
          this.setBar()
          this.$parent.loaddata++
        }
      },
    },
    ready() {
      this.setBar(this.resdata)
      // this.searchdata()
    }
  }
</script>

<style scoped>

</style>
