<template>
  <div align="center">

    <div class="text-profit2">
      <span class="title-1">营业收入</span>
      <div class="text-1">
        <div id="textprofit" style="text-align: left"></div>

      </div>
      <img class="img-bottom" src="/static/NewManageHome/3.gif" />
    </div>

  </div>
</template>

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

  export default {
    name: "TextProfit",
    props:['orgid'],
    data() {
      return {
        xc: '',
        name:[],
        value:[],
        timer:'',
        resdata:'',
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('textprofit'))
        var oroptionmapjsonr_charts=this.xc
        var option={
          title: {
            text: '',
            subtext: '',
            x: 'left'
          },
          colors: ['#6fd9d0', '#f7cb32', '#7395db'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle:{
                color:'#2c4257',
                opacity:0.3
              }
            },
            padding:10,
            show: true,
            alwaysShowContent:true,
            backgroundColor:'#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,

            triggerOn:'mousemove',
            enterable:true,
              textStyle:{
                  fontSize:16
              },
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                  result +="<span style=\"text-align: left;font-weight: normal\">"+  item.marker + " " + "收入" + "&nbsp;&nbsp;  <span style=\"color:#e1e52a;font-weight: bolder\">" +  item.value.toFixed(2) + "</span></span></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '</div><br/>' + result
            },
            position: function(point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置
              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }
              posX=posX-20
              return [posX, posY];
            },
            extraCssText:'width: auto;height:auto;',
          },
          legend: {
            // icon: 'circle',
            // icon: 'diamond',
            y: 'top',
            right:'2%',
            itemGap: 20,
            itemWidth: 20 ,
            itemHeight: 10 ,
            padding: [0, 25, 0, 0],
            data: this.name,
            textStyle: {
              fontSize: 14 ,
              color: '#95bad7'          // 图例文字颜色
            }
          },
          grid: {left: '5%', top: "20%",  right: "5%",bottom:'5%', containLabel: true},
          calculable: true,
          dataZoom: [//滑动条
            {
              xAxisIndex: 0,//这里是从X轴的0刻度开始
              show: false,//是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue:0,// 从头开始。
              endValue:2 , // 一次性展示2个。
            }
          ],
          xAxis: [
            {
              type: 'category',

              axisLine: {
                show: true,
                lineStyle: {
                  color: '#004371'
                }
              },
              boundaryGap:true,
              axisTick: {
                interval: 0,
                length: '100px',
              },
              data: this.name,           //图分段的段名
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 ,
                  color: '#95bad7'
                }
              }
            }
          ],
          yAxis: [
            {
              name: '(万/元)',
              nameLocation: "end",
              type: 'value',
              nameTextStyle: {
                fontSize: 14 ,
                padding: [50, 35 , 0, 0],
                color: '#15dce2',
              },
              axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#08738e',
                  }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  fontSize: 14 ,
                  color: '#95bad7'
                }
              },
              axisTick: {show: false},
              splitLine: {
                show: true,
                lineStyle: {
                  type:'dashed',
                  color: '#004371',
                }
              },
            }
          ],
          barCategoryGap: '2%',
          series: {
            type: 'bar',
            // barGap: 0,
            barCategoryGap: '1%',
            barWidth: '18%',
            data: this.value,
            hoverAnimation: false,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: { //数值样式
            //     color: '#95bad7',
            //     fontSize: 14
            //   }
            // },
            itemStyle: {
              normal: {color: '#6fd9d0',},
            }
          }
        }

        let idx = 0;
        // var oroptionmapjsonr_charts1=this.xc
        // this.timer=setInterval(()=>{
        //   idx = (idx+ 1) % 4;
        //   oroptionmapjsonr_charts1.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 1,
        //     dataIndex: idx
        //   });
        //
        // }, 3000)

        const a=this.value.length
        oroptionmapjsonr_charts.setOption(option)
        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);
          idx = (idx+ 1) % a;
            oroptionmapjsonr_charts.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: idx
            });
        }, 3000);

      },
      searchdata() {
        console.log('营业厅收入-------------------')
        let year = Util.toStandardDateString()
        let startDate = year.toString().substring(0, 4)
        let endDate = parseInt(startDate)+1
        // startDate.toString().substring(0,4)
        let sqldata = DataSql.getData(this,'serviceHall',{startDate:startDate,endDate:endDate,orgid:this.orgid}, 'resdata')
        co(sqldata)
      },
    },
    watch: {
      'resdata': {
        deep: true,
        handler(val) {
          console.log('进入营业厅收入=========================监听')
          console.log(val)
          clearInterval(this.timer);
          this.name=[]
          this.value=[]
          if(val.length===0){
            this.name.push('其他')
            this.value.push(0)
          }else{
            for (let i = 0; i < val.length; i++) {
              if(val[i].f_depname===null){
                this.name.push('其他')
              }else{
                this.name.push(val[i].f_depname)
              }

              this.value.push(val[i].value/1000)

          }

          }
          this.setBar()
        },

      },
      'orgid'(val){
        clearInterval(this.timer);
        this.searchdata()
      }
    },
    ready() {

    }
  }
</script>

<style scoped>
</style>
