<script setup>
import rpoJsonData from '../Data/RpoTree.json';
import { ref, onMounted } from 'vue';
import { computed } from 'vue';

const props = defineProps({
  data: { 
    type: Object,
    required: true
  },
  rpo: {
    type: Object,
    required: false,
    default: rpoJsonData
  }
});
   
const arrData = computed(() => Object.keys(props.data));

function keyTitle(key) {
    return key.split("_").join(" ");
}

function checkValueType(val) {
        if (typeof val !== "object") {
          return typeof val;
        }
        return Array.isArray(val) ? "array" : "object";
}

function printRpoName(rpoKey) {

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

function subRpo(val,kz,i) {
        console.log('val=',val,'k=',kz,'i=',i);
        console.log(props.rpo);
        return props.rpo[kz];
}
</script>

<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>
              <RpoRecord2 :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
            </div>
          </div>
        </div>
        <div v-else>
          <RpoRecord2 :data="data[row]" :rpo="subRpo(data[row],row,index)" />
        </div>
      </div>
    </div>
  </template>
  
  
  <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>
  