import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { getAnimationFrame } from '../../../app.util';
import { verticalInOutRelative } from '../../../common.animation';
import { CommonNzModule } from './../../../common.nz.module';

@Component({
  selector: 'datav-header',
  standalone: true,
  imports: [CommonNzModule],
  templateUrl: './datav-header.component.html',
  styleUrl: './datav-header.component.less',
  animations: [verticalInOutRelative],
})
export class DatavHeaderComponent {
  title = '上海轨道交通双预防智慧大屏';

  @Input() screens: Option<string>[] = [];
  @Input() currentScreen = '';

  @Output() changeScreen = new EventEmitter<string>();

  private _serverTime: string = '';
  @Input()
  set serverTime(v: string) {
    this._serverTime = v;
    this.count(v);
  }
  get serverTime() {
    return this._serverTime;
  }
  localNow: Date = new Date();
  serverNow: Date = new Date();
  distance: number = 0;
  now?: Date;
  animationFrameTimer: any;
  animationFrameFunc = getAnimationFrame();
  constructor(private router: Router) {}
  update() {
    this.now = new Date(new Date().getTime() + this.distance);
    this.animationFrameTimer = this.animationFrameFunc(this.update.bind(this));
  }
  count(serverNow?: string) {
    window.cancelAnimationFrame(this.animationFrameTimer);
    this.localNow = new Date();
    this.serverNow = serverNow ? new Date(serverNow) : new Date();
    this.distance = this.serverNow.getTime() - this.localNow.getTime();
    this.update();
  }
  // now
  onScreenChange(value: string) {
    this.changeScreen.emit(value);
  }

  toManager(ev: Event) {
    ev.preventDefault();
    this.router.navigateByUrl('/manager');
  }
  ngOnDestroy(): void {}

  get weekDayText(): string {
    if (!this.now) return '';
    const weekDay = this.now.getDay();
    return ['日', '一', '二', '三', '四', '五', '六'][weekDay];
  }
}
