/*
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-12-25 16:13:50
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-01-18 11:07:46
 */
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http'
declare var echarts: any;

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

  constructor(private http:HttpClient) { }

  ngOnInit(): void {
    let level = sessionStorage.getItem("level");
    if(level == "0"){//如果是总队
      this.preparelevels = [
        {name:"总队",value:"1"},
        {name:"支队",value:"2"},
        {name:"大队",value:"4"},
        {name:"中队",value:"8"}
      ]
      this.PlanLevel=1
    }
    if(level == "1"){//如果是支队
      this.preparelevels = [
        {name:"支队",value:"2"},
        {name:"大队",value:"4"},
        {name:"中队",value:"8"}
      ]
      this.PlanLevel=2
    }
    if(level == "2"){//如果是大队
      this.preparelevels = [
        {name:"大队",value:"4"},
        {name:"中队",value:"8"}
      ]
      this.PlanLevel=4
    }
    if(level == "3"){//如果是中队
      this.preparelevels = [
        {name:"中队",value:"8"}
      ]
      this.PlanLevel=8
    }
    var scrollflaga = true;
    var win=document.getElementById('tbodydiv')
    /* window.setTimeout(()=>{
      var a = document.getElementById("table").offsetTop; 
      window.onscroll=function(){
        if(scrollflaga){
          if(a>=win.scrollTop&&a<(win.scrollTop+win.offsetHeight)){
            scrollflaga=false
            this.getAlltabledate()  
          }
        }
      }
    }) */
    
    this.getAlltabledate()  
  }
  ngOnDestroy () {
    /* this.indexbar.clear()
    this.indexbar.dispose() */
  }

  preparelevels:any
  selected = new FormControl(0); //选项卡 实例
  level//类型
  js//组织机构
  addtime//时间
  projectlevel//编制级别
  previewshow=false//预览得分是否显示
  tableDate
  isallDate=true//是否显示完成数据，默认显示
  companyBuiltInGrouping=["基本信息","四周毗邻","消防设施"]
  indexbar //饼状图实例
  indexzhu
  PlanLevel//编制级别

  //获取表格数据
  getAlltabledate(){
    
    let paramsdata:any = {
      VerifyType:3,
      ContentType:Number(this.level)||'',
      Level:this.PlanLevel||''
      
    }
    this.http.get("/api/ContentVerifies",{params:paramsdata}).subscribe((data:any)=>{
      console.log(data)
      this.tableDate=data.items
    })
  }
  //提交查询
  onSubmit(value){
    console.log(value)
    this.getAlltabledate()
  }
  //刷新
  record(){
    this.level=''
    this.PlanLevel=''
    this.getAlltabledate()
  }
  //表格点击事件
  tableClick(e,key){
    //e.target.parentElement.bgColor='#2196F3'
    console.log(e)
  }
  //变更数据和全部数据切换按钮
  buttonChange(){
    this.isallDate=!this.isallDate
    this.previewshow=false
  }

  //分数饼状图
  bar(){
    var ec = echarts as any;
    this.indexbar=ec.init(document.getElementById('indexbar'),'light');
    var option = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      title: {
        text: '总分',
        left: 'center',
        bottom:70,
        textStyle:{
          color:'#FFFFFF',
          fontSize:16
        }
    },
      series: [
          {
              name: '分数',
              type: 'pie',
              radius: ['50%', '70%'],
              bottom:50,
              avoidLabelOverlap: false,
              label: {
                  show: true,
                  position: 'center',
                  fontSize:16,
                  color:'#FFFFFF'
              },
              
              labelLine: {
                  show: false
              },
              data: [
                  {value: 93, name: '93分', itemStyle:{color:'#2196F3'}},
                  {value:7, itemStyle:{color:'#FFFFFF'}}
              ]
          }
      ]
  };
  this.indexbar.setOption(option);
  }
  //分数柱状图
  zhu(){
    var ec = echarts as any;
    this.indexzhu=ec.init(document.getElementById('zhu'),'light');
    var option={
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show:false,
        axisLine:{
          show:false
        },
        splitLine:{
          show:false
        },
        axisTick:{
          show:false
        },
    },
    yAxis: {
        type: 'category',
        axisTick:{
          show:false
        },
        axisLine:{
          show:false
        },
        axisLabel:{
          color:"#FFFFFF",
          fontSize:16
        },
        data: ['实战演练记录', '六熟悉记录', '上传CAD', '实景图', '功能分区', '重点单位', '消防设施','四周毗邻','基本信息']
    },
    series: [
        {
          
            type: 'bar',
            stack: '总量',
            showBackground: true,
            backgroundStyle: {
              color: '#FFFFFF'
             },
            label: {
                show: true,
                position: 'inside',
                fontSize:14,
                formatter: '{c}分'
            },
            data: [
              {value:18, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:19, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
              {value:13, itemStyle:{color:'#FFCC00'}},
              {value:6, itemStyle:{color:'#FF4D4D'}},
              {value:19, itemStyle:{color:'#58D091'}},
              {value:16, itemStyle:{color:'#58D091'}},
            ]
        },
        {
           
            type: 'bar',
            stack: '总量',
            label: {
                show: false,
                position: 'insideRight'
            },
            data: [2, 4, 1, 4, 4, 7, 14,1,4],
            itemStyle:{
              color:"#FFFFFF",
            },
        },
        
    ]
    }
    this.indexzhu.setOption(option);
  }
  preview(){
    this.previewshow=!this.previewshow
    if(this.previewshow){
      window.setTimeout(()=>{
        this.bar()
        this.zhu()
      },0)
    }
  }

}