<template>
  <VAceEditor
    v-model:value="states.content"
    class="vue-ace-editor"
    :class="{'vue-ace-editor-disable':props.disabled}"
    @input="codeChange"     
    :lang="props.lang"
    :theme="props.theme"
    :options="{ 
      useWorker: true,
      readOnly: props.disabled,
      wrap: true
    }"
  />
</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 = (val,val1,val2)=>{
  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");
      }
    } 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;
}
/* 光标颜色 */
.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>
