<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, TreeExpBarControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-tree-exp-bar-state';
{{#ctrl.ctrls}}
{{#eq controlType "TREEVIEW"}}
import { {{codeName}}Tree} from '@widgets/{{spinalCase appEntity.codeName}}/{{spinalCase codeName}}-tree';
{{/eq}}
{{/ctrl.ctrls}}
{{#each ctrl.getAppViewRefs as | viewRef |}}
  {{#if viewRef.refPSAppView}}
import {{viewRef.refPSAppView.name}} from '@views/{{spinalCase viewRef.refPSAppView.psAppModule.codeName}}/{{spinalCase viewRef.refPSAppView.codeName}}';
  {{/if}}
{{/each}}

interface Props {
  context: IContext;
  viewParams?: IParam;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewMode?: number;
  viewSubject: Subject<IActionParam>;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  viewMode: 0,
  showBusyIndicator: true,
});

interface CtrlEmit {
  (name: "ctrlEvent", value: IActionParam): void;
}

const emit = defineEmits <CtrlEmit> ();

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

// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>

<template>
  <a-layout
    class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
    >
    <a-layout-sider>
      {{#ctrl.ctrls}}
      {{#eq controlType "TREEVIEW"}}
      <{{codeName}}Tree
        ref="xData"
        :context="state.context"
        :viewParams="state.viewParams"
        :viewSubject="state.viewSubject"
        :isBranchAvailable="true"
        @ctrlEvent="onCtrlEvent"
      ></{{codeName}}Tree>
      {{/eq}}
      {{/ctrl.ctrls}}
    </a-layout-sider>
    <a-layout>
      {{#each ctrl.psAppViewRefs as | viewRef |}}
        {{#if viewRef.refPSAppView}}
      <{{viewRef.refPSAppView.name}}
        v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
        :viewDefaultUsage="false"
        :viewdata="JSON.stringify(state.selection.context)"
        :viewParams="JSON.stringify(state.selection.viewParams)">
      </{{viewRef.refPSAppView.name}}>
        {{/if}}
      {{/each}}
    </a-layout>
  </a-layout>
</template>