<script setup lang="ts">
import { Subject } from 'rxjs';
import { IActionParam, IParam, ControlAction, ListExpBarControl, IContext } from '@core';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-list-exp-bar-state';
{{#ctrl.psControls}}
  {{#eq controlType "LIST"}}
import { {{codeName}}List} from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-list';
    {{#if navPSAppView}}
import {{navPSAppView.name}} from '@views/{{spinalCase navPSAppView.psAppModule.codeName}}/{{spinalCase navPSAppView.codeName}}';
    {{/if}}
  {{/eq}}
{{/ctrl.psControls}}

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 ListExpBarControl(ctrlState(), props, emit).moduleInstall();

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

<template>
  <div class="app-list-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 "LIST"}}
          <{{codeName}}List
            ref="xDataControl"
            name="{{name}}"
            :controlAction="state.{{name}}.action"
            :context="state.context"
            :viewParams="state.viewParams"
            :viewSubject="state.viewSubject"
            :selectFirstDefault="true"
            :isBranchAvailable="true"
            :parent="parent"
            @ctrlEvent="onCtrlEvent"
          ></{{codeName}}List>
            {{/eq}}
          {{/ctrl.psControls}}
        </div>
      </template>
      <template #right>
        {{#ctrl.psControls}}
          {{#eq controlType "LIST"}}
            {{#if navPSAppView}}
        <{{navPSAppView.name}}
          v-if="state.selection && state.selection.key"
          class="list-exp-bar-navview exp-bar-navview"
          :context="state.selection.context"
          :key="state.selection.key"
          :viewDefaultUsage="false"
          :viewParams="state.selection.viewParams"
        ></{{navPSAppView.name}}>
            {{/if}}
          {{/eq}}
        {{/ctrl.psControls}}
      </template>
    </AppSplit>
  </div>
</template>

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