<template>
  <q-card class="border-bottom-k-accent">
    <q-expansion-item>
      <template #header>
        <q-td v-if="selection !== 'none'">
          <q-checkbox
            :model-value="
              selected.some(
                (element) => element.rowId === action.rowId
              )
            "
            @click="emits('selectRow',item)"
          />
        </q-td>
        <!-- Title of Item -->
        <q-item-section
          class="row no-wrap"
          @click="emits('selectRow',item)"
        >
          <div
            v-for="key in rowKey"
            :key="key"
            class="text-left"
          >
            <span> {{ getColumn(key).label }}: </span> <GridTableRowValue
              :row="item"
              :columns="columns"
              :column-name="key"
            />
          </div>
        </q-item-section>
      </template>
      <q-card>
        <q-card-section>
          <div
            v-for="column in columns.filter(column=> !rowKey.includes(column.name))"
            :key="column"
            class="text-left"
          >
            <span> {{ column.label }}: </span>
          </div>
        </q-card-section>
      </q-card>
    </q-expansion-item>
  </q-card>
</template>
<script setup>

const props = defineProps({
  item: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    required: true
  },
  rowKey: {
    type: Array,
    required: true
  },
  action: {
    type: Object,
    required: true
  },
  selection: {
    type: String,
    required: true
  }
})
const selected = defineModel('selected', {
  type: Array,
  required: true
})
const emits = defineEmits(['selectRow'])

function getColumn (key) {
  return props.columns.find(column => column.name === key)
}

</script>
