import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { AbstractControl, NonNullableFormBuilder, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzUploadFile } from 'ng-zorro-antd/upload';
import { CommonNzModule } from '../../common.nz.module';
import { ApiService } from '../../services/api.service';
import { BasicDataService } from '../../services/basic.service';
import { SettingService } from '../../services/setting.service';
import { ImageUploadGroupComponent } from '../image-upload-group/image-upload-group.component';

@Component({
  selector: 'issue-report-form',
  standalone: true,
  imports: [CommonNzModule, ImageUploadGroupComponent],
  templateUrl: './issue-report-form.component.html',
  styleUrl: './issue-report-form.component.less',
})
export class IssueReportFormComponent {
  @ViewChild('imageUploadGroup') imageUploadGroup!: ImageUploadGroupComponent;
  @Output() onClose = new EventEmitter();
  validateForm = this.fb.group({
    name: this.fb.control<string>('', [Validators.required, Validators.maxLength(100)]),
    position: this.fb.control<number | null>(null, [this.involvedValidator.bind(this)]),
    operation: this.fb.control<number | null>(null, [this.involvedValidator.bind(this)]),
    equipment: this.fb.control<number | null>(null, [this.involvedValidator.bind(this)]),
    tendency: this.fb.control<number | null>(0, [Validators.required]),
    description: this.fb.control<string>('', [Validators.required]),
    priority: this.fb.control<number>(0, [Validators.required]),
    images: this.fb.control<string>('', []),
    department: this.fb.control<string>('', [Validators.required]),
    responsible: this.fb.control<string>('', []),
  });
  uploading = false;
  @Input() tendencies: Option[] = [
    {
      value: 0,
      label: '疑似风险',
    },
    {
      value: 1,
      label: '疑似隐患',
    },
    {
      value: 2,
      label: '无法明确的问题',
    },
  ];
  @Input() priorities: Option[] = [
    {
      value: 0,
      label: '普通',
    },
    {
      value: 1,
      label: '紧急',
    },
  ];

  fileList: NzUploadFile[] = [
    {
      uid: '15',
      name: '现场照片',
      status: 'done',
      url: 'https://precaution-check2.stage.leadinvr.com/api/uploadFile/get?name=tZuzRmxRvku74ccb898b08bdcbe77a050b20863d1cc6.jpg',
      preview:
        'https://precaution-check2.stage.leadinvr.com/api/uploadFile/get?name=tZuzRmxRvku74ccb898b08bdcbe77a050b20863d1cc6.jpg',
    },
  ];
  constructor(
    private fb: NonNullableFormBuilder,
    private message: NzMessageService,
    private setting: SettingService,
    private api: ApiService,
    private basic: BasicDataService
  ) {}
  involvedValidator(control: AbstractControl) {
    if (!this.validateForm) {
      return null;
    }
    const position = this.validateForm.get('position')?.value;
    const operation = this.validateForm.get('operation')?.value;
    const equipment = this.validateForm.get('equipment')?.value;
    if (!position && !operation && !equipment) {
      return { involved: true, error: true, required: true };
    }
    return null;
  }
  reset() {
    this.validateForm.reset();
    this.validateForm.markAsUntouched();
    this.validateForm.updateValueAndValidity();

    this.fileList = [];
    this.uploading = false;
  }
  onCancel() {
    this.onClose.emit();
  }
  async submitForm() {
    if (!this.validateForm.valid) {
      Object.values(this.validateForm.controls).forEach(control => {
        if (control.invalid) {
          control.markAsDirty();
          control.updateValueAndValidity({ onlySelf: true });
        }
      });
    } else {
      this.onSubmit();
    }
  }
  onInvolvedChange() {
    this.validateForm.get('position')?.updateValueAndValidity();
    this.validateForm.get('operation')?.updateValueAndValidity();
    this.validateForm.get('equipment')?.updateValueAndValidity();
  }
  async onSubmit() {
    console.log(this.validateForm.value);
    console.log(this.imageUrls);
    this.onClose.emit();
  }
  get positions() {
    return this.basic.positions;
  }
  get operations() {
    return this.basic.operations;
  }
  get equipments() {
    return this.basic.equipments;
  }
  get departments() {
    return this.basic.departments;
  }
  get users() {
    return this.setting.usersOfCurrentCompany;
  }
  get imageUrls() {
    return this.imageUploadGroup.fileList.map(file => file.url);
  }
}
