import type { PropType } from 'vue';
import { defineComponent, onMounted, onBeforeMount, ref, toRef, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useQuasar } from 'quasar'
import type { IColGridTable, IImgGallery, ISpecialField } from 'model'
import { CMyChipList } from '../CMyChipList'
import { CDate } from '../CDate'
import { CDateTime } from '../CDateTime'
import { CLabel } from '../CLabel'
import { CMyToggleList } from '../CMyToggleList'
import { CMySelect } from '../CMySelect'
import { CCurrencyValue } from '../CCurrencyValue'
import { CMapEditAddressByCoord } from '../CMapEditAddressByCoord'
import { CInput } from '../CInput'
import { CMyEditor } from '../CMyEditor'
import { CMyEditorAI } from '../CMyEditorAI'
import { CGallery } from '../CGallery'
import { CSelectImage } from '../CSelectImage'
import { CAccomodation } from '../CAccomodation'
import { tools } from '@tools'
import { costanti } from '@costanti'


// @ts-ignore
// import VueTelInput from 'vue3-tel-input'
// import 'vue3-tel-input/dist/vue3-tel-input.css'

import { fieldsTable } from '@store/Modules/fieldsTable'
import MixinBase from '@src/mixins/mixin-base'
import MixinUsers from '@src/mixins/mixin-users'
import { toolsext } from '@store/Modules/toolsext'
import { shared_consts } from '@src/common/shared_vuejs'
import { useRouter } from 'vue-router'


export default defineComponent({
  name: 'CMyPopupEdit',
  emits: ['showandsave', 'update:row', 'show', 'save', 'annulla', 'update_col'],
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    row: {
      type: Object,
      required: true,
    },
    rec: {
      type: Object,
      required: false,
      default: null,
    },
    fielddb: {
      type: Boolean,
      required: false,
      default: false,
    },
    dense: {
      type: Boolean,
      required: false,
      default: false,
    },
    justifycenter: {
      type: Boolean,
      required: false,
      default: true,
    },
    isrec: {
      type: Boolean,
      required: false,
      default: false,
    },
    mycol: {
      type: Object as PropType<IColGridTable | undefined | null>,
      required: false,
      default: undefined,
    },
    canEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
    insertMode: {
      type: Boolean,
      required: false,
      default: false,
    },
    canModify: {
      type: Boolean,
      required: false,
      default: false,
    },
    isInModif: {
      type: Boolean,
      required: false,
      default: false,
    },
    field: {
      type: String,
      required: false,
      default: '',
    },
    subfield: {
      type: String,
      required: false,
      default: '',
    },
    mysubsubkey: {
      type: String,
      required: false,
      default: '',
    },
    specialField: {
      type: Object as PropType<ISpecialField>,
      required: false,
      default: null,
    },
    serv: {
      type: Boolean,
      required: false,
      default: false,
    },
    indrec: {
      type: Number,
      required: false,
      default: -1,
    },
    type: {
      type: Number,
      required: false,
      default: 0,
    },
    showall: {
      type: Boolean,
      required: false,
      default: false,
    },
    view: {
      type: String,
      required: false,
      default: 'row',
    },
    disable: {
      type: Boolean,
      required: false,
      default: false,
    },
    visulabel: {
      type: Boolean,
      required: false,
      default: false,
    },
    jointable: {
      type: String,
      required: false,
      default: '',
    },
    filter: {
      type: [String, Function],
      required: false,
      default: null,
    },
    field_extra: {
      type: String,
      required: false,
      default: '',
    },
    value_extra: {
      type: [String, Number],
      required: false,
      default: '',
    },
    table: {
      type: String,
      required: false,
      default: '',
    },
    myimg: {
      type: String,
      required: false,
      default: '',
    },
    id: {
      type: [String, Number],
      required: false,
      default: '',
    },
    idmain: {
      type: String,
      required: false,
      default: '',
    },
    tablesel: {
      type: String,
      required: false,
      default: '',
    },
    pickup: {
      type: Boolean,
      required: false,
      default: false,
    },
    nosaveToDb: {
      type: Boolean,
      required: false,
      default: false,
    },
    notAllowAtChar: {
      type: Boolean,
      required: false,
      default: false,
    },
    path: {
      type: String,
      required: false,
      default: '',
    },
  },
  components: {
    CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery, CMyEditorAI,
    CCurrencyValue, CLabel, CAccomodation, CSelectImage, CMapEditAddressByCoord, CInput,
  },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

    const myvalue = ref(null as any)
    const myvalueprec = ref('false')
    const countryname = ref('')
    const visueditor = ref(false)
    const visuhtml = ref(false)
    const showeditor = ref(false)

    const myImgGall = ref([{}] as IImgGallery[])

    const $router = useRouter()

    const loaded = ref(false)

    const popupEditRef = ref(null)

    const addstrrequired = ref('')

    const col = ref(<IColGridTable>{
      name: 'test',
      fieldtype: 0,
      showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
      visible: true,
      maxlength: props.mycol ? props.mycol.maxlength : 0,
      minlength: props.mycol ? props.mycol.minlength : undefined
    })

    const copyToClipboard = (text) => {
      navigator.clipboard.writeText(text)
        .then(() => {
          $q.notify({
            message: 'Testo copiato negli appunti!',
            color: 'positive',
            icon: 'check',
            position: 'top'
          });
        })
        .catch(err => {
          console.error('Errore durante la copia:', err);
          $q.notify({
            message: 'Errore nella copia',
            color: 'negative',
            icon: 'error',
            position: 'top'
          });
        });
    };

    const { setValDb, getValDb } = MixinBase()
    const { getMyUsername } = MixinUsers()

    const myrealrow = toRef(props, 'row')

    watch(() => props.row, (newval, oldval) => {
      refresh()
    })

    watch(() => props.rec, (newval, oldval) => {
      refresh()
    }, { deep: true })

    const myrow = ref(<any>null)
    const mypath = ref('')

    /*     const myrow = computed(() => {
          return props.rec && props.isrec ? props.rec : props.row
        })
     */
    function crea() {
      // console.log('crea', isFieldDb(), 'props.mycol', props.mycol)

      if (props.mycol && props.mycol.name && props.mycol.name !== 'test') {
        col.value = { ...props.mycol }
      } else {
        if (col.value.name === 'test') {
          col.value.name = props.field
          if (props.subfield) {
            col.value.name += '.' + props.subfield
          }
        }
        col.value.jointable = props.jointable
        if (props.filter)
          col.value.filter = props.filter
        col.value.fieldtype = props.type

        if (props.type === costanti.FieldType.image) {
          myImgGall.value = [{
            _id: '',
            imagefile: myvalue.value,
            vers_img: 1,
            alt: 'img',
          }]
        } else if (props.type === costanti.FieldType.imgcard) {
          myImgGall.value = [myvalue.value]
        }

        // console.log('* col', col.value);
      }

      if (props.type) {
        col.value.fieldtype = props.type
      }

      if (props.isrec) {
      } else {
        if (isFieldDb()) {
          myvalue.value = getValDb(props.field, props.serv, '', props.table, props.subfield, props.id, props.idmain, props.indrec, props.mysubsubkey, props.specialField)
        } else {
          if (props.mycol && props.mycol.name)
            col.value = { ...props.mycol }
        }
      }

      addstrrequired.value = col.value.required ? '* ' : ''

      // console.log('popupedit myvalue.value: ', myvalue.value)

      if (props.tablesel) {
        // let obj = tools.getParamsByTable(props.table)
        // console.log('OBJ:', obj)
        if (true) {

          // console.log(' CAMPO', props.field + '.' + props.subfield)
          const myval = tools.getLabelFooterByRow(myrow.value, props.field + '.' + props.subfield, props.table)
          if (myval)
            myvalue.value = myval
          // console.log(' RECORD INPUT', myrow.value)
          // console.log(' VALORE OUTPUT: ', myvalue.value)
        }
      }

      if (props.path) {
        mypath.value = props.path
      } else {
        if (tools.existProp(col.value, 'path'))
          mypath.value = col.value.path ? col.value.path : ''
      }

      // console.log('CMyFieldDb crea', myvalue)
    }

    watch(() => props.id, (newval, oldval) => {
      crea()
    })


    function isFieldDb() {
      // return props.type !== 0
      return props.fielddb
    }

    function isviewfield() {
      return props.view === 'field'
    }

    function changeval(newval: any) {
      // console.log('changeval update:row', newval)
      if (!props.isrec) {
        emit('update:row', props.row)
      }
      if (props.isInModif)
        OpenEdit()
    }

    function getrealval(newval: any) {
      if (col.value.fieldtype === costanti.FieldType.hours) {
        newval = newval.value
      }
    }

    async function addNewValue(value: any) {
      // console.log('addNewValue', value, col.value)

      if (col.value.allowNewValue && col.value.jointable) {
        const myrec: any = {}

        const mylabel = fieldsTable.getLabelByTable(col.value.jointable)
        myrec[mylabel] = value

        if (col.value.filter_field && props.value_extra) {
          myrec[col.value.filter_field] = props.value_extra
        }

        // console.log('value_extra', props.value_extra)
        if (props.table) {
          return await globalStore.saveNewRecord(col.value.jointable, myrec)
        }
      }
      return null
    }

    function changeValRecCoordAddr(newval: any) {
      // console.log('changeValRecCoordAddr', newval, 'myrow', myrow.value[col.value.name])
      if (!myrow.value[col.value.name]) {
        myrow.value[col.value.name] = {}
      }
      if (newval.coordinates && newval.coordinates.lat) {
        newval.coordinates.lat = tools.convertToDecimal6(newval.coordinates.lat)
        newval.coordinates.lng = tools.convertToDecimal6(newval.coordinates.lng)
      }
      // console.log('newval...', newval)
      return changevalRecOrig(newval)
    }
    function changevalRec(newval: any) {
      return changevalRecOrig(newval, props.subfield)
    }

    function changevalRecOrig(newval: any, subcol: string = '') {
      // console.log('changevalRec', newval)
      // if (!props.insertMode || (props.insertMode && col.value.fieldtype !== costanti.FieldType.multioption)) {
      if (col.value && col.value.allowchar === costanti.ALLOWCHAR_CODE) {
        newval = tools.removespaces_slash(newval)
      }
      // console.log('popuppedit: changevalRec', newval, 'COLName', col.value.name)

      // console.log('row', props.row, 'col', props.mycol, 'newval', newval)
      // console.log('row[col.value.name]', props.row[col.value.name])
      if (props.type === costanti.FieldType.image) {
        // console.log('image', newval)
      }

      if (props.notAllowAtChar) {
        newval = tools.rimuoviAtPrimoCarattere(newval)
      }

      if (subcol) {
        const arrcol = col.value.name.split('.')
        if (arrcol.length > 0) {
          const primo = arrcol[0]
          let sec = null
          if (arrcol.length > 1)
            sec = arrcol[1]
          if (sec) {
            if (!myrow.value[primo]) {
              myrow.value[primo] = {}
            }
            myrow.value[primo][sec] = newval
          } else {
            myrow.value[primo] = newval
          }
          /*if (!myrow.value[col.value.name]) {
            myrow.value[col.value.name] = {}
          }
          myrow.value[col.value.name][subcol] = newval*/
          // console.log('myrow.value[col.value.name]', myrow.value[col.value.name])
        }
      } else {
        myrow.value[col.value.name] = newval
      }

      // console.log('changevalRec update:row', myrow.value)
      // emit('update:row', myrow.value)
      emit('update_col', col.value.name, newval)
      if (props.isInModif)
        OpenEdit()

      emit('save', newval)

      // }
    }

    function changevalRecHours(newval: any) {
      if (col.value.fieldtype === costanti.FieldType.hours) {
        newval = newval.value
      }
      changevalRec(newval)

      myvalue.value = newval
    }

    function updatedata() {
      mounted()
    }

    function mounted() {
      //console.log('mounted CMyPopupEdit')

      myrow.value = props.rec && props.isrec ? { ...props.rec } : { ...props.row }

      // console.log('myrow', myrow.value?.arrvariazioni?.[0])

      try {

        // console.log('mounted', 'isFieldDb()', myrow.value, 'sub', props.subfield, 'field', props.field)
        if (isFieldDb() && !props.isrec) {
          // console.log(' .  none...')
        } else {
          if (props.subfield !== '') {
            if (myrow.value[props.field] === undefined) {
              myrow.value[props.field] = {}
              myvalue.value = ''
            } else {
              myvalue.value = myrow.value[props.field][props.subfield]
            }
          } else {
            let miorecord = myrow.value
            if (props.table === 'arrvariazioni') {
              miorecord = myrow.value.arrvariazioni[0]
            }

            if (props.field !== '')
              myvalue.value = miorecord[props.field]
            else {
              // @ts-ignore
              myvalue.value = myrow.value
            }
          }
          // console.log('props.field', props.field, 'props.subfield', props.subfield, 'myvalue: ', myvalue)
        }

        if (props.type === costanti.FieldType.verifica && !myvalue.value) {
          myvalue.value = {
            esito: costanti.VALIDATO.NO,
            username: '',
            note: '',
          }
        }
      } catch (e) {

      }

      // console.log('popupedit: myvalue.value', myvalue.value)

      // console.log('myvalue.value', myvalue.value)
      myvalueprec.value = myvalue.value


      crea()

      if (!loaded.value) {

        if (col.value.fieldtype === costanti.FieldType.listimages) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = {
              title: 'Galleria',
              directory: 'none',
              list: []
            }
          }
        } else if (col.value.fieldtype === costanti.FieldType.listobj) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = [{
              type: 0,  // Letto matrimoniale / letto singolo / divano-letto / almaca / a terra sul tappeto (per sacco a pelo)
              location: 0,  // in camera privata / in camera condivisa / in soggiorno / in camper / in tenda / in giardino / all'aperto
              num: 0,
            }]
          }
        } else if (col.value.fieldtype === costanti.FieldType.coordinates) {
          if (myvalue.value === '' || myvalue.value === undefined) {
            // console.log('set default myvalue.value ')
            myvalue.value = {
              address: '',
              coordinates: [0, 0]
            }
          }
          if (!myvalue.value.address) {
            myvalue.value.address = ''
          }
          if (!myvalue.value.coordinates) {
            myvalue.value.coordinates = [0, 0]
          }
        }
      }

      loaded.value = true

      // console.log('myvalueprec', myvalueprec)
    }

    function refresh() {
      mounted()
    }


    function OpenEdit() {
      // console.log('OpenEdit')
      emit('show')
    }

    function OpenEditDateToday() {
      // console.log('OpenEdit')
      myvalue.value = new Date()
      emit('show')
    }

    /*function getval() {
      let myval: any = 'false'

      if ((props.subfield !== '') && (props.subfield !== '')) {
        if (myrow.value[props.field] === undefined) {
          myrow.value[props.field] = {}
          myval = ''
        } else {
          myval = myrow.value[props.field][props.subfield]
        }
      } else {
        if (props.field !== '')
          myval = myrow.value[props.field]
        else
          myval = myrow.value
      }

      return myval
    }*/

    async function SaveValueInt(newVal: any, valinitial: any) {

      console.log('SaveValueInt', newVal, valinitial)

      if (col.value.fieldtype === costanti.FieldType.verifica) {
        newVal.username = userStore.my.username
        newVal.data = tools.getDateNow()
      }

      if (props.tablesel) {
        if (true) {

          const mystrcol = '_id'
          const mycol = fieldsTable.getColByTable(props.tablesel, mystrcol);

          if (mycol) {
            if (newVal)
              newVal = newVal[mystrcol]
          }
        }
      }

      if (props.notAllowAtChar) {
        newVal = tools.rimuoviAtPrimoCarattere(newVal)
        myvalue.value = newVal
      }

      console.log('newVal', newVal)

      if (isFieldDb()) {
        await savefield(newVal, valinitial, $q)
      } else {
        // Update value in table memory
        if (props.subfield !== '') {
          if (myrow.value[props.field] === undefined)
            myrow.value[props.field] = {}
          myrow.value[props.field][props.subfield] = newVal
        } else {
          if (props.field !== '')
            myrow.value[props.field] = newVal
          else {
            if (!props.isrec) {
              // @ts-ignore
              myrealrow.value = newVal
            }

          }
        }
      }

      console.log('SaveValueInt', newVal, valinitial)

      emit('save', newVal, valinitial)
    }


    async function savefield(value: any, initialval: any, myq: any) {
      if (!props.insertMode) {
        myvalue.value = value
        return tools.saveInDBForTypes(myq, props.field, myvalue.value, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
      }
    }


    function annulla(val: any) {
      emit('annulla', true)
    }

    function savefieldboolean(value: any) {
      if (myvalue.value === undefined)
        myvalue.value = 'true'
      else
        myvalue.value = value

      tools.saveInDBForTypes($q, props.field, myvalue, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
    }


    function Savedb(newVal: any, valinitial: any) {
      // console.log('Savedb', newVal)

      if (col.value.fieldtype === costanti.FieldType.boolean) {
        // console.log('myvalue', myvalue, newVal, myvalueprec)
        if (myvalueprec.value === undefined) {
          newVal = true
          myvalueprec.value = myvalue.value
          myvalue.value = newVal

        }
        // console.log('DOPO myvalue', myvalue, newVal, myvalueprec)
      }

      console.log('Savedb:   type', col.value.fieldtype)

      if (col.value.fieldtype === costanti.FieldType.image) {
        console.log('newVal.imagefile', newVal)
        myvalue.value = tools.getImgFileToSaveByFilename(newVal)
      } else if (col.value.fieldtype === costanti.FieldType.imgcard) {
        console.log('newVal.imagefile', newVal)
        myvalue.value = newVal
      } else if (col.value.fieldtype === costanti.FieldType.image_and_filename) {
        newVal = tools.getDirUpload() + mypath.value + newVal
        console.log('newVal.imagefile', newVal)
        myvalue.value = newVal
      }

      if (col.value.fieldtype === costanti.FieldType.listobj) {
        myvalue.value.accomodation = newVal
      }

      // console.log('Savedb', newVal)

      emit('showandsave', props.row, props.mycol, newVal, valinitial)
      visueditor.value = false
    }

    function visuValByType(val: any, col: IColGridTable, row: any) {
      if (col === undefined || row === undefined)
        return

      // let val = ''
      // if (col.subfield !== '') {
      //   if (row[col.field] === undefined)
      //     row[col.field] = {}
      //
      //   val = row[col.field][col.subfield]
      // } else {
      //   val = row[col.field]
      // }
      //
      if (col.fieldtype === costanti.FieldType.date) {
        if (val === undefined) {
          return '[]'
        } else {
          return tools.getstrDateTime(val)
        }
      } else if (col.fieldtype === costanti.FieldType.onlydate) {
        if (val === undefined) {
          return '[]'
        } else {
          return tools.getstrDate(val)
        }
      } else if (col.fieldtype === costanti.FieldType.boolean) {
        return (val) ? t('dialog.yes') : t('dialog.no')
      } else if (col.fieldtype === costanti.FieldType.binary) {
        if (val === undefined)
          return '[---]'
        else
          return globalStore.getArrStrByValueBinary(col, val)
      } else if ((col.fieldtype === costanti.FieldType.select) || (col.fieldtype === costanti.FieldType.option)) {
        if (val === undefined)
          return '[---]'
        else
          return globalStore.getValueByTable(col, val)
      } else if ((col.fieldtype === costanti.FieldType.nationality) || (col.fieldtype === costanti.FieldType.select_by_server) || (col.fieldtype === costanti.FieldType.multiselect_by_server)) {
        if (!val)
          return '[---]'
        else
          return val
      } else if (col.fieldtype === costanti.FieldType.intcode) {
        if (!val)
          return '[---]'
        else
          return val
      } else if (col.fieldtype === costanti.FieldType.multiselect) {
        if (val === undefined)
          return '[---]'
        else
          return globalStore.getMultiValueByTable(col, val)
      } else if (col.fieldtype === costanti.FieldType.multioption) {
        if (val === undefined)
          return '[---]'
        else
          return globalStore.getMultiValueByTable(col, val)
      } else if (col.fieldtype === costanti.FieldType.password) {
        if (val === undefined)
          return '[---]'
        else
          return '***************'
      } else {
        if (val === undefined || val === null) {
          if (props.canEdit)
            return ' <span class="text-grey">(' + t('reg.select') + ')</span> '
          else
            return ''
        } else if (val === '') {
          if (props.canEdit)
            return ' <span class="text-grey">(' + t('reg.select') + ')</span> '
          else
            return ''
        } else {
          let mystr = ''
          let mylink = ''

          if (col.link)
            mylink = col.link.replace(col.name, val)
          if (col.tipovisu === costanti.TipoVisu.LINK && col.link) {
            return "<a href='" + mylink + "'>" + val + '</a>'
          } else if (col.tipovisu === costanti.TipoVisu.BUTTON && col.link) {
            return ''
          }


          if (props.showall) {
            return val
          } else {
            mystr = tools.firstchars(val, tools.MAX_CHARACTERS)
          }
          if (val) {
            if (val.length > tools.MAX_CHARACTERS)
              mystr += '...'
          } else {
            return val
          }
          return mystr
        }
      }
    }

    function getclassCol(mycol: any) {
      if (mycol) {
        let myclstr = (mycol.disable || isviewfield()) ? '' : (props.canEdit ? 'colmodif' : '')
        myclstr += ((mycol.fieldtype === costanti.FieldType.date) || (mycol.fieldtype === costanti.FieldType.onlydate)) ? ' coldate flex flex-container' : ''

        return myclstr
      } else {
        return ''
      }
    }

    function mycl() {
      if (props.disable) {
        return 'cldisable'
      }
    }

    function selectcountry({ name, iso2, dialCode }: { name: string, iso2: string, dialCode: string }) {
      // console.log(name, iso2, dialCode)
      myvalueprec.value = myvalue.value
      myvalue.value = iso2
      countryname.value = name
    }

    function intcode_change(coderec: any) {
      myvalueprec.value = myvalue.value
      myvalue.value = '+' + coderec.dialCode
    }

    function onInput(phone: any, phoneObject: any, input: any) {
      if (phoneObject?.formatted) {
        myvalue.value = phoneObject.formatted
      }
    }


    function uploaded(info: any) {

      if (info.files) {
        if (info.files[0].name.imagefile) {
          myvalue.value = tools.geturlrelativeprofile() + '/' + getMyUsername() + '/' + info.files[0].name.imagefile
        } else {
          myvalue.value = tools.geturlrelativeprofile() + '/' + getMyUsername() + '/' + info.files[0].name
        }

        console.log('uploaded', myvalue.value)
        savefield(myvalue.value, '', $q)
      }
      // info.files[0].name
    }


    function removephoto() {
      myvalue.value = ''
      SaveValueInt(myvalue.value, '')
    }

    function noPopupeditByCol(mycol: IColGridTable) {
      return (mycol.fieldtype !== costanti.FieldType.html
        && mycol.fieldtype !== costanti.FieldType.image
        && mycol.fieldtype !== costanti.FieldType.imgcard
        && mycol.fieldtype !== costanti.FieldType.listimages
        && mycol.fieldtype !== costanti.FieldType.listobj
        && mycol.fieldtype !== costanti.FieldType.number
      )
    }

    function getTitleEditor(col: IColGridTable, row: any) {

      let title = ''
      if (col.field_extra1) {
        try {
          title = tools.getValue(row, col.field_extra1, col.subfield_extra1)
        } catch (e) {
        }
      }

      return title

    }

    function gotoPage(link: string) {
      $router.push(link)
    }

    function nameKeydown(e: any, col: any) {
      if (col.allowchar === costanti.ALLOWCHAR_CODE) {

        if (/^\W$/.test(e.key)) {
          e.preventDefault();
        }
      }
    }

    function handleCancel() {
      // Gestisci la chiusura del q-popup-edit
      console.log("Chiusura di q-popup-edit");
    }
    function handleKeydown(event) {
      // Interrompi la propagazione del tasto ESC
      if (event.key === "Escape") {
        event.stopPropagation();
        console.log("Tasto ESC intercettato e bloccato");

        popupEditRef.value.hide();
      }
    }

    function updateValidazione(esito: any) {
      myvalue.value.esito = esito
      myvalue.value.data = tools.getDateNow()
      myvalue.value.username = userStore.my.username
      changevalRec(myvalue.value)
      Savedb(myvalue.value, '')
    }


    onBeforeMount(mounted)


    return {
      myvalue,
      countryname,
      visueditor,
      visuhtml,
      showeditor,
      isviewfield,
      changeval,
      changevalRec,
      addNewValue,
      changevalRecHours,
      updatedata,
      OpenEdit,
      OpenEditDateToday,
      SaveValueInt,
      annulla,
      Savedb,
      visuValByType,
      getclassCol,
      selectcountry,
      intcode_change,
      tools,
      costanti,
      fieldsTable,
      onInput,
      globalStore,
      userStore,
      removephoto,
      isFieldDb,
      col,
      myImgGall,
      noPopupeditByCol,
      getTitleEditor,
      myrow,
      shared_consts,
      nameKeydown,
      gotoPage,
      mypath,
      changeValRecCoordAddr,
      addstrrequired,
      t,
      handleKeydown,
      handleCancel,
      popupEditRef,
      copyToClipboard,
      updateValidazione,
    }
  }
})

