<template>
    <div class="myEditor">
        <p>
            <el-button type="success" icon="el-icon-check" circle @click="RunResult"></el-button>
        </p>
        <div id="container" ref="container" style="height:600px"></div>
    </div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {
    props:{
        codes:{
            type:String,
            default:function(){
                return '<div>請編輯html內容</div>'
            }
        },
        language:{
            type:String,
            default:function(){
                return 'html'
            }
        },
        editorOptions:{
            type:Object,
            default:function(){
                return {
                    selectOnLineNumbers: true,
                    roundedSelection: false,
                    readOnly: false,		// 只讀
                    cursorStyle: 'line',		//游標樣式
                    automaticLayout: false,	//自動佈局
                    glyphMargin: true,  //字形邊緣
                    useTabStops: false,
                    fontSize: 28,		//字型大小
                    autoIndent:true,//自動佈局
                    //quickSuggestionsDelay: 500,	//程式碼提示延時
                }
            }
        }
    },
    data(){
        return{
            
        }
    },
    mounted(){
        let self = this;
        function initEditor(){
            self.$refs.container.innerHTML = '';
            self.monacoEditor = monaco.editor.create(self.$refs.container, {
                value:self.codes,
                language: self.language,
                theme: 'hc-black',//vs, hc-black, or vs-dark
                editorOptions:self.editorOptions,
            });
            self.$emit('onMounted',self.monacoEditor);
        }
        initEditor();
        window.addEventListener('resize',function(){
            initEditor();
        })
    },
    methods:{
        RunResult(){
            console.log(this.monacoEditor.getValue());
        }
    }
}
</script>
<style scoped>
    #container{
        height:100%;
        text-align: left;
    }
</style>