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 {backgroundImage} from "../../../data/login/login.namespace";
import {NzSliderComponent} from "ng-zorro-antd/slider";
import {MathUtils} from "../../../utils/mathUtils.service";
import {NzMessageService} from "ng-zorro-antd/message";
import {LoginService} from "../../../servies/login/login.service";
import {DATA, INIT_FLAG, LOGIN_DATA, USER_TOKEN} from "../../../data/login/localStorage.namespace";
import {Router} from "@angular/router";
import {BrowserStorageService} from "../../../utils/localStorage.service";



@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,
    private router: Router,  // 路由
    private storage: BrowserStorageService,
    private login: LoginService
  ) {
    this.validateForm.patchValue(this.storage.get(LOGIN_DATA));
  }

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

  // 表单
  validateForm: FormGroup<{
    loginName: FormControl<string>;
    password: FormControl<string>;
    slider: FormControl<string>;
    remember: FormControl<boolean>;
  }> = this.fb.group({
    loginName: ['', [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('验证不通过！')
        this.randomNumber = MathUtils.generateRandomNumber(100)
        return;
      }
      // 发起登录
      this.login.userLogin(this.validateForm.value , (data: any) => {
        if (data['return_code'] === '000000') {
          this.storage.set(LOGIN_DATA, this.validateForm.value);
          this.storage.set(DATA, data['return_data']['object']);
          this.storage.set(USER_TOKEN, data['return_data']['uniqueCode']);
          this.storage.set(INIT_FLAG, true);
          this.router.navigateByUrl('/admin/index').then(r => console.log("返回内容" ,r));
        } else {
          this.message.error(data['return_msg']);
        }
      });

      this.randomNumber = MathUtils.generateRandomNumber(100)

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






}
