<script setup lang="ts">
  import AceEditor, { Ace } from 'ace-builds';
  import githubTheme from 'ace-builds/src-noconflict/theme-github?url';
  import 'ace-builds/src-noconflict/mode-java';
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  withDefaults(
    defineProps<{
      content?: string;
    }>(),
    {}
  );

  defineEmits(['register']);

  const content = ref();

  const [register] = useModalInner((params: ModalParamsType<string>) => {
    content.value = params.record;
    initEditor();
    unref(aceEditorRef)?.setValue(params.record, -1);
  });

  const javaEditorElRef = ref();

  const aceEditorRef = ref<Ace.Editor>();

  const initEditor = () => {
    AceEditor.config.setModuleUrl('ace/theme/github', githubTheme);
    const editor = AceEditor.edit(unref(javaEditorElRef)!, {
      mode: 'ace/mode/java',
    });
    editor.setTheme('ace/theme/github');
    editor.setOptions({
      fontSize: 14,
      showLineNumbers: false,
      showGutter: false,
    });
    editor.setReadOnly(true);
    aceEditorRef.value = editor;
  };
</script>

<template>
  <BasicModal @register="register" title="错误" :showOkBtn="false" cancelText="关闭" width="80%">
    <div ref="javaEditorElRef" class="w-full h-full min-h-96"></div>
  </BasicModal>
</template>

<style>
  .ace-github .ace_print-margin {
    width: 0;
  }
</style>