import { Loading } from "element-ui";
import Vue from "vue";

/**
 * @Description: 提示文字枚举
 * @author LiuBo
 * @date 2021/3/10
 * @time 20:05
 */
enum ShowText {
  delete = "删除中...",
  update = "更新中...",
  submit = "提交中...",
  save = "保存中...",
  select = "加载中...",
  init = "初始化基础数据..."
}
/**
 * @Description: 等待圈公共服务【~~调用时使用this.$amLoading.方法~~】
 * @author LiuBo
 * @date 2021/3/10
 * @time 20:05
 */
class WaitingService implements WaitingIf {
  private instance: any; // 等待圈实例
  private count = 0; // 打开等待圈被调用的次数
  /**
   * @Description: 提交提示
   * @author LiuBo
   * @date 2018/12/26
   * @time 17:50
   */
  submit() {
    this.show(ShowText.submit);
  }
  /**
   * @Description: 删除提示
   * @author LiuBo
   * @date 2018/12/26
   * @time 17:50
   */
  delete() {
    this.show(ShowText.delete);
  }
  /**
   * @Description: 保存提示
   * @author LiuBo
   * @date 2018/12/26
   * @time 17:50
   */
  save() {
    this.show(ShowText.save);
  }
  /**
   * @Description: 更新提示
   * @author LiuBo
   * @date 2018/12/26
   * @time 17:50
   */
  update() {
    this.show(ShowText.update);
  }
  /**
   * @Description: 查询提示
   * @author LiuBo
   * @date 2018/12/26
   * @time 18:01
   * @param text  提示内容
   */
  open(text?: string) {
    this.show(text || ShowText.select);
  }
  /**
   * @Description: 初始化
   * @author LiuBo
   * @date 2018/12/26
   * @time 18:01
   */
  init() {
    this.show(ShowText.init);
  }
  /**
   * @Description: 显示等待圈
   * @author LiuBo
   * @date 2021/3/10
   * @time 18:05
   */
  private show(message?: string) {
    this.count++;
    const sty = "border-radius: 5px;border:1px #EEE solid;line-height:50px;";
    const loading = `<div style="${sty}" class="d-inline-block bg-white pr-4 pl-4">
        <span style="font-size: 14px; color: #808080">${message || "努力加载中..."}</span>
        <div class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </div>`;
    this.instance = Loading.service({
      lock: true,
      fullscreen: true,
      background: "rgba(0, 0, 0, 0.3)"
    });
    const loadingEl = document.getElementsByClassName("el-loading-spinner")[0];
    loadingEl.innerHTML = loading;
  }
  /**
   * @Description: 关闭等待圈
   * @author LiuBo
   * @date 2021/3/10
   * @time 18:05
   */
  close(component: Vue) {
    if (this.count > 0) {
      // 不能让计数器为负数
      this.count--;
    }
    if (this.count > 0) {
      // 如果大于1说明还有打开的菊花
      return;
    }
    component.$nextTick(() => {
      this.instance.close();
    });
  }
}
const waitingService = new WaitingService();
export default waitingService;
/**
 * @Description: 方法类型
 * @author LiuBo
 * @date 2021/3/10
 * @time 18:20
 */
export interface WaitingIf {
  open: (text?: string) => void;
  submit: () => void;
  save: () => void;
  update: () => void;
  delete: () => void;
  init: () => void;
  close: (component: Vue) => void;
}
