<template>
  <div align="center">
<!--    <div class="text-profit1" v-if="$parent.showpro">利润总额&nbsp;&nbsp;<span>{{prodata}}</span>-->
<!--    </div>-->
    <div class="text-profit2">
      <span class="title-1">营业厅收费</span>
      <div class="text-1">
        <div id="textprofit" style="text-align: left" v-if="$parent.showpro"></div>

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

  </div>
</template>

<script>
    import * as DataSql from '../../../../stores/DataSql'
    import co from 'co'
  export default {
    name: "TextProfit",
    props: {
      listenheight: String,
        showpro:Boolean,
    },
    data() {
      return {
        xc: '',
        construction: {//建设数据
          Built: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],//已建数据
          rebuilt: [],//在建数据
          approved: [],//审批数据
        },
          // lenname:[],
          lenname:['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
          resdata:[],
        timer:'',
          prodata:''
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
          this.$parent.loadnum++
        this.xc = this.$echarts.init(document.getElementById('textprofit'))
        var scale=this.$parent.$parent.scale
        this.xc.setOption({
          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*scale,
            show: true,
            alwaysShowContent:true,
            backgroundColor:'#01396d',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,

            triggerOn:'mousemove',
            enterable:true,
              textStyle:{
                  fontSize:16*scale
              },
            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 + " " + item.seriesName + "&nbsp;&nbsp;  <span style=\"color:#e1e52a;font-weight: bolder\">" +  item.value + "</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: {
              show:false,
            // icon: 'circle',
            // icon: 'diamond',
            y: 'top',
            right:'2%',
            itemGap: 20,
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            padding: [0, 25, 0, 0],
            data: ['收入', '支出', '利润'],
            textStyle: {
              fontSize: 14 * scale,
              color: '#95bad7'          // 图例文字颜色
            }
          },
          grid: {left: '5%', top: "20%",  right: "5%",bottom:'5%', containLabel: true},
          calculable: true,
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: true,
                  axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
                  axisLabel: {interval: 0, textStyle: {color: '#95bad7', fontSize: 12 * scale}},
                  axisTick: {show: false},
                  data: this.lenname,
              },
          ],

          yAxis: [
            {
              name: '(金额:元)',
              nameLocation: "end",
              type: 'value',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [50, 5, 0, 0],
                color: '#15dce2',
              },
              axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#08738e',
                  }
              },
              axisLabel: {
                show: true,
                  textStyle: {color: '#95bad7', fontSize: 14 * scale}, formatter: function (params) {
                      if (params > 9999) {
                          return params / 10000 + "万"
                      }
                      // else if(params>999){
                      //    return params/10000+"万"
                      //  }
                      else
                          return params
                  }
              },
              axisTick: {show: false},
              splitLine: {
                show: true,
                lineStyle: {
                  type:'dashed',
                  color: '#004371',
                }
              },
            }
          ],
          barCategoryGap: '2%',
          series: [
              {
                  name: '收入',
                  type: 'bar',
                  // barGap: 0,
                  barCategoryGap: '1%',
                  barWidth: '18%',
                  data: this.construction.Built,
                  hoverAnimation: false,
                  label: {
                      show: false,
                      position: 'top',
                      textStyle: { //数值样式
                          color: '#95bad7',
                          fontSize: 14 * scale
                      }
                  },
                  itemStyle: {
                      normal: {color: '#6fd9d0',},
                  }
              }
            // },
            // {
            //   name: '支出',
            //   type: 'bar',
            //   //  barGap: 0,
            //   barCategoryGap: '1%',
            //   barWidth: '18%',
            //   data: this.construction.rebuilt,
            //   hoverAnimation: false,
            //   label: {
            //     show: false,
            //     position: 'top',
            //     textStyle: { //数值样式
            //       color: '#95bad7',
            //       fontSize: 14 * scale
            //     }
            //   },
            //   itemStyle: {normal: {color: '#f7cb32'}},
            // },
            // {
            //   name: '利润',
            //   type: 'bar',
            //   //    barGap: 0,
            //   barCategoryGap: '1%',
            //   barWidth: '18%',
            //   data: this.construction.approved,
            //   hoverAnimation: false,
            //   label: {
            //     show: false,
            //     position: 'top',
            //     textStyle: { //数值样式
            //       color: '#95bad7',
            //       fontSize: 14 * scale
            //     }
            //   },
            //   itemStyle: {normal: {color: '#7393db'}},
            // },
          ],
        }, true)

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

        }, 3000)
      },
        searchdata() {
            // let sqldata = DataSql.getData(this, 'user',{}, 'resdata')
            // co(sqldata)
            // let sqldatapie = DataSql.getData(this,'useri',{}, 'resdatapie')
            // co(sqldatapie)
            // let sqldataone = DataSql.getData(this,'userapply',{}, 'resdataapply')
            // co(sqldataone)
            let sqldataone = DataSql.getData(this,'getFiliaspro',{}, 'resdata')
            co(sqldataone)
        },
        resize() {
            console.log('刷新营业收入')
            if(this.timer!=''||this.resdata.length>0){
                this.resdata.splice(0,this.resdata.length)
                this.construction.Built.splice(0,this.construction.Built.length)
                this.construction.rebuilt.splice(0,this.construction.rebuilt.length)
                this.construction.approved.splice(0,this.construction.approved.length)
                this.lenname.splice(0,this.lenname.length)
                clearInterval(this.timer);
            }
            this.searchdata()
        },
    },
    watch: {
      'listenheight': {
        deep: true,
        handler(val) {
          if (this.listenheight !== '') {
            // this.$parent.$parent.changeresize(this.xc)
          }
        },
      },
        'resdata': {
            deep: true,
            handler(val) {
                if(this.resdata.length<1){
                    return
                }
                var self=this
                 var ss=0
                this.resdata.forEach(function (s) {
                    if(s.f_income>0){
                        self.lenname.push(s.f_filiale)
                        self.construction.Built.push(s.f_income)
                        self.construction.rebuilt.push(s.f_expenditure)
                        self.construction.approved.push(s.f_profit)
                        ss=ss+parseFloat(s.f_profit).toFixed(3)
                    }
                })
                this.prodata=DataSql.dataunit(ss)
                this.setBar()
            }
        },
        'showpro'(){
          if(this.showpro==true){
              console.log(this.xc,'sds')
              this.xc.clear()
              this.setBar()
              // this.resdata.splice(0,this.resdata.length)
              // this.searchdata()
          }
        }
    },
    ready() {
      this.setBar()
      // this.searchdata()
    }
  }
</script>

<style scoped>
</style>
