<template>
  <q-select
    v-model="rowData.row[col.name]"
    dense
    filled
    square
    :disable="disabled"
    :options="col.selectOptions"
    style="min-width: 15ch"
    @update:model-value="(val) => {
      $emit('updateTableValue', {
        value: val,
        initialValue: '',
        row: rowData.row,
        col,
      })
    }"
  >
    <q-tooltip
      v-if="disabled"
      max-width="400px"
    >
      {{ col.notEditableMessage ?? $t('notEditable') }}
    </q-tooltip>
  </q-select>
</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 disabled = computed(() => {
  return !col.editable || (col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.value.row) : false)
})
</script>
