<template>
  <json-viewer :value="json" :expand-depth="2" copyable sort></json-viewer>
</template>
<script>
export default {
  props: ["chartData", "rowParamList", "columnParamList", "indexParamList"],
  data() {
    return {
      json: [],
    };
  },
  mounted() {
    this.flush();
  },
  methods: {
    flush() {
      let { rowParamList, columnParamList, indexParamList, chartData } = this;
      let renameList = rowParamList
        .concat(columnParamList)
        .concat(indexParamList);
      this.json = chartData.map((i) =>
        renameList.reduce(
          (r, j) => ({ ...r, [j.columnComments]: i[j.columnName] }),
          {}
        )
      );
    },
  },
};
</script>
<style lang="scss">
.jv-container {
  height: 100%;
  .jv-code {
    height: 100%;
    overflow-y: scroll;
  }
}
</style>