<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>;
  showCaption?: boolean;
  title?: string;
  imgPath?: string;
  iconClass?: string;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
{{#if ctrl.title}}
  title: '{{ctrl.title}}',
{{/if}}
{{#if ctrl.showTitleBar}}
  showCaption: '{{ctrl.showTitleBar}}',
{{/if}}
{{#if ctrl.psSysImage}}
  {{#if ctrl.psSysImage.cssClass}}
  iconcls: '{{ctrl.psSysImage.cssClass}}',
  {{else if (ctrl.psSysImage.imagePath)}}
  imgPath: '{{ctrl.psSysImage.imagePath}}',
  {{/if}}
{{/if}}
})

// 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>
  <AppPortletCard 
     class="app-portlet{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
     :title="title"
     :iconClass="iconClass"
     :imgPath="imgPath"
     :showCaption="showCaption"
{{#if (or ctrl.width ctrl.height)}}
      style="{{#if ctrl.width}}width: {{ctrl.width}}px;{{/if}}{{#if ctrl.height}}height: {{ctrl.height}}px;{{/if}}"
{{/if}}
  >
    <template #header-right>
      <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>
    </template>
    {{#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 ? '100%' : '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}}
  </AppPortletCard>
</template>
<style lang="scss">
</style>