<template>
  <q-checkbox
    v-model="rowData.row[col.name]"
    :true-value="trueValue"
    :false-value="falseValue"
    :disable="disabled"
    color="k-accent"
    @update:model-value="(val) => {
      $emit('updateTableValue', {
        value: val,
        initialValue: !val,
        row: rowData.row,
        col,
      })
    }"
  >
    <q-tooltip
      v-if="isEditableByRules"
      max-width="400px"
    >
      {{ col.notEditableMessage ?? $t('notEditable') }}
    </q-tooltip>
  </q-checkbox>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const rowData = defineModel('rowData', { type: Object, required: true })
defineEmits(['updateTableValue'])
const { col } = defineProps<{ col: any }>()

const trueValue = computed(() => {
  return col.trueValue ? col.trueValue : true
})
const falseValue = computed(() => {
  return col.falseValue ? col.falseValue : false
})
const disabled = computed(() => {
  return !col.editable || (col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.value.row) : false)
})
const isEditableByRules = computed(() => {
  return col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.value.row) : false
})
</script>
<style>
</style>
