<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-portlet-state';
import { PortletControl, IActionParam, IParam, IContext, ILayoutOpts } from '@core';
{{#eq ctrl.portletType "VIEW"}}
  {{#if ctrl.portletPSAppView}}
import {{ctrl.portletPSAppView.codeName}} from '@views/{{spinalCase ctrl.portletPSAppView.psAppModule.codeName}}/{{spinalCase ctrl.portletPSAppView.codeName}}';
  {{/if}}
{{/eq}}
{{#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}}
{{/eq}}
{{#eq ctrl.portletType "LIST"}}
  {{#ctrl.psControls}}
import { {{codeName}}List } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-list';
  {{/ctrl.psControls}}
{{/eq}}

interface Props {
  name:string,
  context: IContext;
  viewParams?: IParam;
  viewSubject: Subject<IActionParam>;
  showCaption?: boolean;
  layoutOpts?: ILayoutOpts;
  parent: IParam;
}

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>
  <AppPortletCard 
    class="app-portlet{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
    title="{{ctrl.title}}"
    {{#if ctrl.psSysImage}}
      {{#if ctrl.psSysImage.cssClass}}
    iconClass="{{ctrl.psSysImage.cssClass}}"
      {{/if}}
      {{#if ctrl.psSysImage.imagePath}}
    imgPath="ctrl.psSysImage.imagePath"
      {{/if}}
    {{/if}}
    :showCaption="{{ctrl.showTitleBar}}"
    :layoutOpts="{{> @macro/front-end/common/layoutPos.hbs layout=ctrl.psLayout layoutPos=ctrl.psLayoutPos}}"
{{#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>
{{#eq ctrl.portletType 'VIEW'}}
    <{{ctrl.portletPSAppView.codeName}}
      :context="state.context"
      :viewParams="state.viewParams"
      :viewSubject="state.viewSubject"
      @viewEvent="onViewEvent"  
    />
{{/eq}}
{{#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}}
{{/eq}}
{{#eq ctrl.portletType 'CUSTOM'}}
    <div>暂未支持自定义绘制</div>
{{/eq}}
{{#eq ctrl.portletType 'ACTIONBAR'}}
    <app-action-bar
      :viewSubject="state.viewSubject"
      :uiService="state.UIService"
      :items="state.actionBarModelData"
      @itemClick="handleItemClick"
    ></app-action-bar>
{{/eq}}
{{#eq ctrl.portletType 'TOOLBAR'}}
    <div>暂未支持工具栏绘制</div>
{{/eq}}
{{#eq ctrl.portletType 'HTML'}}
    <iframe :src="state.pageUrl" :style="{ height: '100%', width: '100%', borderWidth: '0px' }"></iframe>
{{/eq}}
{{#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}}"
      :value="state.rawContent"
    ></app-raw>
{{/eq}}
{{#eq ctrl.portletType 'LIST'}}
  {{#ctrl.psControls}}
    <{{codeName}}List
      ref="portlet"
      name="{{name}}"
      :controlAction="state.{{name}}.action"
      :context="state.context"
      :viewParams="state.viewParams"
      :viewSubject="state.viewSubject"
      @ctrlEvent="onCtrlEvent">
    </{{codeName}}List>
  {{/ctrl.psControls}}
{{/eq}}
  </AppPortletCard>
</template>
<style lang="scss">
</style>