{{>@macro/front-end/widgets/grid-detail/include-grid.hbs}}
<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-grid-state';
import { GridControl, IActionParam, IParam, IContext, ControlAction, deepCopy } from '@core';

interface Props {
  context: IContext;
  viewParams: IParam;
  multiple?: boolean;
  rowEditState?: boolean;
  rowActiveMode?: 0 | 1 | 2;
  selectedData?: IParam[];
  selectFirstDefault?: boolean;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
}

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

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

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

// 安装功能模块，提供状态和能力
const { state, useCustom, onEditorEvent, onToolbarEvent } = new GridControl(ctrlState, props, emit).moduleInstall();
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange } = useCustom;

// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
  <a-table
    bordered
    sticky
    class="app-grid{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}"
    :rowKey="useRowKey"
    :showHeader="true"
    :scroll="useScrollOption"
    :sortDirections="['ascend', 'descend']"
    :data-source="state.items"
    :row-selection="useRowSelectionOption"
    :columns="state.columnsModel"
    :pagination="state.mdCtrlPaging.pagination"
    :customRow="useCustomRow"
    :rowClassName="useRowClassName"
    @change="onGridChange"
    @resizeColumn="onResizeColumn"
  >
    <template #emptyText>
      <div class="not-data">
        <span class="empty-text">
          {{#if ctrl.emptyText}}
          {{ctrl.emptyText}}
          {{else}}
          无数据
          {{/if}}
        </span>
        {{!-- 快速工具栏 --}}
      </div>
    </template>
    <template #headerCell="{title, column}">
      {{#each ctrl.psDEGridColumns as | column |}}      
      {{>(lookup 'COLUMNHEADER') item=column ctrl=ctrl}}
      {{/each}}
    </template>
    <template #bodyCell="{ column, text, record, index }">
      {{#each ctrl.psDEGridColumns as | column |}}
      {{>(lookup 'COLUMN') item=column ctrl=ctrl}}
      {{/each}}
    </template>
    {{#neq ctrl.aggMode 'NONE'}}
    <template #summary>
      <a-table-summary>
        <a-table-summary-row>
          <a-table-summary-cell align="center">数据聚合</a-table-summary-cell>
          <a-table-summary-cell v-for="(item, index) in state.gridAgg.aggData" :key="index">
            <span>\{{item}}</span>
          </a-table-summary-cell>
        </a-table-summary-row>
      </a-table-summary>
    </template>
    {{/neq}}
  </a-table>
</template>
<style lang="scss">
  .app-grid {
    height: 100%;
    padding-top: 8px;

    .table-striped {
      background-color: #fafafa;
    }
  }
</style>