<template>
  <q-input
    v-model="rowData.row[col.name]"
    dense
    filled
    square
    :disable="
      col.isFieldEditableByRules ?? false
        ? col.isFieldEditableByRules(rowData.row)
        : false
    "
    style="min-width: 20ch"
    :placeholder="col.dateFormat"
    hide-bottom-space
    debounce="200"
    :rules="col.rules"
    @update:model-value="
      (value) => {
        if (
          col.validation === undefined ||
          col.validation(rowData.row[col.name])
        ) {
          emit('updateTableValue', {
            value,
            initialValue: '',
            row: rowData.row,
            col,
          });
        }
      }
    "
  >
    <q-tooltip
      v-if="
        col.isFieldEditableByRules ?? false
          ? col.isFieldEditableByRules(rowData.row)
          : false
      "
      max-width="400px"
    >
      {{ col.notEditableMessage ?? $t("notEditable") }}
    </q-tooltip>
    <template #append>
      <q-icon
        name="event"
        class="cursor-pointer"
        :test-id="col.name + 'DateButton'"
      >
        <q-popup-proxy
          cover
          transition-show="scale"
          transition-hide="scale"
          @hide="
            () => {
              if (
                col.validation === undefined ||
                col.validation(rowData.row[col.name])
              ) {
                emit('updateTableValue', {
                  value: rowData.row[col.name],
                  initialValue: '',
                  row: rowData.row,
                  col,
                });
              }
            }
          "
        >
          <q-date
            v-model:model-value="rowData.row[col.name]"
            required=""
            landscape
            :mask="col.dateFormat"
            flat
            square
            color="k-primary"
            text-color="k-accent"
            :options="col.dateOptions"
          >
            <div class="row items-center justify-end">
              <q-btn v-close-popup :label="$t('close')" color="primary" flat />
            </div>
          </q-date>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>
<script setup lang="ts">
const rowData = defineModel("rowData", { type: Object, required: true });
const emit = defineEmits(["updateTableValue"]);
const { col } = defineProps<{ col: any }>();
</script>
