import { Component, Input, SimpleChanges } from '@angular/core';
import { PieChartComponent } from '../pie-chart/pie-chart.component';
import { CommonNzModule } from './../../../../../common.nz.module';
import { GaugeChartComponent } from './../gauge-chart/gauge-chart.component';
import { PanelHeaderComponent } from './../panel-header/panel-header.component';
import { PanelNotificationComponent } from './../panel-notification/panel-notification.component';

interface LegendItem {
  name: string;
  value: number;
  key: 'levelCInfo' | 'levelBInfo' | 'levelAInfo' | 'levelImportantInfo';
  colors: [string, string];
  legendColors: [string, string];
}

const redColor: [string, string] = ['#FF7E75', '#FE6257'];
const greenColor: [string, string] = ['#53EFCD', '#24D3AC'];
const yellowColor: [string, string] = ['#FDD568', '#F7C335'];
const blueColor: [string, string] = ['#508FFE', '#327DFE'];

const get60OpacityColor = (color: [string, string]): [string, string] => {
  return [color[0], color[1] + '3C'];
};

@Component({
  selector: 'hazard-panel',
  standalone: true,
  imports: [CommonNzModule, PieChartComponent, PanelHeaderComponent, PanelNotificationComponent, GaugeChartComponent],
  templateUrl: './hazard-panel.component.html',
  styleUrl: './hazard-panel.component.less',
})
export class HazardPanelComponent {
  @Input() data: Datav.HazardStatisticsData | null = null;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['data']) {
      if (this.data) {
        this.setTotal();
        this.setInfoValues();
        this.onLegendClick(this.infos.find(item => item.name === this.activeType)!);
      }
    }
  }

  activeType: string = 'C类';
  total = 0;
  deadline = 0;
  infos: LegendItem[] = [
    { name: 'C类', value: 0, key: 'levelCInfo', colors: get60OpacityColor(blueColor), legendColors: blueColor },
    { name: 'B类', value: 0, key: 'levelBInfo', colors: get60OpacityColor(greenColor), legendColors: greenColor },
    { name: 'A类', value: 0, key: 'levelAInfo', colors: get60OpacityColor(yellowColor), legendColors: yellowColor },
    { name: '重大', value: 0, key: 'levelImportantInfo', colors: get60OpacityColor(redColor), legendColors: redColor },
  ];
  detail = {
    total: 83,
    unStart: 12,
    processing: 6,
    completed: 18,
  };

  setTotal() {
    this.total = this.data?.troubleResolveInfo?.total || 0;
    this.deadline = this.data?.troubleResolveAdventNumber || 0;
  }
  setInfoValues() {
    this.infos[0].value = this.data?.troubleResolveInfo?.levelCInfo?.total || 0;
    this.infos[1].value = this.data?.troubleResolveInfo?.levelBInfo?.total || 0;
    this.infos[2].value = this.data?.troubleResolveInfo?.levelAInfo?.total || 0;
    this.infos[3].value = this.data?.troubleResolveInfo?.levelImportantInfo?.total || 0;
    this.infos = this.infos.slice(); // for refreshing chart
  }

  onLegendClick(item: LegendItem) {
    this.activeType = item.name;
    this.detail.total = item.value;
    // this.detail.unStart = Math.floor(Math.random() * 100);
    // this.detail.processing = Math.floor(Math.random() * 100);
    // this.detail.completed = Math.floor(Math.random() * 100);
    this.detail.unStart = this.data?.troubleResolveInfo[item.key]?.notStarted || 0;
    this.detail.processing = this.data?.troubleResolveInfo[item.key]?.inProgress || 0;
    this.detail.completed = this.data?.troubleResolveInfo[item.key]?.completed || 0;
  }
}
