<script setup>

const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})

const dataStore = useDataStore()
const tempStore = useTempStore()

const router = useRouter()

const dataType = dataStore.dataTypes[props.topLevelType]

// const selectedColumns = ref(tempStore.columns[props.topLevelType] ? tempStore.columns[props.topLevelType] : dataType.templateColumns.filter(i => !i.disabledInTable))
// const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))

</script>

<template>
  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
    <template #header v-if="props.platform === 'mobile'">
      <span>Informationen</span>
    </template>
    <UAlert
        v-if="props.item.archived"
        color="rose"
        variant="outline"
        :title="`${dataType.labelSingle} archiviert`"
        icon="i-heroicons-archive-box"
        class="mb-5"
    />
    <div class="text-wrap">
      <table class="w-full">
        <tbody>
        <tr
            v-for="datapoint in dataType.templateColumns"
        >
          <td>{{datapoint.label}}:</td>
          <td>
            <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
            <div v-else>
              <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
              <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
            </div>
          </td>
        </tr>
        </tbody>

      </table>
    </div>

  </UCard>

</template>

<style scoped>
td {
  border-bottom: 1px solid lightgrey;
  vertical-align: top;
  padding-bottom: 0.15em;
  padding-top: 0.15em;
}
</style>