import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { IBzTooltipService } from './ibz-tooltip-service';
import './ibz-tooltip-async.less';

/**
 * 异步tooltip组件
 *
 * @export
 * @class IBzTooltipAsync
 * @extends {Vue}
 */
@Component({})
export class IBzTooltipAsync extends Vue {
  /**
   * tip请求服务
   *
   * @private
   * @type {IBzTooltipService}
   * @memberof IBzTooltipAsync
   */
  private service: IBzTooltipService = new IBzTooltipService();

  /**
   * 提示内容
   *
   * @private
   * @type {*}
   * @memberof IBzTooltipAsync
   */
  private content: string = '暂无说明';

  /**
   * 是否正在加载提示
   *
   * @private
   * @memberof IBzTooltipAsync
   */
  private isLoading = false;

  /**
   * 提示消息参数
   *
   * @private
   * @memberof IBzTooltipAsync
   */
  private tipData = {};

  /**
   * 异步tip参数
   *
   * @type {*}
   * @memberof IBzTooltipAsync
   */
  @Prop()
  params: any;
  @Watch('params', { immediate: true })
  async paramsWatch() {
    if (this.params) {
      this.isLoading = true;
      const data = await this.service.loadTip(this.params);
      this.isLoading = false;
      if (data) {
        this.content = data;
        return
      }
      this.content = '暂无说明'
    }
  }

  updated(): void {
    this.$nextTick(() => {
      window.itc.tick();
    });
  }

  public render(h: CreateElement): any {
    return (
      <div class={{ 'ibz-tooltip-async-wrapper': true, loading: this.isLoading }}>
        <spin class='ibz-tooltip-loading' v-show={this.isLoading} fix />
        <app-showdown v-show={!this.isLoading} itemValue={this.content} />
      </div>
    );
  }
}