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 autofit from 'autofit.js';
import * as echarts from 'echarts';
import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { MqttService } from 'ngx-mqtt';

import { BlockbusterComponent } from './blockbuster/blockbuster.component';
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: [
    NzCarouselModule,
    DataVT1Component,
    DataVLjCarInfoTableComponent,
    AgGridAngular,
    AgGridComponentComponent,
    LjAgGridComponentComponent,
    NzPaginationModule,
    DataVCardComponent,
    GridButtonValueRenderer,
    DataVTitleComponent,
    DataVLjDashboardComponent,
    CommonModule,
    ...SHARED_IMPORTS,
    DataVLjCarInfoTableComponent,
    DataVT1Component,
    BlockbusterComponent
  ]
})
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 = [
    {
      tmpimg: '/assets/blockbuster/tmp1.png',
      status: 0
    },
    {
      tmpimg: '/assets/blockbuster/tmp2.png',
      status: 1
    },
    {
      tmpimg: '/assets/blockbuster/tmp3.png',
      status: 0
    },
    {
      tmpimg: '/assets/blockbuster/tmp4.png',
      status: 1
    }
  ];

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

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

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

  rowData: object[] = [];
  todayRowData: object[] = [];

  runInfoRowData: object[] = [];
  systemWarnInfoRowData: object[] = [];
  array = [1, 2, 3, 4];
  effect = 'scrollx';
  colDefs0: ColDef[] = [
    {
      headerName: '时间',
      headerClass: 'head-class',
      field: 'time',
      autoHeaderHeight: true,
      // width: 130,
      // flex: 1,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '操作',
      field: 'option',
      headerClass: 'head-class',
      autoHeaderHeight: true,
      // width: 70,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '操作描述',
      // width: 130,
      autoHeaderHeight: true,
      field: 'optionDesc',
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '操作人员',
      // width: 130,
      field: 'optionMan',
      autoHeaderHeight: true,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    }
  ];

  colDefs1: ColDef[] = [
    {
      headerName: '序号',
      field: 'sort',
      // width: 70,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '时间',
      field: 'time',
      // width: 140,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },

    {
      headerName: '任务描述',
      // width: 130,
      field: 'taskDesc',
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '等级',
      // width: 70,
      field: 'level',
      autoHeaderHeight: true,
      cellStyle: {
        'text-align': 'start',
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    }
  ];
  colDefs2: ColDef[] = [
    {
      headerName: '',

      // minWidth: 130,
      field: 'rwmc',
      flex: 1
      // cellStyle: {
      //   'padding-top': '0px',
      //   'padding-right': '0px',
      //   'padding-bottom': '0px',
      //   'padding-left': '18px',
      //   color: '#75F9FD'
      // }
    },
    {
      headerName: '1#重磅',
      // minWidth: 60,
      field: 'one',
      flex: 1,
      cellStyle: {
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px',
        color: '#75F9FD'
      }
    },
    {
      headerName: '2#重磅',
      // minWidth: 60,
      field: 'two',
      flex: 1,
      cellStyle: {
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '3#重磅',
      // minWidth: 60,
      field: 'three',
      flex: 1,
      cellStyle: {
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '4#重磅',
      // minWidth: 60,
      field: 'four',
      flex: 1,
      cellStyle: {
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    },
    {
      headerName: '汇总',
      // minWidth: 60,
      autoHeaderHeight: true,
      field: 'all',
      flex: 1,
      cellStyle: {
        'padding-top': '0px',
        'padding-right': '0px',
        'padding-bottom': '0px',
        'padding-left': '18px'
      }
    }
    // { headerName: '操作', width: 0, autoHeaderHeight: true, 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 {
    autofit.init();
    this.todayRowData.push({
      rwmc: `车辆数`,
      one: `4（辆）`,
      two: `6（辆）`,
      three: `9（辆）`,
      four: '3（辆）',
      all: '22（辆）'
    });
    this.todayRowData.push({
      rwmc: `总吨数`,
      one: `25.1（吨）`,
      two: `45.2（吨）`,
      three: `87.9（吨）`,
      four: '15.5（吨）',
      all: '155（吨）'
    });
    this.todayRowData.push({
      rwmc: `上报热值/估算热值`,
      one: `1/1 (MJ)`,
      two: `2/1 (MJ)`,
      three: `3/3 (MJ)`,
      four: '4/3（MJ)',
      all: '10/8（MJ）'
    });
    for (var i = 1; i < 10; i++) {
      this.runInfoRowData.push({ time: '2024-09-09', option: '锁定', optionDesc: '锁定1号重磅', optionMan: '甲' });
      this.runInfoRowData.push({ time: '2024-09-19', option: '解除', optionDesc: '接触1号重磅', optionMan: '甲' });
      this.systemWarnInfoRowData.push({ sort: 1, time: '2024.01.25-18:32', taskDesc: '2#重磅停止', level: '1级' });
      this.systemWarnInfoRowData.push({ sort: 2, time: '2024.01.26-18:32', taskDesc: '4#重磅停止', level: '3级' });
    }

    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');
    console.log('scrollBar');
    console.log(scrollBar);
  }

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