<template>
  <!-- IF there aren't any special options, show value -->
  <span v-if=" column.type !== 'boolean' "> {{ row[columnName] }} </span>
  <!-- If column is boolean -->
  <q-checkbox
    v-if="column.type === 'boolean'"
    v-model="checkboxModel"
    :true-value="column.trueValue ? column.trueValue : true"
    :false-value="column.falseValue ? column.falseValue : false"
    :disable="!column.editable"
    @update:model-value="(val) => {
      emits('updateTableValue', {
        value: val,
        initialValue: !val,
        row,
        col: column,
      })
    }"
  />
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { KettalQTableColumn } from '@/types/KTable'
import { TableRow } from '@/components/KTable'

const props = defineProps<{
  row: TableRow,
  columns: KettalQTableColumn[],
  columnName: string
}>()
const checkboxModel = ref(props.row[props.columnName])
const emits = defineEmits(['updateTableValue'])
const column = ref<KettalQTableColumn>(props.columns.find(column => column.name === props.columnName) as KettalQTableColumn)

</script>
@/components/KTable
