<script setup lang="ts">
import { Subject } from 'rxjs'
import { Ref } from 'vue';
import { IndexView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "APPMENU"}}
import { {{codeName}}Menu } from '@widgets/app/{{spinalCase codeName}}-menu';
{{/eq}}
{{/page.ctrls}}
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue';
interface Props {
  context?: IContext;
  viewParams?: IParam;
  openType?: "ROUTE" | "MODAL" | "EMBED";
  viewSubject?: Subject<IActionParam>;
}

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

interface ViewEmit {
  (name: "viewEvent", value: IActionParam): void;
}

const emit = defineEmits<ViewEmit>();

// 安装功能模块，提供状态和能力方法
const indexView = new IndexView(viewState(), props, emit).moduleInstall();
const { state, menu } = indexView;
const collapsed: Ref<boolean> = ref(false);
const collapsedChange = () => {
  collapsed.value = !collapsed.value;
}
{{#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>
  <AppDefaultIndexViewLayout :class="['app-index-view', state.viewSysCss]" :showCaptionBar="state.showCaptionBar" :menuAlign="state.menuAlign" :collapsed="collapsed">
    <template #caption>
      <div class="index-view-header">
        <div class="sys-title">\{{state.viewCaption}}</div>
        <MenuUnfoldOutlined
          v-if="collapsed && Object.is(state.menuAlign,'LEFT')"
          class="trigger"
          @click="collapsedChange"
        />
        <MenuFoldOutlined v-else class="trigger" @click="collapsedChange" />
      </div>
    </template>
    <template #user>
        <AppUser/>
    </template>
    <template #menu>
  {{#page.ctrls}}
    {{#eq controlType "APPMENU"}}
      <{{codeName}}Menu
        ref="menu" 
        name="{{name}}"
        :context="state.context"
        {{#if page.psAppCounterRefs}}
        :counterData="counterData"
        {{/if}}
        :collapsed="collapsed"
        :menuAlign="state.menuAlign"
        :defaultView="state.defaultView"
        :viewParams="state.viewParams"
        :viewSubject="state.viewSubject"
        :parent="indexView"
      ></{{codeName}}Menu>
    {{/eq}}
  {{/page.ctrls}}
    </template>
    <template #router>
      <router-view />
    </template>
  </AppDefaultIndexViewLayout>
</template>