import { Component, EventEmitter, Output } from '@angular/core';
import { NavParams } from 'ionic-angular'
import { ModalOption } from '../type'
import { BaseLog as Log } from 'base-log';
import { Message } from '../../service/message'
const log = new Log('ModalProgressComponent');

const defaultOption: ModalOption = {
  title: '温馨提示',
  content: '',
  icon: false
}

@Component({
  selector: 'modal-progress',
  template:`
  <div (click)="ok($event)">
  <div class="modal-head bdb" *ngIf="!option.icon"
   [innerHtml]="option.title"></div>
  <div class="modal-body pb-px-5"
   [innerHtml]="option.content"></div>
   <div class="progress-bar">
   <span class="progress" [style.width]="width"></span>
   </div>
    <div class="modal-buttons text-center clearfix">
   <div [innerHtml]="option.extra"></div>
   <a (click)="ok()" class="button button-middle wd-px-160 mb-2 {{option.okClass || 'button-primary'}}"
   [innerHtml]="option.okText"></a>
  </div>
  </div>
`
})
export class ModalProgressComponent {
  option: ModalOption = defaultOption;
  width: string // 进度宽度

  set progress(progress){
    this.width = parseInt('' + progress*100) + '%';
    log.info('width:',this.width);
  }

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

  ionViewDidEnter(){
    this.message.receive('modal-progress',(progress = 0) => {
      this.width = progress*100 + '%';
    })
  }

  // 点击弹框事件
  @Output() okEvent = new EventEmitter();
  ok = () => {
    this.okEvent.emit(true);
  }
}