<script setup lang="ts">
import { Subject } from 'rxjs';
import { SaveOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-search-form-state';
import { SearchFormControl, IActionParam, IParam, ControlAction, IContext } from '@core';

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

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

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

const emit = defineEmits<CtrlEmit>();

// 安装功能模块，提供状态和能力方法
const { name, state, getData, onEditorEvent, onComponentEvent, onSearch, loadDraft, onSaveHistoryItem, onCancel, onRemoveHistoryItem } = new SearchFormControl(ctrlState(), props, emit).moduleInstall();
defineExpose({ name, state, getData });
</script>
<template>
  <a-form 
    name="{{ctrl.codeName}}" 
    class="app-search-form{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}{{#if ctrl.searchButtonPos}} {{lowerCase ctrl.searchButtonPos}}-button{{/if}}"
    style="{{#if ctrl.formWidth}}width: {{ctrl.formWidth}}px;{{/if}}"
    :model="state.data" 
    :rules="state.rules">
    <a-row>
      <a-col>
      {{#if ctrl.noTabHeader}}
        <a-row>
        {{#each ctrl.psDEFormPages as | ctrlPage | }}
          {{#each ctrlPage.psDEFormDetails as | formDetail | }}
          {{> @macro/front-end/widgets/form-detail/include-form.hbs type=formDetail.detailType item=formDetail}}
          {{/each }}
        {{/each}}
      {{else}}
      <a-tabs class="app-form-page">
        {{#each ctrl.psDEFormPages as | ctrlPage | }}
        {{> @macro/front-end/widgets/form-detail/include-form.hbs type=ctrlPage.detailType item=ctrlPage}}
        {{/each}}
      </a-tabs>
      {{/if}}
      </a-row>
      </a-col>
      <a-col class='search-form-footer'>
        {{#if ctrl.enableFilterSave}}
          {{#eq ctrl.searchButtonStyle 'DEFAULT'}}
        <a-select
          allowClear
          class="search-form-history"
          v-show="state.historyItems.length > 0"
          v-model:Value="state.selectHistoryItem"
        >
          <a-select-option class="search-form-history-option" v-for="(item,index) in state.historyItems" :key="index" :value="item.value">\{{item.name}} <close-outlined @click="() => onRemoveHistoryItem(item)" /></a-select-option>
        </a-select>
        <a-button class='search-button' @click="onSearch" type="primary">搜索</a-button>
        <a-button class='reset-button' @click='loadDraft'>重置</a-button>
            {{#if ctrl.enableFilterSave}}
        <a-popover title="存储自定义查询" v-model:visible='state.showPopover' overlayClassName="search-form-popover">
          <template #content>
            <a-input />
            <div class="search-form-buttons">
                <a-button @click="onCancel">取消</a-button>
                <a-button @click="onSaveHistoryItem" type="primary">保存</a-button>
            </div>
          </template>
          <a-button><save-outlined /></a-button>
        </a-popover>
            {{/if}}
          {{/eq}}
          {{#eq ctrl.searchButtonStyle 'SEARCHONLY'}}
        <a-button class='search-button' type="primary">搜索</a-button>
          {{/eq}}
        {{else}}
          {{#eq ctrl.searchButtonStyle 'DEFAULT'}}
        <a-button class='search-button' @click="onSearch" type="primary">搜索</a-button>
        <a-button class='reset-button' @click='loadDraft'>重置</a-button>
          {{/eq}}
          {{#eq ctrl.searchButtonStyle 'SEARCHONLY'}}
        <a-button class='search-button' type="primary">搜索</a-button>
          {{/eq}}
        {{/if}}
      </a-col>
    </a-row>
  </a-form>
</template>