import { Component, ElementRef, Input, SimpleChanges, OnChanges } from '@angular/core';

/**
 * 在表单dom中展示错误信息
 * 需要将formControl中的errors对象传入
 *
 * eg: 在姓名输入框下方展示验证信息
 *  将viewModel.form.name.errors对象传入
 *  <label class="k-form-field">
        <span>姓名</span>
        <input class="k-textbox" formControlName="name" />
        <validationMessage [errors]="viewModel.form.name.errors"></validationMessage>
    </label>
 */

@Component({
  selector: 'validationMessage',
  template: `
      <div class="farris-feedback f-state-invalid">
          <span class="f-icon f-icon-message_warning f-feedback-icon" (click)="showErrorMessage=true" *ngIf="!showErrorMessage"></span>
          <span class="f-feedback-message" *ngIf="showErrorMessage" (click)="showErrorMessage=false">{{this.errorMessage}}</span>
      </div>
    `,
  styles: []
})
class ValidationMessageComponent implements OnChanges {
  @Input() errors;
  @Input() type: string;
  errorMessage: string;
  // 默认显示错误消息
  public showErrorMessage = true;
  constructor(
    private ele: ElementRef,
  ) {

  }

  ngOnChanges(changes: SimpleChanges): void {
    this.errorMessage = this.getErrorMessage(this.errors);
    this.ele.nativeElement.style.display = !this.errorMessage ? 'none' : 'block';
  }
  private getErrorMessage(errors) {
    if (!errors) {
      return null;
    } else {
      let errorMessage = '';
      Object.keys(errors).forEach(key => {
        if (errors[key].name) {
          errorMessage = errorMessage + ' ' + errors[key].name;
        }
      });
      return errorMessage;
    }
  }
}
export { ValidationMessageComponent };