<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>'
      }
    },
    isShow: {
      type: String,
      default: function () {
        return ''
      }
    },
    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();
    });
  },
  watch: {
    isShow(n, o) {
      if(n !== '') 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>
