<template>
  <Codemirror
    v-model="code"
    :placeholder="placeholder"
    :style="{ ...options.style, ...options.style }"
    class="code-style"
    :mode="options.mode"
    :disabled="disabled"
    :spellcheck="options.spellcheck"
    :indentWithTab="options.indentWithTab"
    :autofocus="options.autofocus"
    :tabSize="options.tabSize"
    :extensions="options.extensions"
    @change="Change($event)"
    @blur="Blur($event)" />
</template>

<script setup>
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref, watch, reactive, nextTick } from "vue";
const jsonData = ref("");
const options = reactive({
  style: { height: "100%" },
  mode: "text/x-c++src",
  spellcheck: true,
  autofocus: true,
  indentWithTab: true,
  tabSize: 2,
  extensions: [oneDark],
});
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入表达式",
  },
});
const code = ref("");
watch(
  () => props.modelValue,
  (n) => {
    code.value = n;
  },
  {
    immediate: true,
  }
);
const emits = defineEmits(["update:modelValue", "change", "blur"]);
const Change = async ($event) => {
  await nextTick();
  emits("update:modelValue", code.value);
  emits("change", { $event, value: code.value });
};
const Blur = async ($event) => {
  await nextTick();
  emits("update:modelValue", code.value);
  emits("blur", { $event, value: code.value });
};
</script>

<style lang="scss" scoped>
.code-style {
  text-align: left;
}
</style>
<style>
.cm-editor {
  border-radius: 4px;
  overflow: hidden;
}
</style>
