<style lang="scss">
.eagle-code {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  .height-100 {
    .CodeMirror {
      font-size: 16px;
      height: 100px !important;
    }
  }
  .height-200 {
    .CodeMirror {
      font-size: 16px;
      height: 200px !important;
    }
  }
  .height-300 {
    .CodeMirror {
      font-size: 16px;
      height: 300px !important;
    }
  }
  .height-400 {
    .CodeMirror {
      font-size: 16px;
      height: 400px !important;
    }
  }
  .height-500 {
    .CodeMirror {
      font-size: 16px;
      height: 500px !important;
    }
  }
  .height-600 {
    .CodeMirror {
      font-size: 16px;
      height: 600px !important;
    }
  }
  .div.CodeMirror-cursors {
    padding: 12px 0px !important;
  }
}
</style>

<template>
  <div class="codemirror eagle-code">
    <codemirror :class="`height-${height}`" v-model="code" :options="opt"></codemirror>
  </div>
</template>
<script>
export default {
  name: 'Code',
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    options: Object,
    value: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data () {
    const propsOpt = this.options || {};
    return {
      opt: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: 'text/x-mysql',
        ...propsOpt,
      },
      code: '',
    }
  },
  watch: {
    value(val) {
      this.code = val !== undefined ? val : '';
    },
    code(val) {
      this.$emit('input', val);
    }
  },
  methods: {
  }
};
</script>
