import { CreateElement } from 'vue';
import { Component } from 'vue-property-decorator';
import { AppLayoutService } from '../../../app-service';
import { AppPickupGridViewBase } from '../../../components';
import { VueLifeCycleProcessing } from '../../../decorators';
import './design-style-preview.less';

/**
 * 应用选择表格视图
 *
 * @export
 * @class DesignStylePreview
 * @extends {AppTreeExpViewBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignStylePreview extends AppPickupGridViewBase {

  selection: any = null;

  onCtrlEvent(controlname: string, action: string, data: any[]) {
    if (Object.is(controlname, 'grid') && Object.is(action, 'selectionchange') && data.length > 0) {
      this.selection = data[0];
    }
    super.onCtrlEvent(controlname, action, data);
  }

  renderDefaultView(h: CreateElement) {
    const targetViewLayoutComponent: any = AppLayoutService.getLayoutComponent(`${this.viewInstance?.viewType}-DEFAULT`);
    return h(
      targetViewLayoutComponent,
      {
        props: { viewInstance: this.viewInstance, model: this.model, modelService: this.modelService, viewparams: this.viewparams, context: this.context }
      },
      [
        this.renderTopMessage(),
        this.renderBodyMessage(),
        this.renderToolBar(),
        this.renderQuickGroup(),
        this.renderQuickSearch(),
        !(this.viewInstance?.viewStyle == 'DEFAULT' && this.viewInstance?.enableQuickSearch) ? this.renderSearchForm() : null,
        this.renderMainContent(),
        this.renderBottomMessage(),
      ],
    );
  }

  /**
   * 表格选择视图渲染
   *
   * @memberof AppPickupGridViewBase
   */
  render(h: CreateElement) {
    if (!this.viewIsLoaded) {
      return null;
    }
    return <div class='design-style-preview'>
      {this.renderDefaultView(h)}
      <style-preview-content data={this.selection} context={this.context} class="preview-wrapper" />
    </div>
  }
}