window.AlertClass = AlertClass;
window.ConfirmClass = ConfirmClass;
window.ToastClass = ToastClass;


// 组件样式，引入js自动引入
window.onload = function(){
  let componentStyle = document.createElement('style');
  let componentStyleHtml = '.component_mask{' +
    'position: fixed;z-index: 9998;width: 100%;height: 100%;top: 0;left: 0;' +
    'background: rgba(0,0,0,.3);}' +
    '.component_toast {' +
    'position: relative;top: 30%;margin: 0 auto;min-width: 200px;width: 50%;max-width: 300px;' +
    'padding: 10px;background: #fff;text-align: center;border-radius: 5px;}' +
    '.component_dialog {' +
    'position: fixed;z-index: 9999;min-width: 300px;top: 50%;left: 50%;' +
    '-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: #fafafc;' +
    'text-align: center;border-radius: 3px;}' +
    '.component_dialog_confirm .component_dialog .component_dialog_hd {' +
    'padding: 1.2em 20px .5em}' +
    '.component_dialog_confirm .component_dialog .component_dialog_bd {' +
    'text-align: left}' +
    '.component_dialog_hd {' +
    'padding: 1.2em 20px .5em;}' +
    '.component_dialog_title {' +
    'font-weight: 400;font-size: 17px;}' +
    '.component_dialog_bd {' +
    'padding: 0 20px;font-size: 15px;color: #888;word-wrap: break-word;word-break: break-all;}' +
    '.component_dialog_ft {' +
    'position: relative;line-height: 42px;margin-top: 20px;font-size: 17px;display: -webkit-box;' +
    'display: -webkit-flex;display: -ms-flexbox;display: flex;}' +
    '.component_dialog_ft .component_btn {' +
    'display: block;-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;color: #999;' +
    'text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-left: 1px solid #d5d5d6;}' +
    '.component_dialog_ft .component_btn:first-child{border: none;}'+
    '.component_dialog_ft .component_btn:active {' +
    'background-color: #eee;}' +
    '.component_dialog_ft:after {content: " ";position: absolute;left: 0;top: 0;width: 100%;' +
    'height: 1px;border-top: 1px solid #d5d5d6;color: #d5d5d6;-webkit-transform-origin: 0 0;' +
    'transform-origin: 0 0;-webkit-transform: scaleY(.5);transform: scaleY(.5)}' +
    '.component_dialog_ft .confirm{' +
    'color: #3cc51f;}'+
    '.component_dialog_ft .cancel{' +
    'color: #E42626;}'+
    '.component_btn_dialog.default {color: #353535}.component_btn_dialog.primary {color: #0bb20c}';
  componentStyle.innerHTML = componentStyleHtml;
  document.body.appendChild(componentStyle);
};


// Toast弹窗
function ToastClass () {}

ToastClass.prototype.show = function (options) {
  if (this.instance) {
    this.hide ();
  }
  ToastClass.instance = this;
  let text = options.text || '正在加载';
  let duration = options.duration;
  this.showFn = options.onShow;
  this.hideFn = options.onHide;
  let loading = options.loading;

  let toast = document.createElement ('div');
  let innerHTMLArr = ['<div class="component_mask"><div class="component_toast">'];
  if (loading) {
    innerHTMLArr.push('<div><img src="data:image/gif;base64, " ' +
      'width="26%" /></div>');
  }
  innerHTMLArr.push('<div style="font-size: 16px;margin:10px 0;">' + text + '</div></div></div>');
  toast.innerHTML = innerHTMLArr.join ('');
  document.body.appendChild (toast);

  // 开启事件
  this.showFn && this.showFn();
  // 如果有全局事件，则执行
  this.onShow && this.onShow();

  this.instance = toast;

  if (duration) {
    setTimeout (function () {
      ToastClass.instance.hide ();
    }, duration);
  }

};

ToastClass.prototype.hide = function () {
  let instance = this.instance;
  if (instance && instance.parentNode) {
    instance.parentNode.removeChild(instance);
  }

  // 关闭事件
  this.hideFn && this.hideFn();
  // 如果有全局事件，则执行
  this.onHide && this.onHide();
};


// 确认弹窗
function ConfirmClass () {}

// 确认弹窗
ConfirmClass.prototype.show = function (options) {
  if (this.instance) {
    this.hide ();
  }
  let defaultBtns = [{text: 'Ya', class: 'confirm'}, {text: '取消', class: 'cancel'}];
  ConfirmClass.instance = this;
  let title = options.title || '';
  let content = options.content || '';
  this.hideFn = options.onHide;
  this.showFn = options.onShow;
  this.close = true;

  // 如果配置项没有进行配置则使用默认的
  if(!!options.btns){
    let tempBtns = options.btns.slice(0, 2);
    defaultBtns.forEach(function(v, i){
      tempBtns[i] = tempBtns[i] || v;
      for(let j in v){
        tempBtns[i][j] = tempBtns[i][j] || v[j];
      }
    });
    this.btns = tempBtns.concat(options.btns.slice(2));
  }else{
    this.btns = defaultBtns;
  }

  let confirm = document.createElement ('div');
  let btnHtml = '';
  this.btns.forEach(function (v, i){
    btnHtml += '<a class="component_btn '+ (v.class||'') +'" style="cursor: pointer;" onclick="ConfirmClass.btnClick('+ i +', event)">'+ (v.text||'Ya') +'</a>'
  });
  confirm.innerHTML = ['<div class="component_mask">',
    '<div class="component_dialog" id="ConfirmClass_ComfirmArea">',
    '<div class="component_dialog_hd"><strong class="component_dialog_title">' + title + '</strong></div>',
    '<div class="component_dialog_bd">' + content + '</div>',
    '<div class="component_dialog_ft">',
    btnHtml,
    '</div></div></div>'].join ('');

  document.body.appendChild (confirm);

  // 开启事件
  this.showFn && this.showFn();
  // 如果有全局事件，则执行
  this.onShow && this.onShow();

  this.instance = confirm;

};

ConfirmClass.btnClick = function (index){
  let instance = ConfirmClass.instance;
  if (typeof instance.btns[index].callback === 'function') {
    instance.btns[index].callback(instance);
  }
  if (instance.close) {
    instance.hide();
  }else{
    instance.close = true;
  }

};

ConfirmClass.prototype.hide = function () {
  let instance = this.instance;
  if (instance && instance.parentNode) {
    instance.parentNode.removeChild(instance);
  }

  // 关闭事件
  this.hideFn && this.hideFn();
  // 如果有全局事件，则执行
  this.onHide && this.onHide();
};


// alert弹窗
function AlertClass () {}


AlertClass.prototype.show = function (options) {
  if (this.instance) {
    this.hide ();
  }
  AlertClass.instance = this;
  let title = options.title || '';
  let content = options.content || '';
  let btnText = options.btnText || 'Ya';
  this.hideFn = options.onHide;
  this.showFn = options.onShow;

  let alert = document.createElement ('div');
  alert.innerHTML = ['<div class="component_mask">',
    '<div class="component_dialog">',
    '<div class="component_dialog_hd"><strong class="component_dialog_title">'+title+'</strong></div>',
    '<div class="component_dialog_bd">'+content+'</div>',
    '<div class="component_dialog_ft">',
    '<a class="component_btn component_btn_dialog primary" onclick="AlertClass.btnClick()">'+btnText+'</a>',
    '</div></div></div>'].join('');

  document.body.appendChild (alert);

  // 开启事件
  this.showFn && this.showFn();
  // 如果有全局事件，则执行
  this.onShow && this.onShow();

  this.instance = alert;
};

AlertClass.btnClick = function (){
  let instance = AlertClass.instance;
  instance.hide();
};

AlertClass.prototype.hide = function () {
  let instance = this.instance;
  if (instance && instance.parentNode) {
    instance.parentNode.removeChild(instance);
  }
  // 关闭事件
  this.hideFn && this.hideFn();
  // 如果有全局事件，则执行
  this.onHide && this.onHide();
};
