<template>
<!--  <codemirror-->
<!--      ref="codeMirror"-->
<!--      v-model="logStr"-->
<!--      placeholder="正在导入，请稍等"-->
<!--      :style="{ height: height, width: width }"-->
<!--      :autofocus="true"-->
<!--      :indent-with-tab="true"-->
<!--      :tab-size="2"-->
<!--      :extensions="extensions"-->
<!--      @ready="log('ready', $event)"-->
<!--      @change="log('change', $event)"-->
<!--      @focus="log('focus', $event)"-->
<!--      @blur="log('blur', $event)"-->
<!--  />-->
  <!--先用div实现，不用codemirror-->
  <div
      id="codeMirrorDiv"
      :style="{ height: height, width: width, overflow: 'auto', 'background-color':'#2c2c2c', color: '#287ff4'}"
      v-html="logStr"
  >

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, reactive, ref} from 'vue';
// import { Codemirror } from 'vue-codemirror'
// import { javascript } from '@codemirror/lang-javascript'
// import { oneDark } from '@codemirror/theme-one-dark'
export default {
  // components: {
  //   Codemirror
  // },
  name: "logcodemirror",
  props: {
    width: {
      type: String,
      default: 'auto'
    },
    height: {
      type: String,
      default: 'auto'
    },
    logStr: {
      type: String,
      default: '正在导入，请稍等'
    }
  },
  setup() {
    // const codeMirror = ref()
    // const code = ref()
    // const extensions = [javascript(), oneDark]
    const moveTextToEnd = () => {

      // debugger;
      // codeMirror.value.scrollIntoView(codeMirror.value.lineCount() - 1);
      //   that.$refs.mycode.codemirror.scrollIntoView(that.$refs.mycode.codemirror.lineCount() - 1);
      var div = document.getElementById('codeMirrorDiv');
      div.scrollTop = div.scrollHeight;
    }
    return {
      // codeMirror,
      // code,
      // extensions,
      log: console.log,
      moveTextToEnd
    }
  }
}
</script>

<style scoped>

</style>