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

<script>


import CodeMirror from "codemirror/lib/codemirror";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/mode/clike/clike";
export default {
    props:['code',"refresh",'autofocus'],
    data(){
        return {
            // code: '//按Ctrl键进行代码提示',
            editor:null,
            editCode:"",
        }
    },
    created(){
        // console.log(this.code);
    },
    watch:{
        code(val){
            this.editor.setValue(this.code)
        },
        refresh(val){
            if(val){
                this.editor.refresh()
            }
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            let mime = 'text/x-java'
            let theme = 'ambiance'//设置主题，不设置的会使用默认主题
            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets: true,
                // theme: theme,
                autofocus: this.autofocus,
                extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
                hintOptions: {//自定义提示选项
                    tables: {
                    users: ['name', 'score', 'birthDate'],
                    countries: ['name', 'population', 'size']
                    }
                }
            })
            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
            // this.editor.on('cursorActivity', () =>{
            //     this.$emit('update:code',this.editor.getValue())
            // //   editor.showHint()
            // })
            this.editor.setSize('100%', '100%');  
            if(this.code){
                this.editor.setValue(this.code)

            }
        },
        getNewCode(){
           return this.editor.getValue(); 
        },
        getContent(){
           return this.editor.getValue(); 
        },
        setValue(val){
            this.editor.setValue(val)
        },
        getValue(){
            return this.editor.getValue(); 
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~codemirror/theme/ambiance.css";
@import "~codemirror/lib/codemirror.css";
</style>

