/**
 * 顶牌的具体逻辑
 */
class UIPanel extends THING.Component {
  /**
   * @description 气泡显示
   * @param {Object} info 信息内容: {name: '',description: '', timw: ''}
   */
  show(info) {
    if (this.object && this.object.css) {
      this.object.css.visible = true
      return
    }

    this.createPanel(this.object, info)
  }

  /**
   * @description 气泡隐藏
   * @param {Object} object 孪生体对象
   */
  hide() {
    const { object } = this
    if (object && object.css) {
      object.css.visible = false
    }
  }

  /**
   * @description 创建气泡
   * @param {Object} object 孪生体对象
   */
  createPanel(object, info) {
    if (object.css) {
      object.removeComponent('css')
    }
    object.addComponent(THING.DOM.CSS2DComponent, 'css')
    const css = object.css
    css.pivot = [0.5, -0.8]

    css.domElement = this._createHtml(info)
    css.autoUpdateVisible = true
    css.visible = true
    css.offset = [0, info.bubbleHeight, 0] // 设置高度
  }

  /**
   * @description 创建2d_css元素
   * @param {Object} object 参数对象
   */
  _createHtml({
    name = '名称',
    description = '描述',
    time = '2021.11.17',
    price = '10.00元',
    imgSrc = '',
    isAlarm = false,
  }) {
    const html = `<div>
            <div style="display: flex; align-items: center">
                <img
                    id="bubbleImg"
                    src=${imgSrc}
                    style="width: 36px; height: 36px; margin: 10px 8px 10px 10px;border-radius: 10px"
                />
                <div class="triangle" style="position: absolute; bottom: -12px; left: 50%;margin-left:-6px; width: 0px; height: 0px; border: 6px solid transparent; border-top-color: #fff;box-shadow: 0px 12px 24px 0px rgba(41, 53, 70, 0.3);"></div>
                <div class="info-wrap" style="display: flex; flex-direction: column; margin-right: 10px;flex: 1;">
                    <div style="display: flex; justify-content:space-between;align-items: center;margin-bottom:2px">
                        <span
                            style="
                                font-size: 15px;
                                font-weight: 600;
                                color: rgba(24, 33, 45, 0.7);
                            "
                            >${name}</span
                        >
                        <span
                            style="color: rgba(24, 33, 45, 0.7); font-size: 13px;"
                            >${time}</span
                        >
                    </div>
                    <div style="overflow: hidden; display: flex; justify-content:space-between;align-items: center;">
                        <span style="color: rgba(24, 33, 45, 0.7); font-size: 13px;">${description}</span>
                        <span style="color: ${
                          isAlarm
                            ? 'rgba(255, 80, 59, 1)'
                            : 'rgba(29, 197, 73, 1)'
                        }; font-size: 13px; font-weight: 500; " class="quit">${price}</span>
                    </div>
                </div>
            </div>
        </div>`
    const element = document.createElement('div')
    element.innerHTML = html

    element.style =
      'box-shadow: 0px 12px 24px 0px rgba(41, 53, 70, 0.3); border-radius: 10px; background-color: #ffffff; position: absolute; top: 0; left: 0; display:none; min-width: 200px; '

    const targetContainer =
      app.container || (thingApp && thingApp.container) || document.body

    targetContainer.append(element)
    return element
  }
}
