<template>
  <!-- 
    author: dixin
    This height please adjust carefully, it is nausea
    Now:
        maxLines: 24  fontSize: 14  height: 430px
  -->
  <div>
    <div class="ace-container">
      <div class="ace-editor" ref="ace"></div>
    </div>
  </div>
</template>

<script>
import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
    datas: { type: String, default: "" },
    readOnly: { type: Boolean, default: false },
  },
  data() {
    return {
      aceEditor: null,
    };
  },

  mounted() {
    this.aceEditor = ace.edit(this.$refs.ace, {
      maxLines: 24,
      minLines: 10,
      fontSize: 14,
      wrap: true,
      tabSize: 2,
      highlightActiveLine: false,
      readOnly: this.readOnly,
    });
    if (this.url) {
      this.getValue();
    }
    if (this.datas) {
      let obj = "";
      console.log(typeof JSON.parse(this.datas));
      try {
        if (typeof JSON.parse(this.datas) == "object") {
          obj = JSON.stringify(JSON.parse(this.datas), null, "\t");
        }
      } catch (e) {
        obj = this.datas;
      }
      this.aceEditor.setValue(obj);
    }
  },
  watch: {},
  methods: {
    getValue() {
      this.$http
        .get(this.url)
        .then((response) => {
          this.aceEditor.setValue(response.data);
        })
        .catch(function (response) {
          console.log(response);
        });
    },
    parentHandleclick() {
      this.$emit("getEditValue", this.aceEditor.getValue());
    },
    getCodesVal() {
      return this.aceEditor.getValue();
    },
  },
};
</script>
<style scoped>
.ace-container {
  width: 100%;
  height: 430px !important;
  border-radius: 8px;
}
</style>
<style>
.ace-container .ace-editor {
  width: 100% !important;
  height: 430px !important;
}
.ace-container .ace_content {
  /* width: 100% !important; */
  height: 430px !important;
}
.ace-container .ace_text-layer {
  /* width: 100% !important; */
  word-break: break-all;
  /* background:yellowgreen; */
}
.ace_print-margin {
  display: none !important;
}
.ace-tm {
  background-color: #f8f9fd !important;
  border-radius: 0 8px 8px 0 !important;
}
.ace-tm .ace_gutter {
  background-color: #1a2236 !important;
  border-radius: 8px 0px 0px 8px !important;
  color: #e3e5ef !important;
}
.ace_gutter-layer {
  background-color: #1a2236 !important;
  border-radius: 8px 0px 0px 8px !important;
  color: #e3e5ef !important;
}
.ace-tm .ace_gutter-active-line {
  background-color: #315efc !important;
}
.ace_editor {
  overflow: inherit;
}
</style>
