<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/{{#if formDetail.psAppView.psAppModule.codeName}}{{spinalCase formDetail.psAppView.psAppModule.codeName}}{{else}}default{{/if}}/{{spinalCase formDetail.psAppView.codeName}}';
            {{/eq}}
           {{#if formDetail.psDEFormDetails}}
           {{> importFormDruipart items=formDetail.psDEFormDetails}}
           {{/if}}
       {{/each }}
{{/inline}}
{{#each ctrl.psDEFormPages as | items | }}
{{#if items.psDEFormDetails}}
{{> importFormDruipart items=items.psDEFormDetails}}
{{/if}}
{{/each}}
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, load, loadDraft, save, remove, refresh, onEditorEvent, onComponentEvent, getData, xDataCtrl } = new FormControl(ctrlState(), props, emit).moduleInstall();

// 暴露内部状态及能力
defineExpose({ name, state, load, loadDraft, save, remove, refresh, getData });
</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"
    ref="xDataCtrl"
  >
    <AppAnchor
      v-if="state.anchorDatas.length > 0" 
      :anchorDatas="state.anchorDatas"
      :viewType="state.parent.state.viewType"
      :viewTag="state.parent.state.viewCodeName">
    </AppAnchor>  
    {{#if ctrl.noTabHeader}}
    {{#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-form>
</template>
<style lang="scss">
  .app-form {
    .ant-card-head {
      padding: 0;
      margin: 0 10px;
    }
  }
</style>