import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'
import * as echarts from 'echarts';
@Component({
  selector: 'app-criminal-records-admin',
  templateUrl: './criminal-records-admin.component.html',
  styleUrls: ['./criminal-records-admin.component.scss']
})
export class CriminalRecordsAdminComponent implements OnInit {

  validateForm!: FormGroup;
  constructor(private fb: FormBuilder, private router: Router) { }

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      level: [null],
      type: [null],
      site: [null],
      datePicker: [null]
    });

    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('piechart'));
    let option = {
      color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'],
      tooltip: {
        trigger: 'item'//触发类型
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: [85, 112],//内半径外，外半径
          left: '-30%',
          avoidLabelOverlap: false,//防止标签重叠策略
          label: {//每一个标签外网延伸的引导说明
            show: false,
            position: 'outside'
          },
          labelLine: {//引导线
            show: true,
            showAbove: true
          },
          emphasis: {//中间高亮区域
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          data: [
            { value: 26, name: '工作人员倚靠加油机或者立柱1' },
            { value: 86, name: '工作人员倚靠加油机或者立柱2' },
            { value: 34, name: '工作人员倚靠加油机或者立柱3' },
            { value: 55, name: '工作人员倚靠加油机或者立柱4' },
            { value: 60, name: '工作人员倚靠加油机或者立柱5' },
            { value: 26, name: '工作人员倚靠加油机或者立柱6' },
            { value: 86, name: '工作人员倚靠加油机或者立柱7' },
            { value: 34, name: '工作人员倚靠加油机或者立柱8' },
            { value: 55, name: '工作人员倚靠加油机或者立柱9' },
            { value: 60, name: '工作人员倚靠加油机或者立柱10' },
            { value: 26, name: '工作人员倚靠加油机或者立柱11' },
            { value: 86, name: '工作人员倚靠加油机或者立柱12' },
            { value: 34, name: '工作人员倚靠加油机或者立柱13' },
            { value: 55, name: '工作人员倚靠加油机或者立柱14' },
            { value: 60, name: '工作人员倚靠加油机或者立柱15' },
            { value: 26, name: '工作人员倚靠加油机或者立柱16' },
            { value: 86, name: '工作人员倚靠加油机或者立柱17' },
            { value: 34, name: '工作人员倚靠加油机或者立柱18' },
            { value: 55, name: '工作人员倚靠加油机或者立柱19' },
            { value: 60, name: '工作人员倚靠加油机或者立柱20' }
          ],
          tooltip: {//鼠标移入提示
            position: 'right',
            padding: [14, 19],
            backgroundColor: 'rgba(28, 129, 218, 0.4)',
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);

    let mybarChart = echarts.init(document.getElementById('barchart'));
    let baroption = {
      xAxis: {
        type: 'category',
        data: this.getThirtyDays(),
        axisLine: {
          show: false, 
          lineStyle: {
            color: '#91CCFF'
          }
        },
        axisTick: {//刻度线
          show: false
        }
      },
      yAxis: {
        type: 'value',
        nameTextStyle: {
          color: '#C4E2FC'
        },
        splitLine: {//分割线
          lineStyle: {
            color: ['#0f4374'],
            width: 2
          }
        },
        axisTick: {//刻度线
          show: false
        },
        axisLine: {//轴线
          show: false, 
          lineStyle: {
            color: '#C4E2FC'
          }
        }
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101],
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#23F0FF' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(35, 153, 255, 0.1)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          barWidth: '28%'
        }
      ],
      grid: {
        left: '36px',
        right: '30px',
        bottom: '50px',
        top: '45px'
      }
    };
    mybarChart.setOption(baroption);
  }
  getThirtyDays() {
    //获取当前日期
    let myDate = new Date();
    var nowY = myDate.getFullYear();
    var nowM = myDate.getMonth() + 1;
    var nowD = myDate.getDate();
    var enddateStr = nowY + "-" + (nowM < 10 ? "0" + nowM : nowM) + "-" + (nowD < 10 ? "0" + nowD : nowD);//当前日期
    var enddate = new Date(enddateStr);


    //获取三十天前日期
    var lw = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
    var lastY = lw.getFullYear();
    var lastM = lw.getMonth() + 1;
    var lastD = lw.getDate();
    var startdateStr = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);//三十天之前日期
    var startDate = new Date(startdateStr);

    const dateList = []
    while (true) {
      startDate.setDate(startDate.getDate() + 1)
      if (startDate.getTime() <= enddate.getTime()) {
        if (startDate.getDate() < 10) {
          // startDate.getFullYear() 获取年，此处没加上年份
          dateList.push((startDate.getMonth() + 1) + '.0' + startDate.getDate())
        } else {
          dateList.push((startDate.getMonth() + 1) + '.' + startDate.getDate())
        }
      } else {
        break
      }
    }
    return dateList;
  }
  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }
  resetForm(e: MouseEvent): void {
    e.preventDefault();
    this.validateForm.reset();
    for (const key in this.validateForm.controls) {
      this.validateForm.controls[key].markAsPristine();
      this.validateForm.controls[key].updateValueAndValidity();
    }
  }


  list: any = [
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
    { id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' }
  ]
  look() {
    this.router.navigate(['home/records/petrolStation'])
  }


  selectedType = '分布'
  selectedRankingType = '站点排名'
  echartClick(type){
    this.selectedType = type
  }
  echartClick2(type){
    this.selectedRankingType = type
  }
}