<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, TabExpPanelControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tab-exp-panel-state';
{{#each ctrl.psControls as |viewPanel| }}
import { {{codeName}}TabViewPanel } from '@widgets/{{spinalCase viewPanel.psAppDataEntity.codeName}}/{{spinalCase codeName}}-tab-view-panel';
{{/each}}
interface Props {
  name:string,
  context: IContext;
  viewParams?: IParam;
  showBusyIndicator?: boolean;
  selectedData?: string;
  tabPosition?: string;
  defaultActivePanel?: string;
  viewSubject: Subject<IActionParam>;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  showBusyIndicator: true,
  tabPosition: "{{#if ctrl.tabLayout}}{{lowerCase ctrl.tabLayout}}{{else}}top{{/if}}",
{{#each ctrl.psControls as |viewPanel| }}
  {{#if @first}}
  defaultActivePanel: "{{viewPanel.name}}",
  {{/if}}
{{/each}}
})

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

const emit = defineEmits <CtrlEmit> ();

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

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

<template>

  <div class="app-tab-exp-panel{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
  {{#if ctrl.psControls}}
    <a-tabs :tabPosition="state.tabPosition" v-model:activeKey="state.activePanel" class="app-tab-exp-panel__tabs">
      {{#each ctrl.psControls as |viewPanel| }}
      <a-tab-pane key="{{viewPanel.name}}">
        <template #tab>
          <AppIconText {{#if viewPanel.psSysImage}}{{#if viewPanel.psSysImage.cssClass}}iconClass="{{viewPanel.psSysImage.cssClass}}" {{/if}}{{#if viewPanel.psSysImage.imagePath}}imgPath="{{viewPanel.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{viewPanel.caption}}"/>
        </template>
        <{{viewPanel.codeName}}TabViewPanel
          name="{{name}}"
          :context="state.context"
          :viewParams="state.viewParams"
          :viewSubject="state.viewSubject"
          @onCtrlEvent="onCtrlEvent"
        />
      </a-tab-pane>
      {{/each}}
    </a-tabs>
  {{else}}
    <div class="app-tab-exp-panel--empty">视图不存在，请配置分页视图</div>
  {{/if}}
  </div>
</template>