<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-panel-state';
import { PanelControl, IActionParam, IParam, ControlAction, IContext } from '@core';
interface Props {
  name:string,
  parent: IParam;
  context: IContext;
  navDatas?: IParam[];
  viewParams?: IParam;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
  panelType?: 'DEFAULT' | 'LAYOUT' | string;
}

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

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

const emit = defineEmits <CtrlEmit> ();

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

// 暴露内部状态及能力
defineExpose({ name, state, getData });
</script>
<template>
  <AppRow
    ref="xDataControl"
    :class="[
      'app-panel',
      panelType === 'LAYOUT' ? 'app-layout-panel' : '',
    {{#if ctrl.psSysCss}}
      '{{ctrl.psSysCss.cssName}}'
    {{/if}}
    ]"
	  :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=ctrl.psLayout layoutPos=ctrl.psLayoutPos}}"
    >
    {{#each ctrl.rootPSPanelItems as | panelItem |}}
    {{> @macro/front-end/widgets/panel-detail/include-panel.hbs item=panelItem type=panelItem.itemType}}
    {{/each}}
  </AppRow>
</template>
<style lang="scss">
</style>