import {Component} from '@angular/core';
import {NzCarouselComponent, NzCarouselContentDirective} from "ng-zorro-antd/carousel";
import {NgForOf, NgOptimizedImage} from "@angular/common";
import {fork} from "child_process";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {
  FormControl,
  FormGroup,
  FormsModule,
  NonNullableFormBuilder,
  ReactiveFormsModule,
  Validators
} from "@angular/forms";
import {NzInputDirective, NzInputGroupComponent} from "ng-zorro-antd/input";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {NzCheckboxComponent} from "ng-zorro-antd/checkbox";
import {NzTransitionPatchDirective} from "ng-zorro-antd/core/transition-patch/transition-patch.directive";
import {backgroundImage} from "../../../data/login/login.namespace";
import {NzSliderComponent} from "ng-zorro-antd/slider";
import {MathUtilsService} from "../../../utils/mathUtils.service";
import {NzMessageService} from "ng-zorro-antd/message";



@Component({
  selector: 'app-login',
  standalone: true,
  templateUrl: './login.component.html',
  host: {ngSkipHydration: 'true'},
  imports: [
    NzCarouselComponent,
    NzCarouselContentDirective,
    NgForOf,
    NgOptimizedImage,
    NzInputGroupComponent,
    NzFormItemComponent,
    ReactiveFormsModule,
    NzFormControlComponent,
    NzColDirective,
    NzButtonComponent,
    NzCheckboxComponent,
    NzInputDirective,
    NzRowDirective,
    NzFormDirective,
    NzSliderComponent,

  ],

  styleUrl: './login.component.less'
})
export class LoginComponent {

  constructor(
    private fb: NonNullableFormBuilder,
    private message: NzMessageService
  ) {}

  // 背景图片
  backgroundImage = backgroundImage;
  // 验证随机数
  randomNumber = MathUtilsService.generateRandomNumber(100);

  // 表单
  validateForm: FormGroup<{
    userName: FormControl<string>;
    password: FormControl<string>;
    slider: FormControl<string>;
    remember: FormControl<boolean>;
  }> = this.fb.group({
    userName: ['', [Validators.required]],
    password: ['', [Validators.required]],
    slider: ['', [Validators.required]],
    remember: [true]
  });



  // 登录
  submitForm(): void {
    if (this.validateForm.valid) {
      if (Number(this.validateForm.value.slider) !== this.randomNumber) {
        this.message.warning('验证不通过！')
      }



    } else {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          // 表单脏检查
          control.markAsDirty();
          control.updateValueAndValidity({ onlySelf: true });
        }
      });
    }
  }






}
