<template>
  <common-drawer :mask-closable="true" :width="900" title="AI返回JSON推流" :visible="props.visible" @close="updateVisible(false)">
    <div class="wh100">
      <monaco-code-editor v-model="fileContent" style="height: 100%" language="sql" readOnly />
    </div>
  </common-drawer>
</template>

<script setup name="LoadingLog">
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  visible: Boolean,
  data: {
    type: String,
    default: ''
  }
});

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

const fileContent = ref('');

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

watch(
  () => props.data,
  val => {
    fileContent.value = props.data;
  },
  { deep: true }
);

// 更改弹框状态
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>
