import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import { ApiService } from 'app/services'
import { SharedModule } from 'app/shared/shared.module'
import { NzSafeAny } from 'ng-zorro-antd/core/types'
import { finalize } from 'rxjs'
import { init, EChartsType } from 'echarts'

@Component({
	selector: 'app-asset-operational-statistics',
	standalone: true,
	imports: [SharedModule],
	templateUrl: './asset-operational-statistics.component.html',
	styleUrl: './asset-operational-statistics.component.less',
})
export class AssetOperationalStatisticsComponent {
	constructor(private api: ApiService) {}

	@ViewChild('openTimeChart') openTimeChart?: ElementRef<HTMLDivElement>

	@ViewChild('runningStatusChart') runningStatusChart?: ElementRef<HTMLDivElement>

	@Input() assetId!: number

	data: NzSafeAny

	type = 1

	loading = false
	ngOnInit() {
		this.onChange()
	}

	onChange() {
		this.loading = true
		this.api
			.operationalStatistics({ id: this.assetId, type: this.type })
			.pipe(
				finalize(() => {
					this.loading = false
				}),
			)
			.subscribe((res) => {
				// console.log('res', res)
				this.data = res.body
				if (this.data) {
					setTimeout(() => {
						this.renderBar()
						this.renderPie()
					})
				}
			})
	}

	barRef?: EChartsType
	renderBar() {
		if (this.openTimeChart?.nativeElement) {
			if (!this.barRef) {
				this.barRef = init(this.openTimeChart?.nativeElement)
			}
			const name: string[] = []
			const value: number[] = []
			this.data?.openLogs.forEach((i: NzSafeAny) => {
				name.push(i.name)
				value.push(i.value)
			})
			this.barRef.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					data: name,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						data: value,
						type: 'bar',
					},
				],
			})
		}
	}
	pieRef?: EChartsType
	renderPie() {
		if (this.runningStatusChart?.nativeElement) {
			if (!this.pieRef) {
				this.pieRef = init(this.runningStatusChart?.nativeElement)
				let data: NzSafeAny[] = []
				const odata: NzSafeAny[] = this.data?.runLogs ?? []
				const total = odata.reduce((a: number, b: any) => a + Math.abs(b.value), 0)

				data = odata.map((i: NzSafeAny) => {
					const value = Math.abs(i.value)
					const percent = ((value / total) * 100).toFixed(2)

					return {
						...i,
						percent,
						value,
					}
				})
				this.pieRef.setOption({
					tooltip: {
						trigger: 'item',
					},
					legend: {
						orient: 'scroll',

						formatter: function (name: string, d: any) {
							const item = data.find((i: NzSafeAny) => i.name === name)
							return name + ' | ' + item?.percent + '%' + '   ' + item?.value + '天'
						},
					},
					series: [
						{
							name: '运行状态',
							type: 'pie',
							radius: ['40%', '70%'],
							// center: ['40%', '50%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2,
							},
							label: {
								show: false,
								position: 'center',
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 30,
									fontWeight: 'bold',
								},
							},
							labelLine: {
								show: false,
							},
							data: data,
						},
					],
				})
			}
		}
	}
}