import {Component, inject} from '@angular/core';
import {NzCarouselComponent, NzCarouselContentDirective} from "ng-zorro-antd/carousel";
import {NgForOf, NgOptimizedImage} from "@angular/common";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent} from "ng-zorro-antd/form";
import {
  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 {DATA, INIT_FLAG, LOGIN_DATA, USER_TOKEN} from "../../../data/login/localStorage.namespace";
import {Router} from "@angular/router";
import { LocalStorageService} from "../../../utils/localStorage.service";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {LoginService} from '../../../services/login.service';



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

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

  private fb = inject(NonNullableFormBuilder);
  private login = inject(LoginService);
  constructor(
    private message: NzMessageService ,
    private storage: LocalStorageService ,
    private router: Router,  // 路由
  ) {}

  validateForm = this.fb.group({
    loginName: this.fb.control('', [Validators.required]),
    password: this.fb.control('', [Validators.required]),
    slider: [0, [Validators.required]],
    remember: this.fb.control(true)
  });

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

  // 表单


  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.setItem(LOGIN_DATA, this.validateForm.value);
          this.storage.setItem(DATA, data['return_data']['object']);
          this.storage.setItem(USER_TOKEN, data['return_data']['token']);
          this.storage.setItem(INIT_FLAG, true);
          this.router.navigateByUrl('/admin/index');

        } else {
          this.message.error(data['return_msg']);
        }
      });

      this.randomNumber = MathUtils.generateRandomNumber(100)
      console.log('submit', this.validateForm.value);
    } else {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          control.markAsDirty();
          control.updateValueAndValidity({onlySelf: true});
        }
      });
    }


  }
}
