<template>
    <div class="pa0" style="border:1px solid #ccc;left:0;right:0;top:0;bottom:0;">
        <textarea :ref="el => editor_handle.el = el" class="codesql" />
    </div>
</template>

<script setup>

import { ref,reactive,inject,computed,provide,onMounted,watch,nextTick, shallowRef } from "vue"

import * as CodeMirror from "codemirror/lib/codemirror";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/selection/active-line";
import "codemirror/mode/sql/sql";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/sql-hint";

const props = defineProps(['code']);

const editor_handle = reactive({
    editor:shallowRef(),
    el:null,
    init(){
        let mime = 'text/x-sql'
        let theme = 'ambiance'//设置主题，不设置的会使用默认主题
        editor_handle.editor = CodeMirror.fromTextArea(editor_handle.el, {
            mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            // theme: theme,
            autofocus: false,
            extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
            hintOptions: {//自定义提示选项
                tables: {
                users: ['name', 'score', 'birthDate'],
                countries: ['name', 'population', 'size']
                }
            }
        })
        this.editor.setSize('100%', '100%');  
        if(props.code){
            editor_handle.editor.setValue(props.code)
        }
    },
    getNewCode(){
        return editor_handle.editor.getValue(); 
    },
    getContent(){
        return editor_handle.editor.getValue(); 
    },
    setValue(val){
        editor_handle.editor.setValue(val)
    },
    getValue(){
        return editor_handle.editor.getValue(); 
    }
})
onMounted(()=>{
    // setTimeout(() => {
        
        editor_handle.init()
    // }, 1000);
})

defineExpose({
    getContent:editor_handle.getContent,
    setValue:editor_handle.setValue,
    getValue:editor_handle.getValue,
})
</script>
<style lang="scss" >
@import "codemirror/theme/ambiance.css";
@import "codemirror/lib/codemirror.css";
@import "codemirror/addon/hint/show-hint.css";
</style>

