<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'
  import * as Util from "../../../stores/Util";


  export default {
    name: "TextChildsellgas",
    props: ['orgid'],
    data() {
      return {

        xc: '',
        timer:'',
        resdata: [],
        salvProName1 :[],
        salvProValue1:[],
        start:0,
        end:2,
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('textchildsellgas'))
        var salvProName =this.salvProName1
        var salvProValue =this.salvProValue1
        var salvProMax =[];//背景按最大值
        for (let i = 0; i < salvProValue.length; i++) {
          salvProMax.push(salvProValue[0])
        }
        var oroptionmapjsonr_charts=this.xc
        var option={
          dataZoom: [//滑动条
            {
              yAxisIndex: 0,//这里是从X轴的0刻度开始
              show: false,//是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue:this.start,// 从头开始。
              endValue:this.end , // 一次性展示2个。
            }
          ],
          // backgroundColor:"#003366",
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top: '2%',
            containLabel: true
          },
          xAxis: {
            show: false,
            type: 'value'
          },

          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize:16
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: false,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '12'
              },
            },
            data:salvProValue
          }],
          series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgb(57,89,255,1)'
                }, {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }]),
              },
            },
            label:{
                  show: true,
                  position: 'right',
                  fontSize:22,
                  color:"#14d7de",
                  formatter: function(data) {
                    // console.log('lable的数据是-----------------------------------')
                    // console.log(DataSql.dataunit(data.data))
                    return DataSql.dataunit(data.data);

                  },
                },
            barWidth: 20,
            data: salvProValue
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: 20,
              barGap: '-90%',
              data: salvProMax,
              itemStyle: {
                normal: {
                  color: 'rgba(24,31,68,1)',
                  barBorderRadius: 30,
                }
              },
            },
          ]
        }
        oroptionmapjsonr_charts.setOption(option)
        const a=this.salvProValue1.length
        this.timer=setInterval(function () {
          // 每次向后滚动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue === a ) {
            option.dataZoom[0].endValue = 2;
            option.dataZoom[0].startValue = 0;
          }
          else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          oroptionmapjsonr_charts.setOption(option);
        }, 2000);


      },
      searchdata() {
        console.log('进入购进量查询-------------------')
        let year = Util.toStandardDateString()
        year = year.toString().substring(0, 4)
        // startDate.toString().substring(0,4)
        let sqldata = DataSql.getData(this,'purchase',{startDate:year}, 'resdata')
        co(sqldata)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          clearInterval(this.timer);
          console.log('resdata监听 购进量====================================')
          console.log(val)
          // this.searchdata()
          // this.warn = this.resdata[0].warn
          // this.suspicious = this.resdata[0].suspicious
          // this.$parent.loaddata++
          for (let i = 0; i < val.length; i++) {
              this.salvProName1.push(val[i].f_orgname.replaceAll('有限公司',''))
              this.salvProValue1.push(val[i].value)

          }
          this.setBar()
        }
      },
      'orgid'(val){
        console.log('进入orgid监听=======================')
        console.log(val)
        // this.orgid
        clearInterval(this.timer);
        this.searchdata()
      },
    },
    ready() {
      this.searchdata()
    }
  }
</script>

<style scoped>

</style>
