<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 {
  name:string,
  context: IContext;
  viewParams?: IParam;
  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 { name, state, onCtrlEvent, xData } = new TreeExpBarControl(ctrlState, props, emit).moduleInstall();

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

<template>
  <div class="app-tree-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
    <AppSplit v-model="state.split">
      <template #left>
        <div v-if="state.showTitleBar" class="tree-exp-bar-title">
          <span>\{{ state.title }}</span>
        </div>
        <div class="tree-exp-bar-body">
          {{#ctrl.ctrls}}
          {{#eq controlType "TREEVIEW"}}
          <{{codeName}}Tree
            ref="xData"
            name="{{name}}"
            :context="state.context"
            :viewParams="state.viewParams"
            :viewSubject="state.viewSubject"
            :selectFirstDefault="true"
            :isBranchAvailable="true"
            @ctrlEvent="onCtrlEvent"
          ></{{codeName}}Tree>
          {{/eq}}
          {{/ctrl.ctrls}}
        </div>
      </template>
      <template #right>
        {{#each ctrl.psAppViewRefs as | viewRef |}}
          {{#if viewRef.refPSAppView}}
        <{{viewRef.refPSAppView.name}}
          v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
          class="tree-exp__nav-view"
          :viewDefaultUsage="false"
          :context="state.selection.context"
          :viewParams="state.selection.viewParams">
        </{{viewRef.refPSAppView.name}}>
          {{/if}}
        {{/each}}
      </template>
    </AppSplit>
  </div>
</template>

<style lang="scss" scoped>
.app-tree-exp-bar {
  width: 100%;
  height: 100%;
}
</style>