<template>
	<codemirror
		v-model="codeContent"
		:options="codeOptions"
		placeholder="请输入python代码"
	/>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css'
//python语法高亮
import 'codemirror/mode/python/python.js'
// 光标行高亮
import 'codemirror/addon/selection/active-line';
//代码折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/indent-fold'


export default {
	name:'',
	components: { codemirror },
	props: {
		code: {
			type: String,
		}
	},
	watch: {
		code(newval) {
			this.codeContent = _.cloneDeep(newval);
		},
		codeContent(newval) {
			if(newval !== this.code) {
				console.log('code change')
				this.$emit('initResult')
			}
		}
	},
	data () {
		return {
			codeContent: '',
			codeOptions: {
				tabSize: 4,
        mode: 'text/x-python',
				styleActiveLine: true,
        theme: 'default',
        lineNumbers: true,
        line: true,
				indentWithTab: true,
				//代码折叠
				foldGutter: true,
				gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter",'CodeMirror-lint-markers'],
        height: 'auto',
			}
		};
	},
	methods: {
		
	},
	mounted() {},
}
</script>
<style lang='scss' scoped>
.CodeMirror {
	height: 300px !important;
}
</style>