import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';

import { ModalHelper, _HttpClient } from '@delon/theme';
import { SHARED_IMPORTS } from '@shared';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef } from 'ag-grid-community';
import {
  GridApi,
} from 'ag-grid-community';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { DataVCardComponent } from '../card/card.component';
import { DataVTitleComponent } from '../title/title.component';
import { GridButtonValueRenderer } from './grid-button/grid-button';
import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component';
@Component({
  selector: 'app-data-v-workstation',
  standalone: true,
  imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
  templateUrl: './workstation.component.html',
  styleUrls: ['./workstation.component.less']
})
export class DataVWorkstationComponent implements OnInit, AfterViewInit {
  private readonly http = inject(_HttpClient);
  private readonly modal = inject(ModalHelper);
  private readonly elementRef = inject(ElementRef);

  @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: '序号',
      valueGetter: function (params: any) {
        return parseInt(params.node.id) + 1;
      },
      width: 90,
      sortable: true,
      unSortIcon: true, field: "xh",


    },
    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
    { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
    { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", minWidth: 170, flex: 1 },
    { headerName: '超期', width: 80, field: "sfcq", },
    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
  ];

  colDefs2: ColDef[] = [
    {
      headerName: '序号', valueGetter: function (params: any) {
        return parseInt(params.node.id) + 1;
      }, width: 90, unSortIcon: true, field: "xh",
    },
    { headerName: '任务名称', unSortIcon: true, field: "rwmc", },
    { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 },
    { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 },
    { headerName: '当前状态', field: "dqzt", },
    { headerName: '当前节点', field: "dqjd", },
    { headerName: '实际完成时间', field: "sjwcsj", minWidth: 170, flex: 1 },
    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
  ];

  colDefs3: ColDef[] = [
    {
      headerName: '序号', valueGetter: function (params: any) {
        return parseInt(params.node.id) + 1;
      }, width: 90, unSortIcon: true, field: "xh",
    },
    { headerName: '报警名称', unSortIcon: true, field: "bjmc", },
    { headerName: '报警等级', unSortIcon: true, field: "bjdg", },
    { headerName: '报警描述', unSortIcon: true, field: "bjms", minWidth: 170, flex: 1 },
    { headerName: '报警时间', unSortIcon: true, field: "bjsj", minWidth: 170, flex: 1 },
    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },

    { headerName: '故障原因', field: "gzyy", },
    { headerName: '处理方法', field: "clff", },
    { headerName: '注意事项', field: "clff", },
  ];

  // Column Definitions: Defines the columns to be displayed.
  colDefs4: ColDef[] = [
    {
      headerName: '序号', valueGetter: function (params: any) {
        return parseInt(params.node.id) + 1;
      }, width: 90, unSortIcon: true, field: "xh",
    },
    { headerName: '通知时间', unSortIcon: true, field: "tzsj", minWidth: 170, flex: 1 },
    { headerName: '重要程度', unSortIcon: true, field: "zycd", },
    { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
    { headerName: '通知内容', unSortIcon: true, field: "tznr", minWidth: 170, flex: 1 },
    { headerName: '附件', field: "fj", },
    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
  ];

  ngOnInit(): void {
    console.log('ngOnInit' + this.rowData.length);

    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: "操作"
      });
    }

  }

  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());
  }


}
