<template>
    <div class="table-row total-row" :style="gridTemplateStyle">
      <div class="item-details fw-bold">
        {{ label }}:
      </div>
      <template v-for="(component, index) in typeComponents">
        <div 
          v-if="component === 'numeric'" 
          :key="label + '-' + index"
          :class="component === 'numeric' ? 'numeric-input total-value fw-bold' : ''"
        >
          {{ getLabel(index) }}
        </div>
        <div v-else :key="'placeholder-' + label + '-' + index"></div>
      </template>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      label: String, 
      typeComponents: Array,
      gridTemplateStyle: Object,
      localValues: Array,
      getTotalForIndex: Function
    },
    methods: {
      getLabel(index) {
        if (this.label === 'Media') {
          return (this.getTotalForIndex(index) / this.localValues.length).toFixed(2);
        } else if (this.label === 'Numarul') {
          return this.localValues.length;
        } else if (this.label === 'Total') {
          return this.getTotalForIndex(index);
        }
        return '';
      }
    }
  };
  </script>
  