<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';
{{#if ctrl.batchToolBarItems}}
import AppToolbar from '@components/common/app-toolbar.vue';
{{/if}}

interface Props {
  name:string,
  parent: IParam;
  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: true,
  rowEditState: false,
  rowActiveMode: 0,
  selectFirstDefault: false,
})

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

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

// 安装功能模块，提供状态和能力
const { name, state, useCustom, onEditorEvent, onToolbarEvent, onActionColEvent, newRow, remove, save, load, refresh, getData, exportExcel } = new GridControl(ctrlState(), props, emit).moduleInstall();
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange, useExpandedRowKeys, onExpandedRowsChange, formRef } = useCustom;
{{#if ctrl.batchToolBarItems}}
const renderBatchToolbar = (total: number, range: IParam[]) => {
  return (
    h('div', { class: 'app-grid-batchtoolbar-container' }, [
      state.selections && state.selections.length > 0 ? h(AppToolbar, {
        mode: 'button',
        class: 'app-grid-batchtoolbar',
        name: '{{ctrl.batchToolBarName}}',
        actionModel: state.batchToolbar,
        onOnToolbarEvent: (event: any) => onToolbarEvent(event)
      }) : null,
      `显示 ${range[0]} - ${range[1]} 条数据，共 ${total} 条数据`
    ])
  )
}
{{/if}}

// 暴露内部状态及能力
defineExpose({ name, state, newRow, remove, save, load, refresh, getData, exportExcel });
</script>
<template>
    <a-form name="{{ctrl.name}}" class="app-grid-form" ref="formRef" >
      <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"
        :expandedRowKeys="useExpandedRowKeys"
        :columns="state.columnsModel"
        {{#if ctrl.batchToolBarItems}}
        :pagination="Object.assign(state.mdCtrlPaging.pagination, {
          showTotal: (total, range) => {
            return renderBatchToolbar(total, range);
          }
        })"
        {{else}}
        :pagination="state.mdCtrlPaging.pagination"
        {{/if}}
        :customRow="useCustomRow"
        :rowClassName="useRowClassName"
        @change="onGridChange"
        @expandedRowsChange="onExpandedRowsChange"
        @resizeColumn="onResizeColumn"
      >
        <template #emptyText>
          <div class="not-data">
            <span class="empty-text">
              {{#if ctrl.emptyText}}
              {{ctrl.emptyText}}
              {{else}}
              无数据
              {{/if}}
            </span>
            {{#if ctrl.quickToolBarItems}}
            <AppToolbar
              mode="button"
              class="app-grid-quicktoolbar"
              name="{{ctrl.quickToolBarName}}"
              :actionModel="state.quickToolbar"
              @onToolbarEvent="onToolbarEvent"
            ></AppToolbar>
            {{/if}}
          </div>
        </template>
        <template #headerCell="{title, column}">
          {{#each ctrl.psDEGridColumns as | column |}}
          {{> @macro/front-end/widgets/grid-detail/include-grid.hbs type="COLUMNHEADER" item=column}}
          {{/each}}
        </template>
        <template #bodyCell="{ column, text, record, index }">
          {{#each ctrl.psDEGridColumns as | column |}}
          {{> @macro/front-end/widgets/grid-detail/include-grid.hbs type="COLUMN" item=column}}
          {{/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>
  </a-form>
</template>
<style lang="scss">
  .app-grid {
    height: 100%;
    padding-top: 8px;

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