<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="open" fullscreen @close="cancel">
      <el-row>
        <el-col>
          <el-card>
            语言：
            <el-select
              v-model="opts.language"
              placeholder="请选择"
              size="mini"
              @change="changeLanguage"
            >
              <el-option
                v-for="item in sets.language"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <MonacoeditorView
              ref="monacoeditorView"
              :opts="opts"
              @change="changeValue"
              :isDiff="isDiff"
              :height="600"
            ></MonacoeditorView>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MonacoeditorView from "./MonacoeditorView.vue";
import { getTopologyId, save } from "@/api/topology.js";
export default {
  components: {
    MonacoeditorView,
  },
  data() {
    return {
      loading: false,
      title: "JSON编辑",
      open: false,
      sets: {
        language: {
          apex: "apex",
          azcli: "azcli",
          bat: "bat",
          c: "c",
          clojure: "clojure",
          coffeescript: "coffeescript",
          cpp: "cpp",
          csharp: "csharp",
          csp: "csp",
          css: "css",
          dockerfile: "dockerfile",
          fsharp: "fsharp",
          go: "go",
          graphql: "graphql",
          handlebars: "handlebars",
          html: "html",
          ini: "ini",
          java: "java",
          javascript: "javascript",
          json: "json",
          kotlin: "kotlin",
          less: "less",
          lua: "lua",
          markdown: "markdown",
          msdax: "msdax",
          mysql: "mysql",
          "objective-c": "objective-c",
          pascal: "pascal",
          perl: "perl",
          pgsql: "pgsql",
          php: "php",
          plaintext: "plaintext",
          postiats: "postiats",
          powerquery: "powerquery",
          powershell: "powershell",
          pug: "pug",
          python: "python",
          r: "r",
          razor: "razor",
          redis: "redis",
          redshift: "redshift",
          ruby: "ruby",
          rust: "rust",
          sb: "sb",
          scheme: "scheme",
          scss: "scss",
          shell: "shell",
          sol: "sol",
          sql: "sql",
          st: "st",
          swift: "swift",
          tcl: "tcl",
          typescript: "typescript",
          vb: "vb",
          xml: "xml",
          yaml: "yaml",
        },
        theme: {
          vs: "vs",
          "vs-dark": "vs-dark",
          "hc-black": "hc-black",
        },
      },
      opts: {
        theme: "vs-dark",
        language: "json",
        links: false,
        readOnly: false,
        cursorStyle: false ? "underline-thin" : "line",
        lineNumbers: "on",
        folding: true,
        position: true,
        formatOnPaste: true,
        formatOnType: true,
        contextmenu: false,
        fontSize: 14,
        showFoldingControls: "always",
        automaticLayout: true,
        wordWrap: "on",
        wrappingIndent: "indent",
        renderLineHighlight: "none",
        occurrencesHighlight: false,
        scrollBeyondLastLine: false,
        hideCursorInOverviewRuler: true,
        minimap: {
          enabled: false,
        },
        guides: {
          indentation: false,
          highlightActiveIndentation: false,
        },
        scrollbar: {
          useShadows: false,
          verticalScrollbarSize: "9px",
          horizontalScrollbarSize: "9px",
        },
      },
      isDiff: true,
      inlineDiff: false,
      containerReload: true,
      jsonStr: "",
      value: {},
    };
  },
  methods: {
    init(row) {
      this.open = true;
      if (row.data) {
        this.value = Object.assign({}, row);
        this.$nextTick(() => {
          this.$refs.monacoeditorView.edit(row.data);
        });
      }
    },
    submitForm() {
      if (this.$refs.monacoeditorView.getVal()) {
        let params = {};
        params = Object.assign({}, this.value);
        params.data = JSON.parse(this.$refs.monacoeditorView.getVal());
        save(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("保存成功");
            this.cancel();
          }
        });
      }
    },
    cancel() {
      this.value = {};
      this.open = false;
      this.$emit("ok");
    },
    changeLanguage(val) {
      this.opts.language = val;
    },
    changeTheme(val) {
      this.opts.theme = val;
    },
    // 手动获取值
    getValue() {
      // this.$message.info("代码已输出至控制台");
      // console.log("输出代码:" + this.$refs.monacoeditorView.getVal());
    },
    // 内容改变自动获取值
    changeValue(val) {
      
    },
    inlineDiffChange(val) {
      this.$refs.monaco.upDateDiff(val);
    },
  },
};
</script>
<style scoped>
.monaco-editor {
  width: 100%;
  height: 500px;
}
</style>