import { VNode } from 'vue';
import { Util } from '@ibizstudio-ex/runtime';
import './badge.less';

/**
 * 微标指令
 *
 * @export
 * @class Badge
 */
export const Badge: any = {
    /**
     * 指令初始化
     *
     * @param {HTMLDivElement} el
     * @param {*} binding
     * @param {VNode} vNode
     * @param {VNode} oldVNode
     */
    bind(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
        bc.init(el,binding);
    },

    /**
     * 指令更新
     *
     * @param {HTMLDivElement} el
     * @param {*} binding
     * @param {VNode} vNode
     * @param {VNode} oldVNode
     */
    componentUpdated(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
        bc.update(el,binding);
    },
};

/**
 * 微标控制器
 *
 * @export
 * @class BadgeController
 */
 export class BadgeController {
  /**
   * 唯一实例
   *
   * @private
   * @static
   * @memberof BadgeControllerController
   */
  private static readonly instance = new BadgeController();

  /**
   * 容器
   *
   * @protected
   * @type {HTMLDivElement}
   * @memberof NotificationSignalController
   */
  protected el!: HTMLElement;

  /**
   * Creates an instance of BadgeControllerController.
   * @memberof BadgeControllerController
   */
  private constructor() {
      if (BadgeController.instance) {
          return BadgeController.instance;
      }
  }

  /**
   * 初始化
   *
   * @param {HTMLDivElement}
   * @param {any}
   * @memberof BadgeController
   */
  init(el: HTMLDivElement, binding: any): void {
    const item: any = binding.value;
    if (item && Object.keys(item).length > 0 && Util.isExistAndNotEmpty(item.count)) {
      if(!item.showZero && item.count == 0) {
        return;
      }
      let badge: HTMLElement = document.createElement("sup");
      badge.innerHTML = String(item.count);
      badge.classList.add('ibiz-badge');
      this.el = badge;
      el.append(badge);
      this.setBadgeclass(item.type);
      this.setBadgeclass(item.className);
      this.setBadgeOffset(item.offset);
    }
  }

  /**
   * 更新
   *
   * @param {HTMLDivElement}
   * @param {any}
   * @memberof BadgeController
   */
   update(el: HTMLDivElement, binding: any): void {
    const item: any = binding.value;
    if (item && Object.keys(item).length > 0 && Util.isExistAndNotEmpty(item.count)) {
      if(!item.showZero && item.count == 0) {
        return;
      }
      this.el.innerHTML = String(item.count);
    }
  }

  /**
   * 设置徽标类型样式
   *
   * @param {string}
   * @memberof BadgeController
   */
  setBadgeclass(type: string) {
    if (!type) {
      return;
    }
    this.el.classList.add(type);
  }

  /**
   * 设置徽标偏移量
   *
   * @param {string}
   * @memberof BadgeController
   */
  setBadgeOffset(offset: Array<number>) {
    if (offset && offset.length == 2) {
      this.el.style.transform = `translate(${offset[0]}px, ${offset[1]}px)`;
    }
  }


  /**
   * 获取唯一实例
   *
   * @static
   * @returns {BadgeController}
   * @memberof BadgeController
   */
  static getInstance(): BadgeController {
      return BadgeController.instance;
  }
}

// 导出服务
export const bc: BadgeController = BadgeController.getInstance();


