import { Component } from 'vue-property-decorator';
import { CalendarControlBase } from '../../../widgets/calendar-control-base';
import { IPSSysCalendar } from '@ibizstudio/runtime';
import { VueLifeCycleProcessing } from '../../../decorators';
import './app-timeline-calendar.less';

@Component({})
@VueLifeCycleProcessing()
export class AppTimeLineCalendar extends CalendarControlBase {
  /**
   * 绘制数据项面板
   *
   * @param item 数据项
   * @memberof AppTimeLineCalendar
   */
  renderItemPanel(item: any, calendarItem: any) {
    let { targetCtrlName, targetCtrlParam, targetCtrlEvent }: { targetCtrlName: string; targetCtrlParam: any; targetCtrlEvent: any } = this.computeTargetCtrlData(calendarItem.getPSLayoutPanel);
    Object.assign(targetCtrlParam.dynamicProps, { inputData: item });
    return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: item.id, on: targetCtrlEvent });
  }

  /**
   * 绘制数据项
   *
   * @param item 数据项
   * @param index 下标
   * @memberof AppTimeLineCalendar
   */
  renderTimeLineItem(item: any, index: number) {
    const calendarItem = (this.controlInstance as IPSSysCalendar).getPSSysCalendarItems()?.find((_item: any) => {
      return 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%' }} data={item} renderContent={this.renderContextMenu.bind(this)}>
          <el-card native-on-click={this.onEventClick.bind(this)} class={item.className}>
            {calendarItem && calendarItem.getPSLayoutPanel ? (
              this.renderItemPanel(item, calendarItem)
            ) : (
              <div>
                <h4>{item.title}</h4>
                <p>
                  从 {item.start} 至 {item.end}
                </p>
              </div>
            )}
          </el-card>
        </context-menu>
      </el-timeline-item>
    );
  }

  /**
   * 绘制快速工具栏
   *
   * @memberof AppTimeLineCalendar
   */
  renderQuickToolbar() {
    //TODO 待补充快速工具栏
    return null;
  }

  /**
   * 绘制
   *
   * @memberof AppTimeLineCalendar
   */
  render() {
    if (!this.controlIsLoaded) {
      return null;
    }
    if (this.events.length > 0) {
      return (
        <el-timeline>
          {this.events.map((event: any, index: number) => {
            return this.renderTimeLineItem(event, index);
          })}
        </el-timeline>
      );
    } else {
      return (
        <div>
          <span class='app-data-empty'>{this.$t('app.commonWords.noData')}</span>
          <span class='quick-toobar'>{this.renderQuickToolbar()}</span>
        </div>
      );
    }
  }
}