<%
var ulc = isBlank(prefix) ? table.name : subAfter(table.name, prefix);
var lcc = toCamelCase(ulc);
var ucc = upperFirst(lcc);
var dc = toDashCase(lcc);

var pageVueName = ucc + ".vue";
var formVueName = ucc + "Form.vue";
var detailVueName = ucc + "Detail.vue";
var pageTsName = "page.ts";
var apiTsName = dc + "-api.ts";
var dTsName = dc + ".d.ts";
%>
<template>
  <ADetailPanel
      ref="detailPanel"
      v-bind="detailPanelProps">
    <template #default="detailData">
    <ElDescriptions title="${table.comment}" border>
      <%
      for(column in table.columns) {
          var map = tsType(column.dataType);
      %>
       <ElDescriptionsItem label="${column.comment}" prop="${toCamelCase(column.name)}">
        {{ detailData.${toCamelCase(column.name)} }}
      </ElDescriptionsItem>
     <%}%>
    </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'

const detailPanelIns = useTemplateRef<ADetailPanelInstance<${ucc}Types.Search${ucc}Result>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<${ucc}Types.Search${ucc}Result>({
  title: '${table.comment}详情',
  detailsLoader: ${ucc}Api.detail,
})

defineExpose({
  open(data: ${ucc}Types.Search${ucc}Result) {
    detailPanelIns.value?.open(data)
  },
})
</script>
