<script setup lang="ts">
import { Subject } from 'rxjs';
import { TabExpView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "TABEXPPANEL"}}
import { {{codeName}}TabExpPanel } from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-tab-exp-panel';
{{/eq}}
{{/page.ctrls}}
// props声明和默认值处理
interface Props {
  context?: IContext;
  viewParams?: IParam;
  openType?: "ROUTE" | "MODAL" | "EMBED";
  viewSubject?: Subject<IActionParam>;
}

const props = withDefaults(defineProps<Props>(), {
  openType:'ROUTE',
  viewSubject: () => new Subject<IActionParam>()
})

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

const emit = defineEmits<ViewEmit>();

// 安装功能模块，提供状态和能力方法
const { state, onCtrlEvent } = new TabExpView(viewState, props, emit).moduleInstall();
</script>

<template>
    <AppPickupViewLayout :class="['app-tab-exp-view', state.viewSysCss]">
        <template #caption>
          <AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
        </template>
        {{#page.ctrls}}
            {{#eq controlType "TOOLBAR"}}
            <template v-slot:toolbar>
              <AppToolbar
                mode="button"
                name="{{lowerCase codeName}}"
                :actionModel="state.viewToolbarModel"
                @onToolbarEvent="onToolbarEvent"/>
            </template>
            {{/eq}}
            {{#eq controlType "TABEXPPANEL"}}
            <{{codeName}}TabExpPanel
              name="{{name}}"
              tabPosition="{{lowerCase page.tabLayout}}"
              :context="state.context"
              :viewParams="state.viewParams"
              :viewSubject="state.viewSubject"
              :defaultActivePanel="state.defaultActivePanel"
              @onCtrlEvent="onCtrlEvent"
            ></{{codeName}}TabExpPanel>
            {{/eq}}
          {{/page.ctrls}}
    </AppPickupViewLayout>
</template>