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

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

@Component({
  selector: 'modal-confirm',
  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"' +
  ' [innerHtml]="option.content"' +
  ' [class.bold]="option.icon"></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()" 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 ModalConfirmComponent {
  option: ModalOption = defaultOption;

  constructor(params: NavParams) {
    this.option = Object.assign({},this.option,params.data);
  }

  // 点击确定
  @Output() okEvent = new EventEmitter();
  ok = () => {
    this.okEvent.emit(true);
  }

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