import { Injectable, EventEmitter} from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class EchartsDataService {

  constructor() { }
  //计划首页
  tableShow=false//控制首页表格显隐
  buildingName="" //建筑类型
  zhuXname=[""]   //点击首页不同饼状图后面柱状图显示不同数据

  //预案状态分析
  statefulInspectionName:string;
  statefulInspectionToggle:boolean = true; // true=显示当前点击柱状图 flase=显示当前点击折现图

  //计划更新统计
  scheduledUpdatesType:number = 0; //已核查/未核查
  scheduledUpdatesName:string;
  scheduledUpdatesXName:string;
  //scheduledUpdatesToggle:string ="one"; // 显示  当前点击 已核查/未核查
  scheduledUpdatesToggle:number=1

  eventEmit = new EventEmitter();

  //echarts 悬停 显示表格假数据
  //支队提示框
  tableDataZhi = [ 
    {name:"浦东支队",number:"156",zhanbi:"3%"},
    {name:"黄浦支队",number:"144",zhanbi:"2.8%"},
    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
    {name:"静安支队",number:"120",zhanbi:"1.3%"},
    {name:"普陀支队",number:"100",zhanbi:"1.1%"},
    {name:"虹口支队",number:"95",zhanbi:"1%"},
    {name:"杨浦支队",number:"90",zhanbi:"0.9%"},
    {name:"闵行支队",number:"88",zhanbi:"0.8%"},
    {name:"宝山支队",number:"83",zhanbi:"0.7%"},
    {name:"徐汇支队",number:"133",zhanbi:"2.1%"},
    {name:"长宁支队",number:"122",zhanbi:"1.6%"},
    {name:"嘉定支队",number:"78",zhanbi:"0.6%"},
    {name:"松江支队",number:"75",zhanbi:"0.5%"},
    {name:"金山支队",number:"65",zhanbi:"0.4%"},
    {name:"崇明支队",number:"55",zhanbi:"0.3%"}/* ,
    {name:"总计",number:"1356",zhanbi:"19%"} */
  ]
  //中队提示框
  tableDataZhong = [ 
    {name:"浦东中队",number:"156",zhanbi:"3%"},
    {name:"黄浦中队",number:"144",zhanbi:"2.8%"},
    {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
    {name:"长宁中队",number:"122",zhanbi:"1.6%"},
    {name:"静安中队",number:"120",zhanbi:"1.3%"},
    {name:"普陀中队",number:"100",zhanbi:"1.1%"},
    {name:"虹口中队",number:"95",zhanbi:"1%"},
    {name:"杨浦中队",number:"90",zhanbi:"0.9%"},
    {name:"闵行中队",number:"88",zhanbi:"0.8%"},
    {name:"宝山中队",number:"83",zhanbi:"0.7%"},
    {name:"徐汇中队",number:"133",zhanbi:"2.1%"},
    {name:"长宁中队",number:"122",zhanbi:"1.6%"},
    {name:"嘉定中队",number:"78",zhanbi:"0.6%"},
    {name:"松江中队",number:"75",zhanbi:"0.5%"},
    {name:"金山中队",number:"65",zhanbi:"0.4%"},
    {name:"崇明中队",number:"55",zhanbi:"0.3%"}/* ,
    {name:"总计",number:"1356",zhanbi:"19%"} */
  ]
  //建筑类型提示框
  buildingType = [ 
    {name:"高层",number:"156",zhanbi:"3%"},
    {name:"地下",number:"144",zhanbi:"2.8%"},
    {name:"轨道交通",number:"133",zhanbi:"2.1%"},
    {name:"化工生产",number:"122",zhanbi:"1.6%"},
    {name:"储罐类",number:"120",zhanbi:"1.3%"},
    {name:"厂房",number:"100",zhanbi:"1.1%"},
    {name:"古建筑",number:"95",zhanbi:"1%"},
    {name:"商市场",number:"90",zhanbi:"0.9%"},
    {name:"医院",number:"88",zhanbi:"0.8%"},
    {name:"学校",number:"83",zhanbi:"0.7%"},
    {name:"宾馆",number:"133",zhanbi:"2.1%"},
    {name:"娱乐场所",number:"122",zhanbi:"1.6%"},
    {name:"餐饮业",number:"78",zhanbi:"0.6%"},
    {name:"影剧院",number:"75",zhanbi:"0.5%"},
    {name:"展览建筑",number:"65",zhanbi:"0.4%"},
    {name:"隧道",number:"55",zhanbi:"0.3%"}/* ,
    {name:"总计",number:"1356",zhanbi:"19%"} */
  ]
  //月份提示框
  monthTooltip = [ 
    {name:"一月",number:"156",zhanbi:"3%"},
    {name:"二月",number:"144",zhanbi:"2.8%"},
    {name:"三月",number:"133",zhanbi:"2.1%"},
    {name:"四月",number:"122",zhanbi:"1.6%"},
    {name:"五月",number:"120",zhanbi:"1.3%"},
    {name:"六月",number:"100",zhanbi:"1.1%"},
    {name:"七月",number:"95",zhanbi:"1%"},
    {name:"八月",number:"90",zhanbi:"0.9%"},
    {name:"九月",number:"88",zhanbi:"0.8%"},
    {name:"十月",number:"83",zhanbi:"0.7%"},
    {name:"十一月",number:"133",zhanbi:"2.1%"},
    {name:"十二月",number:"122",zhanbi:"1.6%"}/* ,
    {name:"总计",number:"984",zhanbi:"20%"} */
  ]
  //预案提示框
  planData = [
    {name:"预案新增",number:"156",zhanbi:"19%"},
    {name:"预案审核通过",number:"144",zhanbi:"21%"},
    {name:"预案编制",number:"133",zhanbi:"20%"},
    {name:"预案审核退回",number:"122",zhanbi:"17%"},
    {name:"预案审核中",number:"120",zhanbi:"23%"}/* ,
    {name:"总计",number:"561",zhanbi:"100%"}, */
  ]

  //提示框表格
  tableTooltip(dataArr,title:string){
    let data = dataArr
    //console.log(data)
    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:26px;text-align: center;display:block;">'+title+'</span></div>'
      res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
      res+='<thead><tr>';
      res+='<td style="text-align:center;width:30%;">名称</td>';
      res+='<td style="text-align:center;width:30%;">数量</td>'
      res+='<td style="text-align:center;width:30%;">总占比</td>'
      res+='</tr></thead>'
      res+='<tbody>';
      for(var i=0;i<data.length;i++){
        res+='<tr>'
        res+='<td style="text-align:center;">'+data[i].name+'</td>'
        res+='<td style="text-align:center;">'+data[i].number+'</td>'
        res+='<td style="text-align:center;">'+data[i].zhanbi+'</td></tr>'
      }
      
      res+='</tbody>'
      res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
      res+='</table></div></div>'
      return res
  }

  //如果提示框显示不开
  tableTooltipNoShow(point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
   
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
   
    // 外层div大小
    // var viewWidth = size.viewSize[0];
    // var viewHeight = size.viewSize[1];
   
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
   
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
      x = 35;
    } else { // 左边放的下
      x = pointX + 80;
    }
   
    // boxHeight > pointY 说明鼠标上边放不下提示框
    if (boxHeight > pointY) {
      y = 65;
    } else { // 上边放得下
      y = pointY - boxHeight;
    }
   
    return [pointX, pointY];
  }
  
  tableTooltipNoShow2(point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
   
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
   
    // 外层div大小
    var viewWidth = size.viewSize[0];
    // var viewHeight = size.viewSize[1];
   
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
   
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
      x = pointX + 60;
    } else { // 左边放的下
      x = pointX + 80;
    }
     //  说明鼠标右边放不下提示框
    if(viewWidth - 100 - pointX < boxWidth){
      x = pointX - boxWidth-50;
    }


    // boxHeight > pointY 说明鼠标上边放不下提示框
    if (boxHeight > pointY) {
      y = 65;
    } else { // 上边放得下
      y = pointY - boxHeight;
    }

    return [x, y];
  }

  //第三层鼠标弹窗效果
  tableTooltipNoShowq(point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
   
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
   
    // 外层div大小
    var viewWidth = size.viewSize[0];
    var viewHeight = size.viewSize[1];
   
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
   
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
      x = pointX + 40;
      //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+162-pointY<boxHeight){
        y=pointY-boxHeight+90
      } 
    } else if(viewWidth - 100 - pointX < boxWidth){ // 左边放的下右边放不下
        x = pointX - boxWidth-50;
        //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+162-pointY<boxHeight){
        y=pointY-boxHeight+90
      } 
      //x = pointX + 80;
    }else{//左右都能放下
      //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+162-pointY<boxHeight){
        y=pointY-boxHeight+90
      }
      else{
        y=pointY+30
      }
      x = pointX + 40; 
    }
     //  说明鼠标右边放不下提示框
    /* if(viewWidth - 100 - pointX < boxWidth){
      x = pointX - boxWidth-50;
    } */


    // boxHeight > pointY 说明鼠标上边放不下提示框
    /* if (boxHeight > pointY) {
      y = 65;
    } else { // 上边放得下
      y = pointY - boxHeight;
    } */

    return [x, y];
  }

  //第二层鼠标弹窗效果
  tableTooltipNoShowt(point, params, dom, rect, size) {
    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    // 提示框位置
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
   
    // 当前鼠标位置
    var pointX = point[0];
    var pointY = point[1];
   
    // 外层div大小
    var viewWidth = size.viewSize[0];
    var viewHeight = size.viewSize[1];
   
    // 提示框大小
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSize[1];
   
    // boxWidth > pointX 说明鼠标左边放不下提示框
    if (boxWidth > pointX) {
      x = pointX + 40;
      //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+400-pointY<boxHeight){
        y=pointY-boxHeight+105
      } 
    } else if(viewWidth - 100 - pointX < boxWidth){ // 左边放的下右边放不下
        x = pointX - boxWidth-50;
        //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+400-pointY<boxHeight){
        y=pointY-boxHeight+90
      } 
      //x = pointX + 80;
    }else{//左右都能放下
      //上面放不下
      if (boxHeight > pointY){
        y=pointY+30
      }
      //下面放不下
      if(viewHeight+400-pointY<boxHeight){
        y=pointY-boxHeight+90
      }
      else{
        y=pointY+30
      }
      x = pointX + 40; 
    }
     
    return [x, y];
  }

  //用法：
  // tooltip: {
  //   trigger: 'axis',
  //   backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
  //   borderWidth:'1',
  //   borderRadius :'0',
  //   formatter:  (params)=>{
  //     return this.serviceData.tableTooltip(this.serviceData.buildingType,params[0].name)
  //   },
  //   position:this.serviceData.tableTooltipNoShow
  // }
/**
   * @name: 中队表格提示框封装
   * @test: test font
   * @msg: 
   * @param {string(表头)}
   * @return {type} 
   */
  biaogeTishi(biaotou:string){
     var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+biaotou+'</span></div>'
        res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead style="font-size:18px;"><tr>';
        res+='<td style="text-align:center;width:30%;">名称</td>';
        res+='<td style="text-align:center;width:30%;">数量</td>'
        res+='<td style="text-align:center;width:30%;">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
        for(var i=0;i<this.tableDataZhong.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;">'+this.tableDataZhong[i].name+'</td>'
          res+='<td style="text-align:center;">'+this.tableDataZhong[i].number+'</td>'
          res+='<td style="text-align:center;">'+this.tableDataZhong[i].zhanbi+'</td></tr>'
        }
        
        res+='</tbody>'
        res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }
  /**
   * @name: 支队表格提示框封装
   * @test: test font
   * @msg: 
   * @param {string(表头)}
   * @return {type} 
   */
  biaogeTishiZhi(biaotou:string){
    var res = '<div class="tishi" style=" backgroundColor:rgba(255,255,255,1);width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span style="color:#FFFFFF;font-size:27px;text-align: center;display:block;">'+biaotou+'</span></div>'
       res+='</br><div style="width:300px;height:100%;padding:0 20px 15px 20px"><table style="width:300px;font-size:16px;  color:#FFFFFF;border-collapse:collapse;"cellspacing="0"; >';
       res+='<thead style="font-size:18px;"><tr>';
       res+='<td style="text-align:center;width:30%;">名称</td>';
       res+='<td style="text-align:center;width:30%;">数量</td>'
       res+='<td style="text-align:center;width:30%;">总占比</td>'
       res+='</tr></thead>'
       res+='<tbody>';
       //var res='<div class="tishi" style=" width:100%;height:100%;"><div style="padding:10px 0 5px 0"><span >'+biaotou+'</span></div>'
       for(var i=0;i<this.tableDataZhi.length;i++){
         res+='<tr>'
         res+='<td style="text-align:center;">'+this.tableDataZhi[i].name+'</td>'
         res+='<td style="text-align:center;">'+this.tableDataZhi[i].number+'</td>'
         res+='<td style="text-align:center;">'+this.tableDataZhi[i].zhanbi+'</td></tr>'
       }
       
       res+='</tbody>'
       res+='<tfoot style="font-size:18px;"><td style="text-align:center;">总计</td><td style="text-align:center;">1356</td><td style="text-align:center;">19%</td></tfoot>'
       res+='</table></div></div>'
       return res
 }
 zhiNameData = ["浦东支队","黄浦支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
   zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]

/**
   * @name: 气泡封装
   * @test: test font
   * @msg: 
   * @param {气泡提示对象，y轴数据，x轴数据}
   * @return {json对象} 
   */
  qipao(tiaoshiPao:any,yData,xData):any{
    var arrshuzu='[';
    for(var i=0;i<yData.length;i++){
      arrshuzu+='{"value":'+yData[i]+',"coord":['+i+','+yData[i]+'],"name":'+'"'+xData[i]+'"'+'},'
      //arrshuzu+=`{"value":${yData[i]},"coord":[${i},${yData[i]}],"name":`+`"`+`${xData[i]}`+`"`+`},`
    }
    arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
    arrshuzu+=']'
    tiaoshiPao=JSON.parse(arrshuzu)
    //console.log(tiaoshiPao)
    return tiaoshiPao
  }




}