<template>
  <div class="table-main">
    <div
      v-for="(row, index) in arrData"
      :key="index"
      class="row-data m-2 d-flex"
    >
      <div class="key p-2 d-inline-block">
        <div class="text-capitalize ">
          {{ printRpoName(row) }} 
        </div>
      </div>
      <div v-if="['string', 'number'].includes(checkValueType(data[row]))">
        <div class="value p-2 d-inline-block">{{ data[row] }}</div>
      </div>
      <div v-else-if="checkValueType(data[row]) === 'array'">
        <div v-for="(arrRow, index2) in data[row]" :key="index2" class="d-flex">
          <div v-if="['string', 'number'].includes(checkValueType(arrRow))">
            {{ arrRow }}
          </div>
          <div v-else>
            <RpoRecord :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
          </div>
        </div>
      </div>
      <div v-else>
        <RpoRecord :data="data[row]" :rpo="subRpo(data[row],row,index)" />
      </div>
    </div>
  </div>
</template>

<script>
import rpoJsonData from '../Data/RpoTree.json';

export default {
  name: "RpoRecord",
  props: {
    data: {
      type: Object
    },
    rpo: {
      type: Object,
    }
  },
  computed: {
    arrData() {
      return Object.keys(this.data);
    }
  },
  methods: {
    keyTitle(key) {
      return key.split("_").join(" ");
    },
    checkValueType(val) {
      if (typeof val !== "object") {
        return typeof val;
      }
      return Array.isArray(val) ? "array" : "object";
    },
    printRpoName(key) {

      console.log('data',typeof this.rpo[key]);
      if (typeof this.rpo[key] !== 'undefined'){
        console.log(this.rpo[key]);
        return this.rpo[key]["desc"];
      }
      if (typeof this.rpo[key] !== 'undefined' && typeof this.rpo[key]["value"] !== 'undefined') {
        console.log(this.rpo[key]);
        return this.rpo[key].value.desc;
      }

      return key;
    },
    subRpo(val,kz,i) {
      console.log('val=',val,'k=',kz,'i=',i);
      console.log(this.rpo);
      return this.rpo[kz];
    }
  },
  mounted() {
    
    console.log('JSON=',this.rpo);

  }
};
</script>

<style scoped>
.table-main {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.m-2 {
  margin: .5rem!important;
}
.mx-2 {
  margin-right: .5rem!important;
}
.p-2 {
  padding: .5rem!important;
}
.d-flex {
  display: flex!important;
}
.d-inline-block {
  display: inline-block!important;
}
.text-capitalize {
  text-transform: capitalize!important;
}
.key {
  background: lightgray;
}
.table-main  .row-data {
    border: 2px solid grey;
    border-radius: 2px;
  }
</style>
