import { CalendarControlBase } from '../../../widgets/calendar-control-base';
import { throttle, Util } from '@ibizstudio/runtime';
/**
 * 应用日历部件基类
 *
 * @export
 * @class AppCalendarBase
 * @extends {CalendarControlBase}
 */
export class AppCalendarBase extends CalendarControlBase {
    /**
     * TODO绘制日历项
     *
     * @memberof AppCalendarBase
     */
    renderCalendarItems() {
        const calendarItems = this.controlInstance.getPSSysCalendarItems() || [];
        if (calendarItems.length > 1) {
            return calendarItems.map((item) => {
                if (!item.itemType) {
                    return null;
                }
                const itemClass = {
                    'event-lengend': true,
                    [item.itemType]: true,
                    'event-disabled': !this.isShowlegend[item.itemType],
                };
                return (<div class={itemClass} on-click={() => {
                        throttle(this.legendTrigger, [item.itemType], this);
                    }}>
            <div class='lengend-icon' style={'background: ' + item.bKColor}></div>
            <span style={'color:' + item.color}>{item.name}</span>
          </div>);
            });
        }
    }
    /**
     * 绘制日历内容
     *
     * @memberof AppCalendarBase
     */
    renderContent() {
        let _this = this;
        if (this.ctrlParams) {
            return (<app-calendar-timeline ref='appCalendarTimeline' ctrlParams={this.ctrlParams} context={Util.deepCopy(this.context)} viewparams={Util.deepCopy(this.viewparams)} on-eventClick={(tempEvent) => {
                    throttle(this.onEventClick, [tempEvent, true], this);
                }} events={this.searchEvents}></app-calendar-timeline>);
        }
        <div>未支持</div>;
    }
    /**
     * TODO 绘制批操作工具栏
     *
     * @memberof AppCalendarBase
     */
    renderBatchToolbar() { }
    /**
     * 绘制数据项面板
     *
     * @param item 数据项
     * @memberof AppCalendarBase
     */
    renderItemPanel(item, calendarItem) {
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(calendarItem.getPSLayoutPanel(), item);
        return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: item.id, on: targetCtrlEvent });
    }
    /**
     * 绘制数据项
     *
     * @param item 数据项
     * @param index 下标
     * @memberof AppCalendarBase
     */
    renderTimeLineItem(item, index) {
        var _a;
        const calendarItem = (_a = this.controlInstance.getPSSysCalendarItems()) === null || _a === void 0 ? void 0 : _a.find((_item) => {
            return (item === null || item === void 0 ? void 0 : item.itemType) == _item.itemType;
        });
        return (<el-timeline-item key={`${item.title}${index}`} color={item.color} timestamp={item.start} placement='top'>
        <context-menu contextMenuStyle={{ width: '100%', 'padding-right': '12px' }} data={item} renderContent={this.renderContextMenu.bind(this)}>
          <el-card nativeOn-click={() => {
                throttle(this.onTimeLineClick, [item], this);
            }} class={Object.assign(Object.assign({}, item.className), { 'is-select': item.isSelect ? true : false })}>
            {calendarItem && calendarItem.getPSLayoutPanel() ? (this.renderItemPanel(item, calendarItem)) : (<div>
                <h4 style={{ 'margin-bottom': item.content ? '10px' : '0px' }}>{item.title}</h4>
                <p>{item.content}</p>
              </div>)}
          </el-card>
        </context-menu>
      </el-timeline-item>);
    }
    /**
     * 绘制
     *
     * @memberof AppCalendarBase
     */
    render() {
        var _a;
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        if (Object.is(this.controlInstance.calendarStyle, 'TIMELINE')) {
            if (this.events.length > 0) {
                return (<el-timeline>
            {this.events.map((event, index) => {
                        return this.renderTimeLineItem(event, index);
                    })}
          </el-timeline>);
            }
            else {
                return (<div>
            <span class='app-data-empty'>{this.$tl((_a = this.controlInstance.getEmptyTextPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, this.$t('app.commonwords.nodata'))}</span>
            <span class='quick-toobar'>{this.renderQuickToolbar()}</span>
          </div>);
            }
        }
        else {
            return (<div class={Object.assign(Object.assign({}, controlClassNames), { [this.calendarClass]: true })}>
          <context-menu-container>
            <div class='event-legends'>{this.renderCalendarItems()}</div>
            {this.renderContent()}
          </context-menu-container>
          {this.renderBatchToolbar()}
        </div>);
        }
    }
}