<%_
const { formFieldLines, showInOneRelationships, showInOneContainerType, showInOneImportComponents } = (bcEntityData || { formFieldLines: [] });
_%>
<template>
  <div<% if (cypressTests) { %> data-cy="<%= entityInstance %>DetailsHeading"<% } %>>
    <Descriptions ref="<%= entityInstance %>DetailRef" v-bind="descriptionsProps"></Descriptions>
  <%_ if (showInOneRelationships && showInOneRelationships.length) {
    const subComponentName = showInOneContainerType === 'Tabs' ? 'TabPane' : 'CollapsePanel';
  _%>
  <<%= showInOneContainerType %>>
    <%_ showInOneRelationships.forEach(relationship => { _%>
      <%_
      let componentName = 'Grid';
      let relationTableKey = relationship.relationshipName + 'Grid';
      if (relationship.source?.annotationOnSource?.includes('editByList')) {
        relationTableKey = relationship.otherEntity.entityNameCapitalized + 'List';
          componentName = relationship.otherEntity.entityNameCapitalized + 'List';
      } else　if (relationship.source?.annotationOnSource?.includes('editByFormList')) {
        relationTableKey = relationship.relationshipName + 'FormList'
          componentName = 'FormList'
      } else　if (relationship.source?.annotationOnSource?.includes('editByDescList')) {
        relationTableKey = 'DescList';
          componentName = 'DescList'
      }
      _%>
      <<%= subComponentName %> :tab="relationTables.<%= relationTableKey %>.title" :key="relationTables.<%= relationTableKey %>.name">
        <<%= componentName %> ref="formRef" v-bind="relationTables.<%= relationTableKey %>.props"></<%= componentName %>>
      </<%= subComponentName %>>
    <%_ }); _%>
    </<%= showInOneContainerType %>>
  <%_ } _%>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, h } from 'vue';
<%_ if (showInOneRelationships.length) { _%>
  <%_ if (showInOneContainerType === 'Collapse') { _%>
import { Tabs, TabPane } from 'ant-design-vue';
  <%_ } else { _%>
import { CollapsePanel, Collapse } from 'ant-design-vue';
  <%_ } _%>
<%_ } _%>
import { Descriptions } from '@begcode/components';
import ServerProvider from '@/api-service/index';
import config from '../config/detail-config';
import { I<%= entityAngularName %> } from '@/models/<%= entityModelFileName %>.model';
  <%_ if (showInOneImportComponents && Object.keys(showInOneImportComponents).length) { _%>
  <%_ Object.values(showInOneImportComponents).forEach(importLine => { _%>
<%- importLine %>
  <%_ });_%>
  <%_  } _%>
<%_ if (addCustomMethod.indexOf('updateTemplate') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.updateTemplate.ejs`, {position: 'import'}); -%>
<%_ } _%>

<%_ let apiModuleName = this._.camelCase(clientRootFolder || microserviceName); _%>
  // begcode-please-regenerate-this-file 如果您不希望重新生成代码时被覆盖，将please修改为don't ！！！
  defineOptions({
    name: '<%= this._.upperFirst((moduleName || clientRootFolder) ? (moduleName || clientRootFolder) + entityAngularName : entityInstance) %>Detail',
    inheritAttrs: false,
  });

  const props = defineProps({
    entityId: {
      type: [String, Number] as PropType<string | number>,
      default: '',
      required: true,
    },
  });

  const <%= entityInstance %>DetailRef = ref(null);
  const ctx = getCurrentInstance()?.proxy;
  const apiService = ctx?.$apiService as typeof ServerProvider;
  const <%= entityInstance %> = reactive<I<%= entityAngularName %>>({});
  if (props.entityId) {
    apiService.<%= apiModuleName ? apiModuleName + '.' : '' %><%= entityInstance %>Service.find(<% if (tsKeyType === 'number') { %>Number(props.entityId)<% } else { %>props.entityId<% } %>).then(data => {
      if (data) {
        Object.assign(<%= entityInstance %>, data);
      }
    });
  }
  const formItemsConfig = reactive(config.fields);
  <%_
  const oneToOneNotOwnerSide =[];
  let hasUseJPADerivedIdentifier = false;
  _%>
  //获得关联表属性。
  <%_ if (useCommonTable) { _%>
  <%_
  showInOneRelationships.forEach(relationship => { _%>
  const <%= relationship.relationshipName %>Data = await apiService.modelConfig.commonTableService.findByEntityName('<%= relationship.otherEntityNameCapitalized %>');
  const <%= relationship.relationshipName %>Columns = xGenerateTableColumns(<%= relationship.relationshipName %>Data);
  // const <%= relationship.relationshipName %>ColumnsRender = pageControl.<%= relationship.relationshipName %>ColumnsRender();
  <%_ }); _%>
  <%_ } _%>

  const descriptionsProps = reactive({
    schema: formItemsConfig,
    isEdit: () => false,
    // formConfig,
    labelWidth: '120px',
    data: <%= entityInstance %>,
    column: 1,
  });
  <%_ if (showInOneRelationships && showInOneRelationships.length) { _%>
  const relationTables = reactive({
  <%_
  showInOneRelationships.forEach(relationship => { _%>
  <%_ if (relationship.source?.annotationOnSource?.includes('editByList')) { _%>
    <%= relationship.relationshipName %>List: {
          name: '<%= relationship.otherEntity.entityNameCapitalized %>List',
          title: '<%= relationship.bcTitle%>列表',
          props: {
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            query: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            query: {<%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            editIn: 'modal',
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            baseData: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            baseData: { <%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            gridOptions: {},
            searchFormOptions: {
              disabled: false,
              allowSwitch: false,
            },
            gridCustomConfig: {
              hideOperations: false,
              hideSlots: [],
              columnsName: '',
            },
            modelName: '<%= relationship.otherEntity.entityNameCapitalized %>List',
          },
        },
          <%_ } else　if (relationship.source?.annotationOnSource?.includes('editByFormList')) { _%>
      <%= relationship.relationshipName %>FormList: {
          name: 'FormList',
          title: '<%= relationship.bcTitle%>列表',
          props: {
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            query: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            query: {<%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            editIn: 'modal',
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            baseData: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            baseData: { <%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            configData: [
              {
                formConfig: config.<%= relationship.relationshipName %>Columns,
                data: {},
              }
            ],
            modelName: 'FormList',
          },
        },
          <%_ } else　if (relationship.source?.annotationOnSource?.includes('editByDescList')) { _%>
      <%= relationship.relationshipName %>DescList: {
          name: 'DescList',
          title: '<%= relationship.bcTitle%>列表',
          props: {
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            query: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            query: {<%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            editIn: 'modal',
              <%_ if (relationship.source && relationship.source.annotationOnSource && relationship.source.annotationOnSource.toString().includes('relateByIdEntity')) { _%>
            baseData: { ownerEntityName: '<%= entityClass %>', ownerEntityId: entityId },
              <%_ } else { _%>
            baseData: { <%= relationship.otherRelationship.relationshipName%>Id: entityId },
              <%_ } _%>
            data: <%= entityInstance %>.<%= relationship.relationshipName %>,
            savedOpen: true,
            toolButtons: [],
            editComponentPath: '@/views/<%= relationship.otherEntity.entityFolderName%>/<%= relationship.otherEntity.entityFileName%>-edit.vue',
            modelName: 'DescList',
          },
          slots: {
            default: (item) => {
              return h(<%= relationship.otherEntity.entityNameCapitalized %>Desc, {entityId: item.id}, () => []);
            }
          },
        },
          <%_ } else { _%>
      <%= relationship.relationshipName %>Grid: {
          name: 'vxe-grid',
          title: '<%= relationship.bcTitle%>列表',
          props: {
            data: <%= entityInstance %>['<%= relationship.relationshipName%>'],
            columns: <%= useCommonTable ? '' : 'config.'%><%= relationship.relationshipName%>Columns(),
            border: true,
            showOverflow: true,
            fieldMapToTime: [],
            compact: true,
            size: 'default',
            toolbarConfig: {
              buttons: [],
              tools: [],
              import: false,
              export: false,
              print: false,
              custom: false
            }
          } as VxeGridProps,

        },
      <%_ } _%>
      <%_ }); _%>
  });
  <%_ } _%>
  <%_ if (addCustomMethod.indexOf('detailTemplate') !== -1) { _%>
  <%- include(`../common/entity-custom/${entityClass}.updateTemplate.ejs`, {position: 'method'}); -%>
  <%_ } _%>
</script>
