import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
import { ModalHelper, TitleService, _HttpClient } from '@delon/theme';
import { SHARED_IMPORTS } from '@shared';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridApi } from 'ag-grid-community';
import * as echarts from 'echarts';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { MqttService } from 'ngx-mqtt';

import { DataVCardComponent } from '../card/card.component';
import { DataVLjCarInfoTableComponent } from '../lj-car-info-table/lj-car-info-table.component';
import { DataVLjDashboardComponent } from '../lj-dashboard/lj-dashboard.component';
import { DataVT1Component } from '../t1/t1.component';
import { DataVTitleComponent } from '../title/title.component';
import { AgGridComponentComponent } from '../workstation/ag-grid-component/ag-grid-component.component';
import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/lj-ag-grid-component.component';
@Component({
  selector: 'app-data-v-s1',
  standalone: true,
  templateUrl: './second1.component.html',
  styleUrls: ['./second1.component.less'],
  imports: [
    DataVT1Component,
    DataVLjCarInfoTableComponent,
    AgGridAngular,
    AgGridComponentComponent,
    LjAgGridComponentComponent,
    NzPaginationModule,
    DataVCardComponent,
    GridButtonValueRenderer,
    DataVTitleComponent,
    DataVLjDashboardComponent,
    CommonModule,
    ...SHARED_IMPORTS,
    DataVLjCarInfoTableComponent,
    DataVT1Component
  ]
})
export class DataVSecond1Component implements OnInit {
  private readonly http = inject(_HttpClient);
  private readonly modal = inject(ModalHelper);
  private readonly elementRef = inject(ElementRef);
  private readonly titleService = inject(TitleService);
  public items = [1];

  public chartDom = document.getElementById('main')!;
  // public myChart = echarts.init(this.chartDom);
  // public option!: EChartsOption;

  @ViewChild('myGrid') grid!: AgGridAngular;
  public defaultColDef: ColDef = {
    width: 170,
    editable: false
  };

  public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav';
  //多模拟几行数据出来

  rowData: object[] = [];

  colDefs1: ColDef[] = [
    { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
    { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },

    { headerName: '超期', width: 70, field: 'sfcq' },
    { headerName: '操作', width: 90, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
  ];

  colDefs2: ColDef[] = [
    { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 },
    { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },

    { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
    { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
  ];

  client: any;

  constructor(private _mqttService: MqttService) {
    this.client = _mqttService;
  }

  initCharts(): void {
    // 获取DOM
    const lineChart = echarts.init(document.getElementById('lineChart')); // console.log(lineChart);
    const option = {
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      series: [
        {
          name: 'Pressure',
          type: 'gauge',
          progress: {
            show: true
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}'
          },
          data: [
            {
              value: 50,
              name: 'SCORE'
            }
          ]
        }
      ]
    };

    lineChart.setOption(option);
  }

  ngOnInit(): void {
    this.titleService.setTitle('我的工作站');

    for (var i = 1; i < 30; i++) {
      this.rowData.push({
        rwmc: `任务${i}`,
        rwms: `任务描述${i}`,
        kssj: `2024-1-${i} 13:38:${i * 11}`,
        jhwcsj: `2024-1-${i} 13:38:${i * 10}`,
        sfcq: '否',
        dqzt: '正常',
        dqjd: `节点${i}`,
        sjwcsj: `2024-1-${i} 13:38:${i * 27}`,
        bjmc: '报警5',
        bjms: '报警描述5',
        bjsj: `2024-1-${i} 13:38:${i * 12}`,
        gzyy: '-',
        clff: '-',
        tzsj: `2024-1-${i} 13:38:${i * 19}`,
        zycd: '一般',
        tzmc: '系统提示',
        tznr: '账户登录',
        fj: '-',
        cz: '操作'
      });
    }

    this.initCharts();
  }

  ngAfterViewInit(): void {
    // 获取 ag-grid 元素
    const gridDiv = this.elementRef.nativeElement.querySelector('.ag-theme-datav');
    // 获取 ag-grid 内部滚动容器元素
    const scrollContainer = gridDiv.querySelector('.ag-body-viewport');
    // 获取滚动条元素
    const scrollBar = gridDiv.querySelector('.ag-scroller');
  }

  add(): void {
    // this.modal
    //   .createStatic(FormEditComponent, { i: { id: 0 } })
    //   .subscribe(() => this.st.reload());
  }
}