import { Component, EventEmitter, Output } from '@angular/core';
import { NavParams } from 'ionic-angular'
import { PromptOption } from '../type'
import { Validate } from 'validate';

const defaultOption: PromptOption = {
  title: '温馨提示',
  content: '',
  icon: false,
  okText:'确认',
  cancelText:'取消'
}

@Component({
  selector: 'modal-prompt',
  template:'<div class="modal-head {{option.titleCss || \'bdb\'}}"' +
  ' [innerHtml]="option.title"' +
  ' *ngIf="!option.icon"></div>' +
  '<div class="modal-icon" *ngIf="option.icon"' +
  ' [innerHtml]="option.icon"></div>' +
  '<div class="modal-body">' +
  '<div [innerHtml]="option.content"></div>' +
  '<div class="item item-input-normal relative">'+
  '<ion-input'+
  ' type="{{input.type || \'text\'}}"'+
  ' name="{{input.name}}"'+
  ' (focus)="onFocus(_value)"'+
  ' (blur)="onBlur(_value)"'+
  ' (input)="onChange(_value)"'+
  ' [(ngModel)]="_value"'+
  ' [disabled]="input.disable"'+
  ' [pattern]="input.regex"'+
  ' value="{{input.initValue}}"'+
  ' placeholder="{{input.placeholder}}">'+
  '</ion-input>'+
  '<div class="absolute right-px-12 top-px-12">{{input.suffix}}</div>'+
  '</div>'+
  '<div class="mt f14 pl-px-15 text-left gray"'+
  ' [ngClass]="{\'red\':error}"'+
  ' [hidden]="!(error)">'+
  '{{error}}'+
  '</div>'+
  '</div>' +
  '<div class="modal-buttons mh-2 pb-2 clearfix">' +
  '<a (click)="cancel()" class="button button-middle wd-px-105 fl {{option.cancelClass || \'button-primary\'}}"' +
  ' [innerHtml]="option.cancelText"></a>' +
  '<a (click)="ok(_value)" class="button button-middle wd-px-105 fr {{option.okClass || \'button-primary button-outline\'}}"' +
  ' [innerHtml]="option.okText"></a>' +
  '</div>' +
  '<div [innerHtml]="option.extra"></div>'
})
export class ModalPromptComponent {
  option: PromptOption = defaultOption;
  _value // 表单数据
  input
  error
  sForm
  validateFormat
  constructor(public params: NavParams, public validate:Validate) {
    this.option = Object.assign({},this.option,params.data);
    this.input = this.option.input || {}
    this.validateFormat = this.input.format
      ? [this.input.name, this.input.format]
      : this.input.name;
  }

  // 获取焦点
  @Output() focusEvent = new EventEmitter();
  onFocus = (_value) => {
    this.focusEvent.emit(_value);
  }

  // 失去焦点
  @Output() blurEvent = new EventEmitter();
  onBlur = (_value) => {
    if(this.validateFormat){
      const res = this.validate.checkOne(_value, this.validateFormat);
      if(res.passed){
        this.blurEvent.emit(_value);
      }else{
        this.error = res.errors[0].message;
      }
    }else{
      this.blurEvent.emit(_value);
    }
  }

  // 输入变化事件
  @Output() changeEvent = new EventEmitter();
  onChange = (_value) => {
    this.changeEvent.emit(_value);
  }

  // 点击确定
  @Output() okEvent = new EventEmitter();
  ok = (_value) => {
    if(this.validateFormat){
      const res = this.validate.checkOne(_value, this.validateFormat);
      if(res.passed){
        this.okEvent.emit(_value);
      }else{
        this.error = res.errors[0].message;
      }
    }else{
      this.okEvent.emit(_value);
    }
  }

  // 点击取消
  @Output() cancelEvent = new EventEmitter();
  cancel = () => {
    this.cancelEvent.emit(false);
  }
}