<template>
  <common-drawer :mask-closable="true" :width="900" :title="props.title" :visible="props.visible" @close="updateVisible(false)">
    <div class="wh100">
      <monaco-code-editor
        v-model="fileContent"
        style="height: 100%"
        language="sql"
        readOnly
        v-if="props.currentType != 'parseBusinessResult'"
      />
      <json-viewer :expand-depth="10" :value="fileContent" copyable boxed sort expanded v-else theme="my-awesome-json-theme" />
    </div>
  </common-drawer>
</template>

<script setup name="LogDetail">
import { ref, onMounted } from 'vue';
import { JsonViewer } from 'vue3-json-viewer';

const props = defineProps({
  visible: Boolean,
  data: {
    type: [String, Object],
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  currentType: String
});

const emits = defineEmits(['update:visible']);

const fileContent = ref(undefined);

onMounted(() => {
  fileContent.value = props.data;
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};
</script>

<style scoped lang="less">
.wh100 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: auto;
  height: calc(100% - 62px);
}
</style>
