<script setup lang="ts">
import { Subject } from 'rxjs';
import { PanelView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "PANEL"}}
import { {{codeName}}Panel } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-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 panelView = new PanelView(viewState(), props, emit).moduleInstall();
const { state, panel, onToolbarEvent, onCtrlEvent } = panelView;
{{#if page.psAppCounterRefs}}
//  计数器数据
const counterData = computed(() => {
  const { counterServices } = toRefs(state);
  if (counterServices && counterServices.value && counterServices.value.length) {
    return counterServices.value[0].data;
  }
  return {};
})
{{/if}}
</script>

<template>
  <AppPanelViewLayout :class="['app-panel-view', state.viewSysCss]" :showCaptionBar="state.showCaptionBar">
    <template v-slot:caption>
      <AppIconText
        class="app-view__caption"
        size="large"
        :subCaption="state.subCaption"
        :text="state.viewCaption"
      />
    </template>
    {{#page.ctrls}}
    {{#eq controlType "TOOLBAR"}}
    <template v-slot:toolbar>
      <AppToolbar
        mode="button"
        name="{{lowerCase codeName}}"
        :actionModel="state.toolbar"
        {{#if page.psAppCounterRefs}}
        :counterData="counterData"
        {{/if}}
        @onToolbarEvent="onToolbarEvent"/>
    </template>
    {{/eq}}
    {{#eq controlType "PANEL"}}
    <{{codeName}}Panel
      ref="panel"
      name="{{name}}"
      :showBusyIndicator="true"
      :context="state.context"
      :viewParams="state.viewParams"
      :controlAction="state.{{name}}.action"
      :viewSubject="state.viewSubject"
      :parent="panelView"
      @ctrlEvent="onCtrlEvent"
    ></{{codeName}}Panel>
    {{/eq}}
    {{/page.ctrls}}
  </AppPanelViewLayout>
</template>

<style lang="scss">
</style>