<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: #fff;
  color: #495266;
  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;
  right: 2px;
}

.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-track {
  background-color: #f7f7f9; /* Matches ace monokai */
  border-radius: 3px;
}
.vue-ace-editor-disable :deep().ace_scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c7d7;
  border-radius: 3px;
}
.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>
