/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-09-02 16:22:35
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-09-05 08:58:18
 */
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
import {EchartsDataService} from '../../echarts-data.service'
declare var echarts: any;

@Component({
  selector: 'app-delete-there',
  templateUrl: './delete-there.component.html',
  styleUrls: ['./delete-there.component.scss']
})
export class DeleteThereComponent implements OnInit {

  constructor(private router: Router,private activatedRoute: ActivatedRoute,public echartsData:EchartsDataService) { }

  ngOnInit(): void {
    let headtext:string;
    let datayuex:string;
    let headName:string;
    this.activatedRoute.params.subscribe(param=>{
      headtext=param.headtext
      datayuex=param.datayuex
      headName=headtext+''+datayuex;
      //console.log(datayuex)
    });
    window.setTimeout(()=>{
      this.zhuzhuangtu(headName)
    },0)
  }
  zhiNameData = ["浦东支队","黄埔支队","徐汇支队","长宁支队","静安支队","普陀支队","虹口支队","杨浦支队","闵行支队","宝山支队","嘉定支队","松江支队","金山支队","崇明支队"]
  zhiNumData = [200,190,180,170,160,150,140,130,120,110,100,90,80,70]
  /* 柱状图 */
  zhuzhuangtu(headName:string){
    var ec = echarts as any;
    var zhutu = ec.init(document.getElementById('zhidui'));
    var option = {
      title: {
        text: `${headName}`,
        left: "center",
        top: "15",
        textStyle: {
          fontSize: 23
        }
      },
      grid: {  
        left: '5%',  
        bottom:'35%'  
        },  
      xAxis: {
          type: 'category',
          data: this.zhiNameData,
          //axisLabel: this.axisLabel
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
        trigger: 'item',
        formatter:  (params)=>{
          return this.tableTooltip2(params.name)
        },
        backgroundColor:'rgba(255,255,255,1)',//通过设置rgba调节背景颜色与透明度
        borderWidth:'1',
        borderRadius :'0'
      },
      series: [{
          data: this.zhiNumData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          },
          barWidth :'28',
          //label: this.topTextlabel
      }]
    };
    zhutu.on('click', (params) => {
      console.log(params)
      this.echartsData.statefulInspectionName =params.name;
      this.router.navigateByUrl(`/statisticanalysis/delete_one/delete_four`);
    });
    zhutu.setOption(option);
  }

   
  tableTooltip2(biaotou:string){
    var shuju='[{"name":"浦东中队","number":"156","zhanbi":"3%"},{"name":"黄埔中队","number":"144","zhanbi":"2.8%"},'
    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"静安中队","number":"120","zhanbi":"1.3%"},{"name":"普陀中队","number":"100","zhanbi":"1.1%"},'
    shuju+='{"name":"虹口中队","number":"95","zhanbi":"1%"},{"name":"杨浦中队","number":"90","zhanbi":"0.9%"},'
    shuju+='{"name":"闵行中队","number":"88","zhanbi":"0.8%"},{"name":"宝山中队","number":"83","zhanbi":"0.7%"},'
    shuju+='{"name":"徐汇中队","number":"133","zhanbi":"2.1%"},{"name":"长宁中队","number":"122","zhanbi":"1.6%"},'
    shuju+='{"name":"嘉定中队","number":"78","zhanbi":"0.6%"},{"name":"松江中队","number":"75","zhanbi":"0.5%"},'
    shuju+='{"name":"金山中队","number":"65","zhanbi":"0.4%"},{"name":"崇明中队","number":"55","zhanbi":"0.3%"}]'
    var jsonObj =  JSON.parse(shuju);
    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:#000000;font-size:30px;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; background:#FFFFFF; color:#000000;border-collapse:collapse;"cellspacing="0"; >';
        res+='<thead><tr>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">名称</td>';
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">数量</td>'
        res+='<td style="text-align:center;width:30%;border:1px solid #000000">总占比</td>'
        res+='</tr></thead>'
        res+='<tbody>';
        for(var i=0;i<jsonObj.length;i++){
          res+='<tr>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].name+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].number+'</td>'
          res+='<td style="text-align:center;border:1px solid #000000">'+jsonObj[i].zhanbi+'</td></tr>'
        }
        
        res+='</tbody>'
        res+='<tfoot><td style="text-align:center;border:1px solid #000000">总计</td><td style="text-align:center;border:1px solid #000000">1356</td><td style="text-align:center;border:1px solid #000000">19%</td></tfoot>'
        res+='</table></div></div>'
        return res
  }

}