import { Component } from 'vue-property-decorator';
import { VueLifeCycleProcessing, AppDataViewBase } from '@ibizstudio-ex/template-vue';
import { IPSDEDataViewItem, IPSSysPFPlugin } from '@ibizstudio-ex/runtime';
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
import './icon-card-preview.less';

/**
 * 图标卡片预览插件类
 *
 * @export
 * @class IconCardPreview
 * @class IconCardPreview
 * @extends {AppDataViewBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class IconCardPreview extends AppDataViewBase {
  /**
   * InfiniteAjaxScroll插件实例
   *
   * @type {*}
   * @memberof IconCardPreview
   */
  infiniteInstance: any = null;

  /**
   * 是否显示正在加载中
   *
   * @type {boolean}
   * @memberof IconCardPreview
   */
  isLoading: boolean = false;

  /**
   * 是否显示没有更多数据
   *
   * @type {boolean}
   * @memberof IconCardPreview
   */
  isLast: boolean = false;

  /**
   * InfiniteAjaxScroll插件实例的bind方法调用次数
   *
   * @type {number}
   * @memberof IconCardPreview
   */
  count: number = 0;

  /**
   *  实例化InfiniteAjaxScroll插件
   *
   * @memberof IconCardPreview
   */
  ctrlMounted() {
    super.ctrlMounted();
    const dataViewContainer = (this.$refs['dataViewContainer'] as Vue).$el;
    if (dataViewContainer) {
      const infiniteInstance = new InfiniteAjaxScroll(dataViewContainer, {
        scrollContainer: dataViewContainer,
        item: '.icon-card-item',
        next: async () => {
          await this.loadMore();
          return this.totalRecord > this.items.length;
        },
        spinner: {
          show: () => (this.isLoading = true),
          hide: () => (this.isLoading = false),
        },
        bind: false,
      });
      infiniteInstance.on('last', () => {
        this.isLast = true;
      });
      this.infiniteInstance = infiniteInstance;
    }
  }

  /**
   * 开始加载
   *
   * @memberof MainControlBase
   */
  ctrlBeginLoading() {
    // 取消默认加载视图
  }

  /**
   * 结束加载
   *
   * @memberof MainControlBase
   */
  ctrlEndLoading() {
    this.$nextTick(() => {
      if (this.count === 0) {
        this.infiniteInstance?.bind();
        this.count++;
      }
    });
  }

  /**
   * 绘制DataViewItem
   *
   * @memberof DataViewControlBase
   */
  public renderDataViewItem(h: any, item: any, dataViewItem: IPSDEDataViewItem) {
    if (this.controlInstance.getItemPSSysPFPlugin()) {
      const pluginInstance: any = this.PluginFactory.getPluginInstance('CONTROLITEM', (this.controlInstance.getItemPSSysPFPlugin() as IPSSysPFPlugin).pluginCode);
      if (pluginInstance) {
        return pluginInstance.renderCtrlItem(this.$createElement, dataViewItem, this, item);
      }
    } else {
      return [
        <div class='data-view-item icon-card-item'>
          <div class='single-card-default'>
            <div class='icon-card'>
              {item.rawcontent ? (
                <img src={item.rawcontent} style='width: 100%;height: 100%;' />
              ) : /^(ionic-)/.test(item.srfmajortext) ? (
                <ion-icon name={item.cssclass}></ion-icon>
              ) : (
                <i class={'icon ' + item.cssclass}></i>
              )}
            </div>
            <div calss='item-title'>
              <tooltip content={item.srfmajortext}>{item.srfmajortext}</tooltip>
            </div>
            {item.content && <div class='item-content'>{item.content}</div>}
          </div>
        </div>,
        <div class='data-view-item-action'>{dataViewItem ? this.renderDataViewItemAction(h, item, dataViewItem) : ''}</div>,
      ];
    }
  }

  render(h: any) {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    return (
      <div class={{ ...controlClassNames, 'app-data-view': true, 'icon-card-preview': true }} style='height: 100%;'>
        {this.renderSortBar(h)}
        <row v-show={this.items.length > 0} class='data-view-container' ref='dataViewContainer' gutter={20} type='flex' justify='start' style='margin:0px;'>
          {this.renderDataViewContent(h)}
          {this.renderBatchToolbar()}
          {this.isLoading && <a-spin class='loading' />}
          {this.isLast && <div class='last'>没有更多icon</div>}
        </row>
        {this.isControlLoaded ? this.renderEmptyDataTip() : this.renderLoadDataTip()}
        <el-backtop target='.content-container .app-data-view'></el-backtop>
      </div>
    );
  }
}