<template>
  <div class="myEditor">
    <!-- <p>
      <el-button type="success"
                 icon="el-icon-check"
                 circle
                 @click="RunResult"></el-button>
      <span class="theme"
            style="float:right">
        <el-select v-model="theme"
                   size="mini"
                   @change="themeChange"
                   placeholder="请选择主题">
          <el-option v-for="item in themeOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </span>
    </p> -->
    <div id="container"
         ref="container"
         style="min-height:300px"></div>
  </div>
</template>
<script>
import loadMonaco from '../utils/monaco-load.js';

export default {
  props: {
    codes: {
      type: String,
      default: function () {
        return '<div>请编辑html内容</div>'
      }
    },
    language: {
      type: String,
      default: function () {
        return 'html'
      }
    },
    editorOptions: {
      type: Object,
      default: function () {
        return {
          selectOnLineNumbers: true,
          roundedSelection: false,
          readOnly: false, // 只读
          cursorStyle: 'line', // 光标样式
          automaticLayout: false, // 自动布局
          glyphMargin: true, // 字形边缘
          useTabStops: false,
          fontSize: 14, // 字体大小
          autoIndent: true // 自动布局
          // quickSuggestionsDelay: 500,   //代码提示延时
        }
      }
    }
  },
  data () {
    return {
      themeOption: [
        {
          value: 'vs',
          label: '默认'
        },
        {
          value: 'hc-black',
          label: '高亮'
        },
        {
          value: 'vs-dark',
          label: '深色'
        }
      ],
      theme: 'vs-dark',
      codesCopy: null // 内容备份
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initEditor();
    });
  },
  methods: {
    initEditor () {
      let that = this;
      that.$refs.container.innerHTML = '';
      loadMonaco().then(() => {
        let options = {
          value: that.codesCopy || that.codes,
          language: that.language,
          theme: that.theme // vs, hc-black, or vs-dark
        };
        for (let key in that.editorOptions) {
          options[key] = that.editorOptions[key];
        }
        that.monacoEditor = __monaco_editor__.editor.create(this.$refs.container, options);
        that.$emit('onMounted', that.monacoEditor);// 编辑器创建完成回调
        that.monacoEditor.onDidChangeModelContent(function (event) { // 编辑器内容changge事件
          that.codesCopy = that.monacoEditor.getValue();
          that.$emit('onCodeChange', that.monacoEditor.getValue(), event);
        });
        // 编辑器随窗口自适应
        window.addEventListener('resize', function () {
          that.initEditor();
        })
      })
    },
    RunResult () {
      console.log(this.monacoEditor.getValue());
    },
    themeChange (val) {
      this.theme = val;
      this.initEditor();
    }
  }
}
</script>
<style scoped>
#container {
  height: 100%;
  text-align: left;
}
</style>
