import { CreateElement } from 'vue';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { throttle, Util } from 'ibiz-core';
import { DataViewControlBase } from '../../../widgets';

/**
 * 数据视图部件基类
 *
 * @export
 * @class AppDataViewBase
 * @extends {DataViewControlBase}
 */
export class AppDataViewBase extends DataViewControlBase {

    /**
     * 部件动态参数
     *
     * @memberof AppDataViewBase
     */
    @Prop() public declare dynamicProps: any;

    /**
     * 部件静态参数
     *
     * @memberof AppDataViewBase
     */
    @Prop() public declare staticProps: any;

    /**
     * 监听动态参数变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppDataViewBase
     */
    @Watch('dynamicProps', {
        immediate: true,
    })
    public onDynamicPropsChange(newVal: any, oldVal: any) {
        if (newVal && !Util.isFieldsSame(newVal, oldVal)) {
            super.onDynamicPropsChange(newVal, oldVal);
        }
    }

    /**
     * 监听静态参数变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppDataViewBase
     */
    @Watch('staticProps', {
        immediate: true,
    })
    public onStaticPropsChange(newVal: any, oldVal: any) {
        if (newVal && !Util.isFieldsSame(newVal, oldVal)) {
            super.onStaticPropsChange(newVal, oldVal);
        }
    }

    /**
     * 部件事件
     * 
     * @param 抛出参数 
     * @memberof AppDataViewBase
     */
    @Emit('ctrl-event')
    public ctrlEvent({ controlname, action, data }: { controlname: string, action: string, data: any }): void { }

    /**
     * @description 是否显示回到顶部
     * @readonly
     * @type {boolean}
     * @memberof AppDataViewBase
     */
     get backTopVisible(): boolean {
      let visible: boolean = false;
      const el = document.querySelector(`#${this.controlId}`);
      if (el) {
        visible = true;
      }
      return visible;
    }

    /**
     * 绘制分组
     *
     * @param {*} h
     * @return {*} 
     * @memberof AppDataViewBase
     */
    public renderGroup(h: any) {
        return this.groupData.map((group: any, index: number) => {
            return (
                <el-collapse-item class="app-control-dataview__content__group">
                    <div slot="title" class="group__title">
                        <b>{group.group}</b>
                    </div>
                    {this.hasChildrenRender(h, group)}
                </el-collapse-item>
            );
        });
    }

    /**
     * 绘制有子成员项
     *
     * @param {*} h
     * @param {*} group
     * @return {*} 
     * @memberof AppDataViewBase
     */
    public hasChildrenRender(h: any, group: any) {
        if (group.children.length > 0) {
            const { cardColXS, cardColSM, cardColMD, cardColLG } = this.controlInstance;
            return group.children.map((groupChild: any, index: number) => {
                return (
                    <a href={groupChild.starturl}>
                        <i-col xs={cardColXS} sm={cardColSM} md={cardColMD} class="group__content" lg={cardColLG}>
                            {this.renderCard(groupChild)}
                        </i-col>
                    </a>
                );
            });
        } else {
            return (
                <div class="group__empty">
                    {this.$t('app.commonwords.nodata')}
                </div>
            );
        }
    }

    /**
     * 渲染数据视图项行为
     *
     * @param {*} item
     * @return {*} 
     * @memberof AppDataViewBase
     */
    public renderDataViewItemAction(item: any) {
        return Object.keys(this.actionModel).map((key: string) => {
            if (item[key].visabled) {
                const action = this.actionModel[key];
                return (
                    <el-button type='text' disabled={item[key].disabled}
                        class="bottom__action"
                        on-click={($event: any) => {
                            this.handleActionClick(item, $event, action, action);
                        }}>
                        {action.showIcon && <i class={[action.cssClass, "bottom__action__icon"]}></i>}
                        <span>
                            {action.showCaption ? this.$tl(action.lanResTag, action?.caption ? action.caption : '') : ''}
                        </span>
                    </el-button>
                )
            }
        });
    }

    /**
     * 渲染数据视图项
     *
     * @param {*} item
     * @return {*} 
     * @memberof AppDataViewBase
     */
    public renderDataViewItem(item: any) {
        return (
            <div class="item__content">
                <div class="item__content__top">
                    <div class="top__title">
                        <span>{item.srfmajortext}</span>
                    </div>
                    {item.content && <div class="top__description">{item.content}</div>}
                </div>
                {
                    this.actionModel && Object.keys(this.actionModel).length > 0 &&
                    <div class="item__content__bottom">
                        {this.renderDataViewItemAction(item)}
                    </div>
                }
            </div>
        )
    }

    /**
     * 渲染卡片
     *
     * @param {*} item
     * @return {*} 
     * @memberof AppDataViewBase
     */
    public renderCard(item: any) {
        const style: any = {
            width: this.controlInstance.cardWidth > 0 ? `${this.controlInstance.cardWidth}px` : false,
            height: this.controlInstance.cardHeight > 0 ? `${this.controlInstance.cardHeight}px` : false
        };
        const itemCssName = {
            "app-control-dataview__content__item": true,
            "is-active": item.srfchecked === 1
        }
        const itemCss = this.controlInstance.getItemPSSysCss();
        if (itemCss) {
            Object.assign(itemCssName, {
                [itemCss.cssName] : true,
            })
        }
        return (
            <el-card
                shadow="hover"
                body-style={style}
                class={itemCssName}
                nativeOnClick={() => throttle(this.handleClick, [item], this)}
                nativeOnDblclick={() => throttle(this.handleDblClick, [item], this)}>
                {this.controlInstance.getItemPSLayoutPanel()
                    ? this.renderItemPSLayoutPanel(item)
                    : this.renderDataViewItem(item)}
            </el-card>
        );
    }

    /**
     * 绘制数据视图内容
     *
     * @memberof AppDataViewBase
     */
    public renderDataViewContent(h: CreateElement) {
        if (!this.isEnableGroup) {
            const { cardColXS, cardColSM, cardColMD, cardColLG } = this.controlInstance;
            return this.items.map((item: any, index: number) => {
                return (
                    <i-col xs={cardColXS} sm={cardColSM} md={cardColMD} lg={cardColLG}> 
                        {this.renderCard(item)}
                    </i-col>
                );
            });
        } else {
            return <el-collapse>{this.renderGroup(h)}</el-collapse>;
        }
    }

    /**
     * @description 绘制加载更多
     * @return {*} 
     * @memberof AppDataViewBase
     */
     renderLoadMore(){
        return (
            <div onclick={(event: MouseEvent)=>{this.loadMore(event)}} class="app-control-dataview__load--more">{this.$t('app.dataview.loadmore')}</div>
        )
    }

    /**
     * 绘制排序栏
     *
     * @memberof AppDataViewBase
     */
    public renderSortBar(h: any) {
        return (
            <app-sort-bar
                sortModel={this.sortModel}
                sortField={this.sortField}
                sortDir={this.sortDir}
                entityName={this.appDeCodeName}
                on-clickSort={(val: any) => throttle(this.sortClick, [val], this)}
            ></app-sort-bar>
        );
    }

    /**
     * 绘制
     * 
     * @memberof AppDataViewBase
     */
    public render(h: CreateElement) {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (
            <div class={controlClassNames}>
                {
                    this.hasSortBar &&
                    <div class="control-header app-control-dataview__header">
                        {this.renderSortBar(h)}
                    </div>
                }
                {
                    this.items.length > 0 &&
                    <row class="control-content app-control-dataview__content" gutter={24} type="flex" justify="start">
                        {this.renderDataViewContent(h)}
                        {Object.is(this.totalRecord, this.items.length) ? null : this.renderLoadMore()}
                    </row>
                }
                {this.renderBatchToolbar()}
                {!this.ctrlLoadingService?.isLoading ? this.renderEmptyDataTip() : this.renderLoadDataTip()}
                {this.backTopVisible && <el-backtop target={`#${this.controlId}`}></el-backtop>}
            </div>
        );
    }

    /**
     * 销毁视图回调
     *
     * @memberof AppDataViewBase
     */
    public destroyed() {
        this.ctrlDestroyed();
    }
}