<template>
  <div>
    <el-popover
      placement="top-start"
      width="600"
      trigger="manual"
      v-model:visible="isPopoverVisible"
      @show="handleShow"
    >
      <div v-if="loading">
        <el-icon class="el-icon-loading" />
        加载中...
      </div>
      <pre v-else-if="formattedJson"
        style="
          white-space: pre-wrap;
          word-break: break-all;
          background-color: #f5f5f5;
          padding: 10px;
          border-radius: 4px;
          max-height: 400px;
          overflow-y: auto;
        "
      >{{ formattedJson }}</pre>
      <div v-else class="text-gray-400">无效的JSON数据</div>
      
      <template #reference>
        <span @click="togglePopover" class="text-blue-500 cursor-pointer">点击查看</span>
      </template>
    </el-popover>
  </div>
</template>

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

const props = defineProps({
  jsonData: {
    type: String,
    default: ''
  }
})

const isPopoverVisible = ref(false)
const loading = ref(false)
const formattedJson = ref('')
const hasProcessed = ref(false)

// 切换弹窗显示状态
const togglePopover = () => {
  isPopoverVisible.value = !isPopoverVisible.value
}

// 弹窗显示时处理JSON数据
const handleShow = async () => {
  // 如果已经处理过数据，直接显示
  if (hasProcessed.value) {
    return
  }
  
  loading.value = true
  
  // 使用setTimeout将处理放入下一事件循环，避免阻塞UI
  await nextTick()
  
  try {
    // 模拟异步处理，减轻主线程压力
    await new Promise(resolve => setTimeout(resolve, 50))
    
    // 检查数据大小，过大的数据给出提示
    if (props.jsonData && props.jsonData.length > 50000) {
      formattedJson.value = `数据过大(${props.jsonData.length}字符)，建议在详情页查看`
    } else if (props.jsonData) {
      // 尝试解析和格式化JSON
      const parsed = JSON.parse(props.jsonData)
      formattedJson.value = JSON.stringify(parsed, null, 2)
    }
    
    hasProcessed.value = true
  } catch (error) {
    console.error('JSON格式化错误:', error)
    formattedJson.value = 'JSON解析失败'
  } finally {
    loading.value = false
  }
}

// 监听jsonData变化，重置处理状态
watch(() => props.jsonData, () => {
  hasProcessed.value = false
  formattedJson.value = ''
})
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
