import { __decorate } from "tslib";
import { Component } from 'vue-property-decorator';
import { VueLifeCycleProcessing, AppDataViewBase } from '@ibizstudio-ex/template-vue';
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
import './icon-card-preview.less';
/**
 * 图标卡片预览插件类
 *
 * @export
 * @class IconCardPreview
 * @class IconCardPreview
 * @extends {AppDataViewBase}
 */
let IconCardPreview = class IconCardPreview extends AppDataViewBase {
    constructor() {
        super(...arguments);
        /**
         * InfiniteAjaxScroll插件实例
         *
         * @type {*}
         * @memberof IconCardPreview
         */
        this.infiniteInstance = null;
        /**
         * 是否显示正在加载中
         *
         * @type {boolean}
         * @memberof IconCardPreview
         */
        this.isLoading = false;
        /**
         * 是否显示没有更多数据
         *
         * @type {boolean}
         * @memberof IconCardPreview
         */
        this.isLast = false;
        /**
         * InfiniteAjaxScroll插件实例的bind方法调用次数
         *
         * @type {number}
         * @memberof IconCardPreview
         */
        this.count = 0;
    }
    /**
     *  实例化InfiniteAjaxScroll插件
     *
     * @memberof IconCardPreview
     */
    ctrlMounted() {
        super.ctrlMounted();
        const dataViewContainer = this.$refs['dataViewContainer'].$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(() => {
            var _a;
            if (this.count === 0) {
                (_a = this.infiniteInstance) === null || _a === void 0 ? void 0 : _a.bind();
                this.count++;
            }
        });
    }
    /**
     * 绘制DataViewItem
     *
     * @memberof DataViewControlBase
     */
    renderDataViewItem(h, item, dataViewItem) {
        if (this.controlInstance.getItemPSSysPFPlugin()) {
            const pluginInstance = this.PluginFactory.getPluginInstance('CONTROLITEM', this.controlInstance.getItemPSSysPFPlugin().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) {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (<div class={Object.assign(Object.assign({}, 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>);
    }
};
IconCardPreview = __decorate([
    Component({}),
    VueLifeCycleProcessing()
], IconCardPreview);
export { IconCardPreview };