<script setup lang="ts">
import { onErrorCaptured, ref } from 'vue'

const props = defineProps<{
  sectionId: string
  sectionType: string
}>()

const error = ref<Error | null>(null)

onErrorCaptured((err) => {
  error.value = err as Error
  return false
})
</script>

<template>
  <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 p-6 text-red-700">
    <div class="mb-2 flex items-center gap-2">
      <span class="text-lg">⚠</span>
      <span class="font-medium">组件 "{{ sectionType }}" 无法显示</span>
    </div>
    <p class="mb-3 text-sm text-red-600">
      可能原因：组件加载失败或数据格式异常。此错误不影响其他组件。
    </p>
    <details class="mb-3">
      <summary class="cursor-pointer text-xs text-red-500">
        技术详情
      </summary>
      <code class="mt-1 block whitespace-pre-wrap text-xs">{{ error.message }}</code>
    </details>
    <button
      class="rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200"
      @click="error = null"
    >
      重新加载
    </button>
  </div>
  <slot v-else />
</template>
