<template>
  <el-dialog
    title="Configuration Details"
    :visible.sync="dialogVisible"
    width="60%"
  >
    <div class="detail-box">
      <pre>{{ JSON.stringify(json, null, 4) }}</pre>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">Close</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      json: {},
      dialogVisible:false,
    };
  },
  methods: {
    show(json) {
      this.json = JSON.parse(json);
      this.dialogVisible = true;
    },
    syntaxHighlight(json) {
      if (typeof json != "string") {
        json = JSON.stringify(json, undefined, 2);
      }
      json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
      return json.replace(
        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function (match) {
          var cls = "number";
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = "key";
            } else {
              cls = "string";
            }
          } else if (/true|false/.test(match)) {
            cls = "boolean";
          } else if (/null/.test(match)) {
            cls = "null";
          }
          return '<span class="' + cls + '">' + match + "</span>";
        }
      );
    },
  },
};
</script>
<style scoped>
.detail-box {
  border: solid 1px #666;
  word-break: break-all;
  overflow: auto;
}
</style>
