<!--日志显示组件-->
<template>
    <el-row>
      <el-col :span="12"><el-text tag="b" size="large">变更前内容</el-text></el-col>
      <el-col :span="12"><el-text tag="b" size="large">变更后内容</el-text></el-col>
    </el-row>
    <el-row style="height: 90%;margin-top: 10px;">
      <el-col :span="12">
        <div class="logContent">
          <!-- 优先插槽 -->
          <slot v-if="$slots['beforeContent']" name="beforeContent"></slot>
          <!-- 优先处理JSON格式 -->
          <pre v-else-if="isJsonString(props.beforeContent)">{{ JSON.parse(props.beforeContent)}}</pre>
          <!-- 默认输出 -->
          <el-text v-else="props.beforeContent">{{ props.beforeContent }}</el-text>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="logContent">
          <!-- 优先插槽 -->
          <slot v-if="$slots['content']" name="content"></slot>
          <!-- 优先处理JSON格式 -->
          <pre v-else-if="isJsonString(props.content)">{{ JSON.parse(props.content)}}</pre>
          <!-- 默认输出 -->
          <el-text v-else="props.content">{{ props.content }}</el-text>
        </div>
      </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { isJsonString } from '@/framework/utils/standard/dataHandleUtil.ts'

let props = defineProps({
  //变更前内容
  beforeContent: { type: String, default: '', },
  //变更后内容
  content: { type: String, default: '', },
})
</script>

<style lang="scss" scoped>
.logContent{
   border:1px solid; 
   border-color: #707175; 
   border-radius:5px;
   height: 100%; 
   width: 90%;
   padding-top: 5px;
   padding-left: 10px;
}
</style>
