<template>
  <pre><code class="json" ref="codeBlock">{{ formattedCode }}</code></pre>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import hljs from 'highlight.js'

const props = defineProps({
  language: {
    type: String,
    default: 'javascript'
  },
  rawCode: {
    type: String,
    required: true
  }
})

const codeBlock = ref(null)

// 自动格式化 JSON
const formattedCode = computed(() => {
  if (props.language === 'json') {
    try {
      const parsed = JSON.parse(props.rawCode)
      return JSON.stringify(parsed, null, 4) // 关键：2空格缩进
    } catch (e) {
      return props.rawCode // 解析失败时返回原始内容
    }
  }
  return props.rawCode
})

// 自定义JSON高亮规则
hljs.registerLanguage('json', function (hljs) {
  return {
    name: 'JSON',
    contains: [
      {
        className: 'json-key', // 键名使用自定义类名
        begin: /"(\\.|[^\\"\r\n])*"(?=\s*:)/, // 匹配键名（后跟冒号的字符串）
        relevance: 0
      },
      hljs.QUOTE_STRING_MODE, // 默认的字符串规则（用于值中的字符串）
      hljs.NUMBER_MODE,
      {
        className: 'literal',
        begin: /\b(true|false|null)\b/
      }
      // 可根据需要添加其他规则
    ]
  }
})

// 高亮函数
const highlightCode = () => {
  if (codeBlock.value) {
    hljs.highlightElement(codeBlock.value)
  }
}

onMounted(highlightCode)
watch(() => [props.language, formattedCode.value], highlightCode)
</script>

<style scoped>
/* 新增换行保留样式 */
pre {
  white-space: pre-wrap; /* 允许自动换行 */
  word-wrap: break-word; /* 长单词换行 */
  width: 100%;
  border-radius: 6px;
  margin: 0;
  padding: 8px 0 22px 16px;
}
:deep(.language-json) {
  color: #f0f1f3;
}
:deep(.hljs-json-key) {
  color: #f0f1f3;
}
:deep(.hljs-string) {
  color: #42b0d5;
}
:deep(.hljs-number) {
  color: #42b0d5;
}
:deep(.hljs-literal) {
  color: #42b0d5;
}
</style>
