/*
 * @Author: your name
 * @Date: 2021-11-24 11:17:34
 * @LastEditTime: 2021-11-26 14:00:20
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \sdk\page-sdk\src\render\html.ts
 */
import BaseComponentRender from "../component/BaseComponentRender";
import { genStyleList } from "../common/util";

export default class Html extends BaseComponentRender {
  private bindAttribute() {
    let attribute = this.$options.attribute || {};

    Object.keys(attribute).forEach((key) => {
      (this.$el as any)[key] = attribute[key];
    });
  }
  private bindStyle() {
    let { style, visible } = this.$options,
      cssText = genStyleList(style);
    if (visible === false) {
      cssText.push("display: none");
    }

    this.$el!.style.cssText = cssText.join(";");
  }

  /**
   * 渲染
   */
  protected render(): void {
    this.bindAttribute();
    this.bindStyle();
  }

  /**
   * 创建元素
   * @param callback
   */
  protected create(callback: (el: HTMLElement) => void): void {
    let { props } = this.$options;
    callback(document.createElement(props.tag || "div"));
  }
}