<template>
    <!-- :indent-with-tab="true" 是否自动获取焦点-->
    <div class="codemirrorDiv">
        <codemirror :modelValue="pythonCode" placeholder="" style="height: 100%" :autofocus="true" :tabSize="2"
            :extensions="extensions" :indent-with-tab="true" @change="onchangeCodemirror()" />
        <div v-if="codeMirrorShow" class="codeMirrorMask"></div>
    </div>
</template>

<script setup>
import { Codemirror } from "vue-codemirror";
import { python } from "@codemirror/lang-python";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { EditorView } from "@codemirror/view"
import { compose } from "element-plus/es/components/table/src/util";

let myTheme = EditorView.theme({
    // 输入的字体颜色
    "&": {
        color: "#0052D9",
        backgroundColor: "#FFFFFF"
    },
    ".cm-content": {
        caretColor: "#0052D9",
    },
    // 激活背景色
    ".cm-activeLine": {
        backgroundColor: "#FAFAFA"
    },
    // 激活序列的背景色
    ".cm-activeLineGutter": {
        backgroundColor: "#FAFAFA"
    },
    //光标的颜色
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "#0052D9"
    },
    // 选中的状态
    "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#0052D9",
        color: '#FFFFFF'
    },
    // 左侧侧边栏的颜色
    ".cm-gutters": {
        backgroundColor: "#FFFFFF",
        color: "#ddd", //侧边栏文字颜色
        border: "none"
    },
}, {
    dark: false,
})
const extensions = [python(), myTheme];
// 接受的参数
const props = defineProps({
    pythonCode: {
        type: String,
        require: true,
        default: ""
    },
    codeMirrorShow: {
        type: Boolean,
        require: true,
        default:true
    }

})
const cmOptions = ref({})
onMounted(() => {

})
const onchangeCodemirror = () => {

}
// watch(()=>props.pythonCode,(newVal,oldVal)=>{
//     console.log("newVal:",newVal)
//     console.log("oldVal:",oldVal)
// })
</script>
<style scoped>
.codemirrorDiv {
    position: relative;
    width: 100%;
    height: 100%;
}

.codeMirrorMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0);
}
</style>