<template>
  <!-- POPUP EDIT -->
  <span>
    {{ col.format ? col.format(rowData.row[col.name]) : rowData.row[col.name] }}
    <q-tooltip
      v-if="col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.row) : false"
      max-width="400px"
    >
      {{ col.notEditableMessage ?? $t('notEditable') }}
    </q-tooltip>
  </span>
  <q-popup-edit
    v-slot="scope"
    v-model="rowData.row[col.name]"
    :disable="col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.row) : false"
    :title="col.label"
    auto-save
    buttons
    :label-set="$t('confirm')"
    :label-cancel="$t('cancel')"
    :test-id="col.name + 'EditMenu'"
    :validate="col.validation"
    @save="(val, initialValue) => {
      emit('updateTableValue', {
        value: val,
        initialValue,
        row: rowData.row,
        col,
      })
    }
    "
    @hide="col.validation"
  >
    <q-input
      v-model="scope.value"
      type="textarea"
      dense
      :rules="col.rules"
      @keyup.enter="scope.set"
    />
  </q-popup-edit>
  <q-icon
    v-if="!(col.isFieldEditableByRules ?? false ? col.isFieldEditableByRules(rowData.row) : false)"
    class="edit__icon"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
      viewBox="0 0 24 24"
      width="24px"
      fill="#000000"
    >
      <path
        d="M0 0h24v24H0V0z"
        fill="none"
      />
      <path
        d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"
      />
    </svg>
  </q-icon>
</template>
<script setup lang="ts">

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

</script>
