<template>
  <div v-resize="onResize">
    <MonacoEditor
      class="editor"
      v-model="code"
      language="javascript"
      :options="monacoOptions"
      :style="editStyle()"
    />
  </div>
  <!-- <gz-report-viewer
    :reportId="$route.params.recordid"
    :ayaType="$route.params.ayatype"
  /> -->
</template>

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//https://github.com/egoist/vue-monaco
import MonacoEditor from "vue-monaco";

const FORM_KEY = "ay-report-edit";
export default {
  components: {
    MonacoEditor
  },
  beforeCreate() {
    window.$gz.eventBus.$emit("menu-change", {
      isMain: false,
      icon: "fa-drafting-compass",
      title: "ReportDesignReport",
      helpUrl: "form-ay-report-edit"
    });
  },
  data() {
    return {
      search: "",
      find: "",
      replace: "",
      replaceDialog: false,
      editingActiveTranslation: false,
      duplicating: false,
      code: "const noop = () => {}",
      monacoOptions: { automaticLayout: true },
      editAreaHeight: 300,
      obj: {},
      formState: {
        ready: false,
        dirty: false,
        valid: true,
        readOnly: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      },
      rights: window.$gz.role.defaultRightsObject(),
      ayaType: window.$gz.type.Translation
    };
  },
  methods: {
    onResize() {
      // this.editAreaHeight = window.innerHeight / 2;
      this.editAreaHeight = window.innerHeight * 0.9;
    },
    editStyle() {
      return "height: " + this.editAreaHeight + "px;";
    }
  }
};
</script>
<style>
.editor {
  width: 100%;
  height: 100%;
  border: 1px solid grey;
}
</style>
