<template>
  <VAceEditor
    v-model:value="states.content"
    class="vue-ace-editor"
    :class="{'vue-ace-editor-disable':props.disabled}"
    :lang="props.lang"     
    :theme="props.theme"
    :options="{ 
      useWorker: true,
      readOnly: props.disabled,
      wrap: true
    }"
    @input="codeChange" />
</template>
<script setup>
import { reactive, toRefs, watch,onMounted } from "vue";
import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds";
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
import modeJavascriptUrl from "ace-builds/src-noconflict/mode-javascript?url";
import modeHtmlUrl from "ace-builds/src-noconflict/mode-html?url";
import themeGithubUrl from "ace-builds/src-noconflict/theme-github?url";
import themeChromeUrl from "ace-builds/src-noconflict/theme-chrome?url";
import themeMonokaiUrl from "ace-builds/src-noconflict/theme-monokai?url";
import workerBaseUrl from "ace-builds/src-noconflict/worker-base?url";
import workerJsonUrl from "ace-builds/src-noconflict/worker-json?url";
import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
import workerHtmlUrl from "ace-builds/src-noconflict/worker-html?url";
ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript", modeJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html", modeHtmlUrl);
ace.config.setModuleUrl("ace/theme/github", themeGithubUrl);
ace.config.setModuleUrl("ace/theme/chrome", themeChromeUrl);
ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl);
ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
const props = defineProps(
    {
        modelValue: {
          type:String,
          default:"",
        },
        disabled:{
          type:Boolean,
          default:false
        },
        // lang:{
        //   type:String,
        //   default:"json"
        // },
        // theme:{
        //   type:String,
        //   default:"themeChromeUrl"
        // },
        width:{
          type:String,
          default:"100%"
        },
    }
);
const emit = defineEmits(["update:modelValue"]);
// watch(
//   props.modelValue,
//   (n,o) => {
//     states.content = n
//   }
// )

const states = reactive({
  lang: "json",
  theme: "github",
  content: "",
});

// watch(
//   states.content,
//   (n,o) => {
//     emit("update:modelValue", n);
//   }
// )

const codeChange = ()=>{
  emit("update:modelValue", states.content);
};

onMounted(() => {
  let obj = "";
    // console.log(typeof JSON.parse(this.datas));
    try {
      if (typeof JSON.parse(props.modelValue) == "object") {
        obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
      }else{
        obj = props.modelValue;
      }
    } catch (e) {
      obj = props.modelValue;
    }
  states.content = obj;
});

const {content} = toRefs(states);

</script>

<style scoped>
.vue-ace-editor {
  flex: 1;
  margin-top: 15px;
  font-size: 16px;
  border: 1px solid #dadee7;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.vue-ace-editor :deep() .ace_scrollbar-v{
  width: 0px!important;
}

.vue-ace-editor :deep() .ace_gutter{
  font-size: 14px;
	color: #ffffff;
  background-color: #262626;
}
.vue-ace-editor :deep() .ace_gutter-cell{
  line-height: 22px;
  background-color: #262626;
}
.vue-ace-editor :deep() .ace_print-margin{
  width: 0;
}
.vue-ace-editor :deep() .ace_scroller{
  background-color: #1a1a1a;
  color: #fff;
  caret-color:#fff;
  right: 0!important;
}
/* 光标颜色 */
.vue-ace-editor :deep() .ace_cursor{
  color: #fff;
}
.vue-ace-editor-disable :deep() .ace_scrollbar-v{
  width: 6px!important;
}
.vue-ace-editor-disable :deep() .ace_gutter{
  background-color: #202531;
}
.vue-ace-editor-disable :deep() .ace_gutter-cell{
  background-color: #202531;
}

.vue-ace-editor-disable :deep() .ace_scroller{
  background-color: #fff;
  color: #202531;
}

/* 光标颜色 */
.vue-ace-editor-disable :deep() .ace_cursor{
  color: #000;
}
</style>
