<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-list-state';
import { ListControl, IActionParam, IParam, IContext, ControlAction, deepCopy } from '@core';
{{#if ctrl.itemPSLayoutPanel}}
  {{#ctrl.itemPSLayoutPanel}}
import { {{codeName}}Panel } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-panel';
  {{/ctrl.itemPSLayoutPanel}}
{{/if}}
{{#if ctrl.batchToolBarItems}}
import AppToolbar from '@components/common/app-toolbar.vue';
{{/if}}

interface Props {
  name:string,
  parent: IParam;
  context: IContext;
  viewParams: IParam;
  multiple?: boolean;
  selectFirstDefault?: boolean;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  showBusyIndicator: true,
  multiple: false,
  selectFirstDefault: false,
})

// emit声明
interface CtrlEmit {
  (name: "ctrlEvent", value: IActionParam): void;
}

// emit声明
const emit = defineEmits<CtrlEmit>();

// 安装功能模块，提供状态和能力
const { name, state, onUIAction, newRow, remove, save, load, refresh, getData, xDataControl, exportExcel, useCustom, onToolbarEvent} = new ListControl(ctrlState(), props, emit).moduleInstall();
const { onListItemSelected, isSelected, loadMore } = useCustom;

// 暴露内部状态及能力
defineExpose({ name, state, newRow, remove, save, load, refresh, getData, exportExcel });
</script>
// TODO 后续添加加载遮罩效果
<template>
  <a-list
    ref="xDataControl"
    class="app-list{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
    item-layout="horizontal"
    :data-source="state.items"
    :locale="{
      {{#if ctrl.emptyText}}
      emptyText:'{{ctrl.emptyText}}'
      {{else}}
      emptyText:'暂无数据'
      {{/if}}
    }">
    <template #loadMore>
      <div class="load-more">
        <a-button @click="loadMore" type="text">
          加载更多
        </a-button>
      </div>
    </template>
    {{#if}}
    <template #footer>
      {{#if ctrl.quickToolBarItems}}
      <AppToolbar
        v-if="!state.items || state.items.length == 0"
        mode="button"
        class="app-list-quicktoolbar"
        name="{{ctrl.quickToolBarName}}"
        :actionModel="state.quickToolbar"
        @onToolbarEvent="onToolbarEvent">
      </AppToolbar>
      <AppToolbar
        v-if="state.selections && state.selections.length > 0"
        mode="button"
        class="app-list-batchtoolbar"
        name="list_batchtoolbar"
        :actionModel="state.batchToolbar"
        @onToolbarEvent="onToolbarEvent">
      </AppToolbar>
      {{/if}}
    </template>
    {{/if}}
    <template #renderItem="{ item }">
      {{#if (and ctrl.enableGroup ctrl.groupPSAppDEField)}}
      <a-list-item class="app-list-group-item">
        <a-collapse :bordered="false" ghost class="full-container">
          <a-collapse-panel :key="item.srfmajortext" :header="item.srfmajortext">
            <a-list-item 
              v-for="child of item.children" :key="child.srfkey"
              :class="['app-list-item', isSelected(child) ? 'app-list-item__selection' : '']"
              @click="(event) => onListItemSelected(child, event)">
              {{#if ctrl.itemPSLayoutPanel}}
              <{{ctrl.itemPSLayoutPanel.codeName}}Panel
                :context="state.context"
                :viewParams="state.viewParams"
                :navDatas="[child]"
                panelType="LAYOUT">
              </{{ctrl.itemPSLayoutPanel.codeName}}Panel>
              {{else}}
              <a-list-item-meta
                :description="child.srfdescription">
                <template #title>
                  <span class="text">\{{child.srfmajortext}}</span>
                </template>
                <template #avatar v-if="child.srficon">
                  <img :src="child.srficon" />
                </template>
              </a-list-item-meta>
              <template #actions v-if="state.uIActions">
                <div class="list-item__actions">
                  <template v-for="(action, index) of state.uIActions" :key="index">
                  <span
                    v-if="child[action.uIActionTag][0].visible"
                    :class="['list-item__action', child[action.uIActionTag][0].disabled ? 'disabled' : '']"
                    :title="action.tooltip ? action.tooltip : action.caption"
                    @click.stop="(event) => onUIAction(item, child[action.uIActionTag][0], event)">
                    <template v-if="action.showIcon">
                      <i v-if="action.cssClass" :class="action.cssClass" />
                      <img v-if="action.imagePath" :src="action.imagePath" />
                    </template>
                    <span v-if="action.showCaption" class="text">\{{action.caption}}</span>
                  </span>
                  </template>
                </div>
              </template>
              {{/if}}
            </a-list-item>
          </a-collapse-panel>
        </a-collapse>
      </a-list-item>
      {{else}}
      <a-list-item
        :class="['app-list-item', isSelected(item) ? 'app-list-item__selection' : '']"
        @click="(event) => onListItemSelected(item, event)">
        {{#if ctrl.itemPSLayoutPanel}}
        <{{ctrl.itemPSLayoutPanel.codeName}}Panel
          :context="state.context"
          :viewParams="state.viewParams"
          :navDatas="[item]"
          panelType="LAYOUT">
        </{{ctrl.itemPSLayoutPanel.codeName}}Panel>
        {{else}}
        <a-list-item-meta
          :description="item.srfdescription">
          <template #title>
            <span class="text">\{{item.srfmajortext}}</span>
          </template>
          <template v-if="item.srficon">
            <img :src="item.srficon" />
          </template>
        </a-list-item-meta>
        <template #actions v-if="state.uIActions">
          <div class="list-item__actions">
            <template v-for="(action, index) of state.uIActions" :key="index">
            <span
              v-if="item[action.uIActionTag][0].visible"
              :class="['list-item__action', item[action.uIActionTag][0].disabled ? 'disabled' : '']"
              :title="action.tooltip ? action.tooltip : action.caption"
              @click.stop="(event) => onUIAction(item, item[action.uIActionTag][0], event)">
              <template v-if="action.showIcon">
                <i v-if="action.cssClass" :class="action.cssClass" />
                <img v-if="action.imagePath" :src="action.imagePath" />
              </template>
              <span v-if="action.showCaption" class="text">\{{action.caption}}</span>
            </span>
            </template>
          </div>
        </template>
        {{/if}}
      </a-list-item>
      {{/if}}
    </template>
  </a-list>
</template>
<style lang="scss">
</style>