import type { PropType} from 'vue';
import { defineComponent, onMounted, ref, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { useGlobalStore } from '@store/globalStore'
import { fieldsTable } from '@store/Modules/fieldsTable'
import { tools } from '@tools'
import { costanti } from '@costanti'
import { CMyPopupEdit } from '@src/components/CMyPopupEdit'
import type { ISpecialField } from 'model';
import { IColGridTable } from 'model'
import MixinBase from '@src/mixins/mixin-base'


export default defineComponent({
  name: 'CMyFieldRec',
  emits: ['save', 'update:rec', 'update_col'],
  props: {
    table: {
      type: String,
      required: true,
    },
    tablesel: {
      type: String,
      required: false,
      default: '',
    },
    title: {
      type: String,
      required: false,
      default: '',
    },
    rec: {
      type: Object,
      required: true,
    },
    field: {
      type: String,
      required: false,
      default: '',
    },
    specialField: {
      type: Object as PropType<ISpecialField>,
      required: false,
      default: null,
    },
    myimg: {
      type: String,
      required: false,
      default: '',
    },
    canModify: {
      type: Boolean,
      required: false,
      default: true,
    },
    canEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
    disable: {
      type: Boolean,
      required: false,
      default: false,
    },
    id: {
      type: [String, Number],
      required: false,
      default: '',
    },
    idmain: {
      type: String,
      required: false,
      default: '',
    },
    indrec: {
      type: Number,
      required: false,
      default: -1,
    },
    filter_table: {
      type: String,
      required: false,
      default: ''
    },
    filter_field: {
      type: String,
      required: false,
      default: ''
    },
    sameclassasfielddb: {
      tupe: Boolean,
      required: false,
      default: false,
    },
    fieldtype: {
      tupe: String,
      required: false,
      default: '',
    },
    path: {
      tupe: String,
      required: false,
      default: '',
    },
    nosaveToDb: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  components: { CMyPopupEdit },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const globalStore = useGlobalStore()

    const mytitle = ref('')
    const col = ref(<any>{})
    const keytab = ref(<any>'')
    const optlab = ref('')

    const pickup = ref(false)
    const jointable = ref('')
    const recordCol = ref(<any>{})

    const myrec = ref(<any>{})

    const mykey = ref('')
    const mysubkey = ref('')
    const mysubsubkey = ref('')

    const { setValDb, getValDb } = MixinBase()

    watch(() => myrec.value, (value, oldval) => {
      emit('update:rec', myrec.value)
      return true
    }
    )

    watch(() => props.rec, (value, oldval) => {
      myrec.value = props.rec
    }
    )

    function mounted() {
      myrec.value = props.rec
      mytitle.value = props.title
      keytab.value = fieldsTable.getKeyByTable(props.table)
      optlab.value = fieldsTable.getLabelByTable(props.table)
      // recordCol.value = fieldsTable.getrecTableList(props.table)
      let columns = fieldsTable.getArrColsByTable(props.table)

      // console.log('table', props.table, 'LAB', optlab.value, 'COL', columns)

      if (columns) {
        col.value = columns.find((col: any) => col.name === props.field)
      } else {
        col.value = fieldsTable.getColByTable(props.table, props.field)
      }

      if (col.value) {
        jointable.value = col.value.jointable!
      }

      const arrk = props.field.split('.')
      if (arrk) {
        mykey.value = props.field
        if (arrk.length >= 0)
          mykey.value = arrk[0]
        if (arrk.length > 1)
          mysubkey.value = arrk[1]

        if (arrk.length > 2)
          mysubsubkey.value = arrk[2]
      }
      // console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value, 'mysubkey', mysubkey.value)

    }


    function showandsave(row: any, col: any, newval: any, valinitial: any) {
      console.log('showandsave CMyFieldDb', row, col, newval)
      emit('save', props.rec, newval, col)

      if (props.nosaveToDb)
        return

      if (newval !== valinitial) {
        if (props.id) {
          tools.saveInDBForTypes($q, mykey.value, newval, props.fieldtype || col.fieldtype, false, props.table, mysubkey.value, props.id, props.indrec, mysubsubkey.value, props.specialField)
        } else {

        }
      }

    }

    function withBorder() {
      return col.value.fieldtype !== costanti.FieldType.onlydate && col.value.fieldtype !== costanti.FieldType.date
    }

    function getValue() {
      let myvalue = ''

      if (mysubkey.value !== '') {
        if (props.rec[mykey.value] === undefined) {
          myvalue = ''
        } else {
          myvalue = props.rec[mykey.value][mysubkey.value]
        }
      } else {
        if (mykey.value !== '') {
          myvalue = props.rec[mykey.value]
        }
      }

      if (Array.isArray(myvalue)) {
        if (myvalue.length === 0)
          return null
      }
      return myvalue
    }

    function getclass() {
      if (props.sameclassasfielddb) {
        return 'q-ma-sm q-pa-sm col-grow popupedit'
      }
    }

    function visuElem() {

      if (col.value) {
        return !!col.value.name && (props.canEdit || (!props.canEdit && getValue()))
      } else {
        return false
      }
    }

    function update_col(name: string, val: any) {
      // console.log('update_col', name, val)
      myrec.value[name] = val

      emit('update_col', name, val)
    }

    onMounted(mounted)

    return {
      tools,
      withBorder,
      costanti,
      fieldsTable,
      globalStore,
      mytitle,
      col,
      keytab,
      optlab,
      recordCol,
      pickup,
      jointable,
      showandsave,
      mykey,
      mysubkey,
      mysubsubkey,
      visuElem,
      getclass,
      myrec,
      update_col,
      getValue,
    }
  },
})

