<script setup lang="ts">
import { Subject } from 'rxjs';
import { FilterOutlined } from '@ant-design/icons-vue';
import { GridView, IActionParam, IParam, IContext } from '@core';
import { viewState } from './{{spinalCase page.codeName}}-state';
{{#page.ctrls}}
{{#eq controlType "GRID"}}
import { {{codeName}}Grid } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-grid';
{{/eq}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'searchform'))}}
import { {{codeName}}SearchForm } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-search-form';
{{/if}}
{{#if (and (eq controlType "SEARCHFORM") (eq name 'quicksearchform'))}}
import { {{codeName}}QuickSearchForm } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-quick-search-form';
{{/if}}
{{#eq controlType "SEARCHBAR"}}
import { {{codeName}}SearchBar } from '@widgets/{{spinalCase psAppDataEntity.codeName}}/{{spinalCase codeName}}-searchBar';
{{/eq}}
{{/page.ctrls}}

// props声明和默认值处理
interface Props {
  context?: IContext;
  viewParams?: IParam;
  openType?: "ROUTE" | "MODAL" | "EMBED";
  viewSubject?: Subject<IActionParam>;
}

const props = withDefaults(defineProps<Props>(), {
  openType:'ROUTE',
  viewSubject: () => new Subject<IActionParam>()
})

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

const emit = defineEmits<ViewEmit>();

// 安装功能模块，提供状态和能力方法
const gridView = new GridView(viewState, props, emit).moduleInstall();
const { state, grid, searchForm, quickSearchForm, onCtrlEvent, onToolbarEvent, onQuickGroupEvent, onQuickSearchEvent } = gridView;
{{#if page.psAppCounterRefs}}
//  计数器数据
const counterData = computed(() => {
  const { counterServices } = toRefs(state);
  if (counterServices && counterServices.value && counterServices.value.length) {
    return counterServices.value[0].data;
  }
  return {};
})
{{/if}}
</script>

<template>
  <AppGridViewLayout :class="['app-grid-view', state.viewSysCss]" :showCaptionBar="state.showCaptionBar">
    <template v-slot:caption>
      <AppIconText class="app-view__caption" size="large" :text="state.viewCaption" />
    </template>
    {{#if page.enableQuickGroup}}
    <template v-slot:quickGroupSearch>
      <AppQuickGroup v-if="state.enableQuickGroup" :quickGroupModel="state.quickGroupPSCodeList" :context="state.context" :viewParams="state.viewParams" @onQuickGroupEvent="onQuickGroupEvent" />
    </template>
    {{/if}}
    {{#page.ctrls}}
    {{#eq controlType "TOOLBAR"}}
    <template v-slot:toolbar>
      <AppToolbar
        mode="button"
        name="{{lowerCase codeName}}"
        :actionModel="state.toolbar"
        {{#if page.psAppCounterRefs}}
        :counterData="counterData"
        {{/if}}
        @onToolbarEvent="onToolbarEvent"/>
    </template>
    {{/eq}}
    {{#if (and (eq controlType "SEARCHFORM") (eq name 'searchform'))}}
    {{#if page.enableFilter}}
    <template v-slot:quickSearch>
      <div class='app-quick-search'>
      <a-input-search v-if="state.enableQuickSearch" @search="onQuickSearchEvent" allowClear/>
      <a-popover v-show="state.expandSearchForm" trigger="click" :overlayStyle="{width: '50%'}" placement="bottom">
        <template #content>
          <{{codeName}}SearchForm
            ref="searchForm"
            name="{{name}}"
            :context="state.context"
            :viewParams="state.viewParams"
            :controlAction="state.{{camelCase name}}.action"
            :viewSubject="state.viewSubject"
            @ctrlEvent="onCtrlEvent"
          ></{{codeName}}SearchForm>
        </template>
        <a-button class="app-search-form__filter-button"><filter-outlined /></a-button>
      </a-popover>
      </div>
    </template>
    {{else}}
    <template v-slot:searchForm>
      <{{codeName}}SearchForm
        v-show="state.expandSearchForm"
        ref="searchForm"
        name="{{name}}"
        :context="state.context"
        :viewParams="state.viewParams"
        :controlAction="state.{{camelCase name}}.action"
        :viewSubject="state.viewSubject"
        @ctrlEvent="onCtrlEvent"
      ></{{codeName}}SearchForm>
    </template>
    {{/if}}
    {{/if}}
    {{#if (and (eq controlType "SEARCHFORM") (eq name 'quicksearchform'))}}
    <template v-slot:quickSearchForm>
    <{{codeName}}QuickSearchForm
      ref="quickSearchForm"
      name="{{name}}"
      :context="state.context"
      :viewParams="state.viewParams"
      :controlAction="state.{{camelCase name}}.action"
      :viewSubject="state.viewSubject"
      @ctrlEvent="onCtrlEvent"
    ></{{codeName}}QuickSearchForm>
    </template>
    {{/if}}
    {{#eq controlType "SEARCHBAR"}}
    <template v-slot:searchBar>
      <{{codeName}}SearchBar
      :controlAction="state.{{camelCase name}}.action"
      :viewSubject="state.viewSubject"/>
    </template>
    {{/eq}}    
    {{#eq controlType "GRID"}}
    <{{codeName}}Grid
      ref="grid"
      name="{{name}}"
      :context="state.context"
      :rowEditState="state.rowEditState"
      :rowActiveMode="state.gridRowActiveMode"
      :showBusyIndicator="true"
      :viewParams="state.viewParams"
      :controlAction="state.{{name}}.action"
      :viewSubject="state.viewSubject"
      :parent="gridView"
      @ctrlEvent="onCtrlEvent"
    ></{{codeName}}Grid>
    {{/eq}}
    {{/page.ctrls}}
  </AppGridViewLayout>
</template>

<style lang="scss">
.app-grid-view {
  height: 100%;
  width: 100%;
  .app-search-form__filter-button {
    transform: translateX(-2px);
  }
}
</style>