<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.psControls}}
{{#eq controlType "TREEVIEW"}}
import { {{codeName}}Tree} from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-tree';
{{/eq}}
{{/ctrl.psControls}}
{{#each ctrl.psAppViewRefs as | viewRef |}}
  {{#if viewRef.refPSAppView}}
    {{#if
      (or 
        (eq viewRef.refPSAppView.viewType 'APPINDEXVIEW')
        (eq viewRef.refPSAppView.viewType 'APPPORTALVIEW')
        (eq viewRef.refPSAppView.viewType 'DEEDITVIEW')
        (eq viewRef.refPSAppView.viewType 'DEPANELVIEW')
        (eq viewRef.refPSAppView.viewType 'DEGRIDVIEW')
        (eq viewRef.refPSAppView.viewType 'DELISTVIEW')
        (eq viewRef.refPSAppView.viewType 'DEMPICKUPVIEW')
        (eq viewRef.refPSAppView.viewType 'DEPICKUPGRIDVIEW')
        (eq viewRef.refPSAppView.viewType 'DEPICKUPVIEW')
        (eq viewRef.refPSAppView.viewType 'DETREEVIEW')
        (eq viewRef.refPSAppView.viewType 'DETREEEXPVIEW')
        (eq viewRef.refPSAppView.viewType 'DETABEXPVIEW')
      )
    }}
import {{viewRef.refPSAppView.name}} from '@views/{{spinalCase viewRef.refPSAppView.psAppModule.codeName}}/{{spinalCase viewRef.refPSAppView.codeName}}';
    {{else}}
//import {{viewRef.refPSAppView.name}} from '@views/{{spinalCase viewRef.refPSAppView.psAppModule.codeName}}/{{spinalCase viewRef.refPSAppView.codeName}}';
    {{/if}}
  {{/if}}
{{/each}}

interface Props {
  name:string,
  parent: IParam;
  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, xDataControl, search, onToolbarEvent } = new TreeExpBarControl(ctrlState(), props, emit).moduleInstall();

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

<template>
  <div class="app-tree-exp-bar app-exp-bar{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}">
    <AppSplit v-model="state.split">
      <template #left>
        <div v-if="state.enableSearch || state.toolbar || state.showTitleBar" class="exp-bar-header">
          <div class="title" v-if="state.showTitleBar"><span>\{{ state.title }}</span></div>
          {{~#if ctrl.enableSearch}}
          <a-input-search class="search" v-model:value="state.searchValue" @search="search" />
          {{/if}}
          {{#each ctrl.psControls as | childCtrl |}}
            {{#eq childCtrl.controlType 'TOOLBAR'}}
            {{!-- TODO 计数器 --}}
          <AppToolbar
            mode="button"
            name="{{lowerCase childCtrl.codeName}}"
            :actionModel="state.toolbar"
            @onToolbarEvent="onToolbarEvent">
          </AppToolbar>
            {{/eq}}
          {{/each}}
        </div>
        <div class="exp-bar-body">
          {{#ctrl.psControls}}
            {{#eq controlType "TREEVIEW"}}
          <{{codeName}}Tree
            ref="xDataControl"
            name="{{name}}"
            :context="state.context"
            :viewParams="state.viewParams"
            :viewSubject="state.viewSubject"
            :selectFirstDefault="true"
            :isBranchAvailable="true"
            :parent="parent"
            @ctrlEvent="onCtrlEvent"
          ></{{codeName}}Tree>
            {{/eq}}
          {{/ctrl.psControls}}
        </div>
      </template>
      <template #right>
        {{#each ctrl.psAppViewRefs as | viewRef |}}
        {{#if viewRef.refPSAppView}}
          {{#if
            (or 
              (eq viewRef.refPSAppView.viewType 'APPINDEXVIEW')
              (eq viewRef.refPSAppView.viewType 'APPPORTALVIEW')
              (eq viewRef.refPSAppView.viewType 'DEEDITVIEW')
              (eq viewRef.refPSAppView.viewType 'DEPANELVIEW')
              (eq viewRef.refPSAppView.viewType 'DEGRIDVIEW')
              (eq viewRef.refPSAppView.viewType 'DELISTVIEW')
              (eq viewRef.refPSAppView.viewType 'DEMPICKUPVIEW')
              (eq viewRef.refPSAppView.viewType 'DEPICKUPGRIDVIEW')
              (eq viewRef.refPSAppView.viewType 'DEPICKUPVIEW')
              (eq viewRef.refPSAppView.viewType 'DETREEVIEW')
              (eq viewRef.refPSAppView.viewType 'DETREEEXPVIEW')
              (eq viewRef.refPSAppView.viewType 'DETABEXPVIEW')
            )
          }}
        <{{viewRef.refPSAppView.name}}
          v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
          class="tree-exp-bar-navview exp-bar-navview"
          :viewDefaultUsage="false"
          :context="state.selection.context"
          :viewParams="state.selection.viewParams">
        </{{viewRef.refPSAppView.name}}>
          {{else}}
        <!-- <{{viewRef.refPSAppView.name}}
          v-if="state.selection.viewName && state.selection.viewName === '{{viewRef.refPSAppView.name}}'"
          class="tree-exp-bar-navview exp-bar-navview"
          :viewDefaultUsage="false"
          :context="state.selection.context"
          :viewParams="state.selection.viewParams">
        </{{viewRef.refPSAppView.name}}> -->
          {{/if}}
        {{/if}}
      {{/each}}
        {{#each ctrl.psAppViewRefs as | viewRef |}}
          {{#if viewRef.refPSAppView}}
          {{/if}}
        {{/each}}
      </template>
    </AppSplit>
  </div>
</template>

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