<template>
  <BasicDrawer @register="registerDrawer" title="全量详情" :width="900" destroyOnClose>
    <a-spin :spinning="loading">
      <a-alert
        type="info"
        show-icon
        message="该数据来自接口 /school/school/fullById，展示为原始 JSON。"
        style="margin-bottom: 12px"
      />
      <pre style="white-space: pre-wrap; word-break: break-word">{{ prettyJson }}</pre>
    </a-spin>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { fullById } from '../School.api';

  const loading = ref(false);
  const data = ref<any>(null);

  const [registerDrawer] = useDrawerInner(async (ctx) => {
    loading.value = true;
    try {
      const id = ctx?.record?.id;
      data.value = id ? await fullById({ id }) : null;
    } finally {
      loading.value = false;
    }
  });

  const prettyJson = computed(() => {
    try {
      return JSON.stringify(data.value ?? {}, null, 2);
    } catch {
      return '';
    }
  });
</script>

