{{>@macro/front-end/widgets/form-detail/include-form.hbs}}
<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './{{spinalCase ctrl.codeName}}-form-state';
import { FormControl, IActionParam, IParam, ControlAction, IContext } from '@core';
{{#*inline "importFormDruipart"}}
       {{#each items as | formDetail | }}
            {{#eq formDetail.detailType 'DRUIPART'}}
import {{formDetail.psAppView.codeName}} from '@views/{{spinalCase formDetail.psAppView.psAppModule.codeName}}/{{spinalCase formDetail.psAppView.codeName}}';
            {{/eq}}
           {{#if formDetail.psDEFormDetails}}
           {{>(lookup 'importFormDruipart') items=formDetail.psDEFormDetails}}
           {{/if}}
       {{/each }}
{{/inline}}
{{#each ctrl.psDEFormPages as | items | }}
{{#if items.psDEFormDetails}}
{{>(lookup 'importFormDruipart') items=items.psDEFormDetails}}
{{/if}}
{{/each}}
interface Props {
  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 { state, onEditorEvent, onComponentEvent } = new FormControl(ctrlState, props, emit).moduleInstall();

// 暴露内部状态及能力
defineExpose({ state, name: '{{ctrl.name}}' });
</script>
<template>
  <a-form name="{{ctrl.codeName}}" class="app-form{{#if ctrl.psSysCss}} {{ctrl.psSysCss.cssName}}{{/if}}{{#if ctrl.infoFormMode}} app-info-form{{/if}}" style="{{#if ctrl.formWidth}}width: {{ctrl.formWidth}}px;{{/if}}" :model="state.data" :rules="state.rules">
    {{#if ctrl.noTabHeader}}
    {{#each ctrl.psDEFormPages as | ctrlPage | }}
    {{#each ctrlPage.psDEFormDetails as | formDetail | }}
    {{>(lookup . 'formDetail.detailType') item=formDetail}}
    {{/each }}
    {{/each}}
    {{else}}
    <a-tabs class="app-form-page">
      {{#each ctrl.psDEFormPages as | ctrlPage | }}
      {{>(lookup . 'ctrlPage.detailType') item=ctrlPage }}
      {{/each}}
    </a-tabs>
    {{/if}}
  </a-form>
</template>
<style lang="scss">
  .app-form {
    .ant-card-head {
      padding: 0;
      margin: 0 10px;
    }
  }
</style>