<template>
  <div class="json-fold-viewer">
    <JsonFoldNode v-if="parsed !== undefined" :value="parsed" :depth="0" />
    <pre v-else-if="raw" class="json-fold-fallback">{{ raw }}</pre>
    <el-empty v-else description="无 JSON 内容" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import JsonFoldNode from './JsonFoldNode.vue'

const props = defineProps<{
  raw?: string
  data?: unknown
}>()

const parsed = computed(() => {
  if (props.data !== undefined) return props.data
  if (!props.raw?.trim()) return undefined
  try {
    return JSON.parse(props.raw) as unknown
  } catch {
    return undefined
  }
})
</script>

<style scoped>
.json-fold-viewer {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 2px;
}

.json-fold-fallback {
  margin: 0;
  font-family: var(--mg-font-mono, Consolas, monospace);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--mg-text-light);
}
</style>
