<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-portlet-state';
import { PortletControl, IActionParam, IParam, IContext } from '@core';
// 引入视图start
{{#if (eq ctrl.portletType "VIEW")}}
{{#if ctrl.portletPSAppView}}
import {{ctrl.portletPSAppView.codeName}} from '@views/{{spinalCase ctrl.portletPSAppView.psAppModule.codeName}}/{{spinalCase ctrl.portletPSAppView.codeName}}';
{{/if}}
{{/if}}
// 引入视图end
// 引入菜单start
{{#if (eq ctrl.portletType "APPMENU")}}
{{#each ctrl.psControls as | control |}}
{{#eq control.controlType "APPMENU"}}
import { {{control.codeName}}Menu } from '@widgets/app/{{spinalCase control.codeName}}-menu';
{{/eq}}
{{/each}}
{{/if}}
// 引入菜单end


interface Props {
  name:string,
  context: IContext;
  viewParams?: IParam;
  viewSubject: Subject<IActionParam>;
}

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

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

const emit = defineEmits <CtrlEmit> ();

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

// 暴露内部状态及能力
defineExpose({ name, state });
</script>
<template>
  <div class="app-portlet{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}" >
  <template v-if="state.showTitleBar && state.title">
    <div class='portlet-title'>
      <span>
        <i v-if="state.iconcls" :class="state.iconcls" />
        <img v-if="state.imagePath" :src="state.imagePath" />
        \{{state.title}}
      </span>
      <span class="portlet-action" v-if="state.actionBarModelData && state.portletType !== 'ACTIONBAR'">
        <template v-for="(item,index) in Object.values(state.actionBarModelData)" :key="index">
          <a-tooltip>
            <template #title>
              \{{item.actionName}}
            </template>
            <a @click="handleActionClick(item,$event)">
              <i v-if="item.icon" :class="item.icon" />
              <img v-if="item.imagePath" :src="item.imagePath"/>
              \{{item.actionName}}
            </a>
          </a-tooltip>
        </template>  
      </span>
    </div>
  </template>
  <div :class="{'portlet-with-title': state.showTitleBar, 'portlet-without-title': !state.showTitleBar}">
    {{#if (eq ctrl.portletType 'VIEW') }}
      <{{ctrl.portletPSAppView.codeName}}
        :context="state.context"
        :viewParams="state.viewParams"
        :viewSubject="state.viewSubject"
        @viewEvent="onViewEvent"  
      />
    {{else if (eq ctrl.portletType 'APPMENU')}}
      {{#each ctrl.psControls as | control |}}
      <{{control.codeName}}Menu
        ref="menu" 
        name="{{name}}"
        :context="state.context"
        :viewParams="state.viewParams"
        :viewSubject="state.viewSubject"
        menuAlign="LEFT"
        :collapsed="false"
        @ctrlEvent="onCtrlEvent"
      ></{{control.codeName}}Menu>
      {{/each}}
    {{else if (eq ctrl.portletType 'CUSTOM')}}
      <div>暂未支持自定义绘制</div>
    {{else if (eq ctrl.portletType 'ACTIONBAR')}}
      <app-action-bar
        :viewSubject="state.viewSubject"
        :uiService="state.UIService"
        :items="state.actionBarModelData"
        @itemClick="handleItemClick"
      ></app-action-bar>   
    {{else if (eq ctrl.portletType 'TOOLBAR')}}
      <div>暂未支持工具栏绘制</div>
    {{else if (eq ctrl.portletType 'HTML')}}
      <iframe :src="state.pageUrl" :style="{height: state.height && state.height > 0 ? state.height + 'px' : '400px', width: '100%', borderWidth: '0px'}"></iframe>
    {{else if (eq ctrl.portletType 'RAWITEM')}}
      <app-raw
        :name="state.controlName"
        :contentType="state.contentType"
        :iconClass="state.iconcls"
        :imgPath="state.imagePath"
        style="{{#if ctrl.rawItemHeight}}height: {{ctrl.rawItemHeight}}px;{{/if}}{{#if ctrl.rawItemWidth}}width: {{ctrl.rawItemWidth}}px{{/if}}"
        {{#if (eq ctrl.contentType 'RAW')}}value="{{ctrl.rawContent}}"{{else if (eq ctrl.contentType 'HTML')}}:value="`{{ctrl.htmlContent}}`"{{/if}}
      ></app-raw>>
    {{else}}
    {{/if}}
  </div>
  </div>
</template>
<style lang="scss">
</style>