<template>
  <div class="content">
    <div class="table-wrapper">
      <div class="title">
        <h6>Configurations</h6>
      </div>
      <div class="flex-row" style="align-items: baseline">
        <h6>Configuration ID</h6>
        <h4 class="top-info">CONF_{{ item.id }}</h4>
        <h6 style="margin-left: 30px">Subscription</h6>
        <h4 class="top-info">{{ item.Subscription }}</h4>
      </div>
      <div class="detail-box">
         <pre>{{ JSON.stringify(item.detail, null, 4)  }}</pre>
      </div>
      <div class="flex-row" style="justify-content: flex-end">
        <el-button size="small" type="primary" @click="back()">back</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {},
    };
  },
  methods: {
    showItem(item) {
      item.detail = JSON.parse(item.detail)
      this.item = item;
    },
    back() {
      this.$emit("back");
    },
    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 >
.top-info {
  margin-left: 15px;
  font-size: 30px;
}
.detail-box {
  margin: 20px 0px;
  padding: 10px;
  border: solid 1px #666;
  word-break: break-all;
}

.json-text {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}
.string {
  color: green;
}
.number {
  color: darkorange;
}
.boolean {
  color: blue;
}
.null {
  color: magenta;
}
.key {
  color: red;
}
</style>
