<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, TabViewPanelControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-view-panel-state';
{{#if ctrl.embeddedPSAppDEView}}
import {{ctrl.embeddedPSAppDEView.codeName}} from '@views/{{spinalCase ctrl.embeddedPSAppDEView.psAppModule.codeName}}/{{spinalCase ctrl.embeddedPSAppDEView.codeName}}';
{{/if}}
interface Props {
  name:string,
  context: IContext;
  viewParams?: IParam;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
  //  父部件，即分页导航面板
  parent: any;
  //  父视图，此处指向分页导航视图
  parentView: any;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  showBusyIndicator: true,
})

// emit声明
interface CtrlEmit {
  (name: "onCtrlEvent", value: IActionParam): void;
}

const emit = defineEmits <CtrlEmit> ();

// 安装功能模块，提供状态和能力方法
const { name, state, onViewEvent } = new TabViewPanelControl(ctrlState(), props, emit).moduleInstall();

// 暴露内部状态及能力
defineExpose({ name, state });
</script>

<template>

  <div class="app-tab-view-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
  {{#if ctrl.embeddedPSAppDEView}}
    <{{ctrl.embeddedPSAppDEView.codeName}}
      :context="state.context"
      :viewParams="state.viewParams"
      :viewSubject="state.viewSubject"
      @viewEvent="onViewEvent"
    />
    {{else}}
    <div class="app-tab-view-panel--empty">视图不存在，请配置选择视图</div>
    {{/if}}
  </div>
</template>