<template>
  <v-row no-gutters v-if="form.length">
    <v-col
      v-for="(el, index) in form"
      :class="`${el.class ? el.class : ''} ${
        el.padding && el.padding == 'false' ? '' : 'pa-3'
      }`"
      :cols="el.xs"
      :sm="el.sm"
      :md="el.md"
      :lg="el.lg"
      :xl="el.xl"
      :key="el.key ? el.key : el.field"
    >
      <v-tooltip top>
        <template v-slot:activator="{ on }">
          <v-select
            :name="Math.random()"
            v-if="el.type === 'SELECT'"
            v-on="on"
            autocomplete="new-password"
            :prepend-icon="el['prepend-icon-mdi']"
            :clearable="el.hasOwnProperty('clearable') ? el.clearable : true"
            :multiple="el.multiple"
            :item-text="el.mapFunction ? el.mapFunction : el['item-text']"
            :item-value="el['item-value'] || el"
            :label="el.name"
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :disabled="el.disabled"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            @blur="
              el.events && el.events.blur
                ? el.events.blur($event)
                : () => {
                    return false;
                  }
            "
            :items="el.notTranslateItems ? el.items : itemsTranslated(el)"
            :rules="required(el.required)"
            :validate-on-blur="true"
            :no-data-text="$t('data_no_availables')"
            hide-details
          >
            <template v-if="el.limitItems" v-slot:selection="{ item, index }">
              <v-chip v-if="index + 1 <= el.maxItemsToShow">
                <span>{{ item }}</span>
              </v-chip>
              <span
                v-if="index + 1 > el.maxItemsToShow"
                class="grey--text text-caption"
              >
                (+{{ value.length - 1 }} {{ $t("others") }})
              </span>
            </template>
            <v-list-item
              v-if="el.prependItem"
              slot="prepend-item"
              ripple
              @click.stop="el.prependItemAction"
            >
              <v-list-item-action>
                <v-icon>{{ el.prependItemIcon }}</v-icon>
              </v-list-item-action>
              <v-list-item-title>{{ el.prependItemText }}</v-list-item-title>
            </v-list-item>
            <template slot="prepend">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-select>
          <v-autocomplete
            v-if="el.type === 'AUTOCOMPLETE'"
            v-on="on"
            :name="Math.random()"
            :prepend-icon="el['prepend-icon-mdi']"
            :auto-select-first="el.items && el.items.length == 1"
            autocomplete="new-password"
            :clearable="el.hasOwnProperty('clearable') ? el.clearable : true"
            :multiple="el.multiple"
            :item-text="el.mapFunction ? el.mapFunction : el['item-text']"
            :item-value="el['item-value']"
            :label="el.name"
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :disabled="el.disabled"
            :readonly="el.readOnly"
            :items="el.notTranslateItems ? el.items : itemsTranslated(el)"
            :return-object="!!el['return-object']"
            :rules="required(el.required)"
            :validate-on-blur="true"
            :no-data-text="$t('data_no_available')"
            hide-details
            :chips="el.chips"
            :deletable-chips="el.deletableChips"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            @blur="
              el.events && el.events.blur
                ? el.events.blur($event)
                : () => {
                    return false;
                  }
            "
            @focus="
              el.events && el.events.focus
                ? el.events.focus($event)
                : () => {
                    return false;
                  }
            "
          >
            <template
              v-if="el.fixedSelection || el.limitItems || el.chipIcon"
              v-slot:selection="{ item, index }"
            >
              <v-chip
                v-if="el.chipIcon"
                :close="el.deletableChips"
                @click:close="removeItem(item, el)"
              >
                <v-avatar left>
                  <v-btn color="primary">
                    <font-awesome-icon
                      class="fa-sm"
                      :icon="['fas', item[el.chipIcon]]"
                    ></font-awesome-icon>
                  </v-btn>
                </v-avatar>
                {{ $t(item[el["item-text"]]) }}
              </v-chip>
              <span v-if="el.fieldIndex">
                {{
                  el.fieldIndex >= 0
                    ? obj[el.field][el.fieldIndex]
                    : obj[el.field].join(",")
                }}
              </span>

              <template v-else>
                <v-chip
                  v-if="index + 1 <= el.maxItemsToShow"
                  :color="item.COLOR"
                  dark
                >
                  <span v-if="typeof el['item-text'] == 'function'">{{
                    el["item-text"](item)
                  }}</span>
                  <span v-else>
                    {{ item[el["item-text"]] }}
                  </span>
                </v-chip>
                <span
                  v-if="index + 1 == el.maxItemsToShow + 1"
                  class="grey--text text-caption"
                >
                  (+{{
                    el.fieldIndex >= 0
                      ? obj[el.field][el.fieldIndex].length - el.maxItemsToShow
                      : obj[el.field].length - el.maxItemsToShow
                  }}
                  )
                </span>
              </template>
            </template>

            <template v-if="el.colorItems" v-slot:item="data">
              <v-list-item-avatar>
                <v-chip
                  disabled
                  small
                  v-if="
                    (data.item.COLOR && data.item.COLOR.length) ||
                    (data.item.ICONO && data.item.ICONO.length)
                  "
                  :color="data.item.COLOR"
                >
                  <font-awesome-icon
                    v-if="data.item.ICONO"
                    class="fa-lg primary--text"
                    :icon="['fas', data.item.ICONO]"
                  ></font-awesome-icon>
                </v-chip>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title
                  v-if="typeof el['item-text'] == 'function'"
                  >{{ el["item-text"](data.item) }}</v-list-item-title
                >
                <v-list-item-title v-else>
                  {{ data.item[el["item-text"]] }}
                </v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-if="el.prependItem"
              slot="prepend-item"
              ripple
              @click.stop="el.prependItemAction"
            >
              <v-list-item-action>
                <v-icon>{{ el.prependItemIcon }}</v-icon>
              </v-list-item-action>
              <v-list-item-title>{{ el.prependItemText }}</v-list-item-title>
            </v-list-item>
            <template slot="prepend">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-autocomplete>
          <v-combobox
            v-if="el.type === 'COMBOBOX'"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            :prepend-icon="el['prepend-icon-mdi']"
            :clearable="el.hasOwnProperty('clearable') ? el.clearable : true"
            :multiple="el.multiple"
            :item-text="el.mapFunction ? el.mapFunction : el['item-text']"
            :item-value="el['item-value']"
            :label="el.name"
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :disabled="el.disabled"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            :ref="el.ref"
            :items="el.notTranslateItems ? el.items : itemsTranslated(el)"
            :return-object="!!el['return-object']"
            :rules="required(el.required)"
            :validate-on-blur="true"
            :no-data-text="$t('data_no_available')"
            hide-details
            :chips="el.chips"
            :deletable-chips="el.deletableChips"
          >
            <template v-if="el.limitItems" v-slot:selection="{ item, index }">
              <v-chip v-if="index + 1 <= el.maxItemsToShow">
                <span>{{ item }}</span>
              </v-chip>
              <span
                v-if="index + 1 > el.maxItemsToShow"
                class="grey--text text-caption"
              >
                (+{{ value.length - 1 }} {{ $t("others") }})
              </span>
            </template>
            <v-list-item
              v-if="el.prependItem"
              slot="prepend-item"
              ripple
              @click.stop="el.prependItemAction"
            >
              <v-list-item-action>
                <v-icon>{{ el.prependItemIcon }}</v-icon>
              </v-list-item-action>
              <v-list-item-title>{{ el.prependItemText }}</v-list-item-title>
            </v-list-item>
            <template slot="prepend">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-combobox>
          <v-radio-group
            v-if="el.type === 'RADIO'"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            v-model="obj[el.field]"
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :label="el.name"
            hide-details
          >
            <v-radio
              v-for="item in el.items"
              :key="item"
              :value="item"
              :label="item"
            ></v-radio>
          </v-radio-group>
          <v-text-field
            v-if="['STRING', 'INTEGER', 'PASSWORD'].includes(el.type)"
            :solo="el.textFieldType == 'SOLO'"
            :filled="el.textFieldType == 'FILLED'"
            :outlined="el.textFieldType == 'OUTLINED'"
            :min="el.min"
            :max="el.max"
            :maxlength="el.maxLength"
            :prefix="el.prefix"
            :suffix="el.suffix"
            :counter="el.counter"
            :prepend-icon="el['prepend-icon-mdi']"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            :type="typeField(el.type)"
            :label="el.name"
            :ref="el.field"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            @blur="
              el.events && el.events.blur
                ? el.events.blur($event)
                : () => {
                    return false;
                  }
            "
            @focus="
              el.events && el.events.focus
                ? el.events.focus($event)
                : () => {
                    return false;
                  }
            "
            @keydown="
              el.events && el.events.keydown
                ? el.events.keydown($event)
                : () => {
                    return false;
                  }
            "
            :rules="required(el.required)"
            :validate-on-blur="true"
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :mask="el.mask"
            :disabled="el.disabled"
            :readonly="el.readOnly"
            :hide-details="el.hideDetails == null || el.hideDetails"
          >
            <template slot="prepend">
              <font-awesome-icon
                @click="
                  el.events['click-prepend']
                    ? el.events['click-prepend']($event)
                    : () => {
                        return false;
                      }
                "
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                @click="
                  el.events['click-append']
                    ? el.events['click-append']($event)
                    : () => {
                        return false;
                      }
                "
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-text-field>
          <v-textarea
            v-if="el.type === 'TEXTAREA'"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            :type="typeField(el.type)"
            :label="el.name"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            @blur="
              el.events && el.events.blur
                ? el.events.blur($event)
                : () => {
                    return false;
                  }
            "
            :rules="required(el.required)"
            :validate-on-blur="true"
            @click:append="
              el.events['click-append']
                ? el.events['click-append']($event)
                : () => {
                    return false;
                  }
            "
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :disabled="el.disabled"
            :hide-details="el.hideDetails == null || el.hideDetails"
            :rows="el.rows ? el.rows : 5"
            :readonly="el.readOnly"
            :counter="el.counter"
            :maxlength="el.maxLength"
            :prepend-icon="el['prepend-icon-mdi']"
          >
            <template slot="prepend">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-textarea>
          <v-switch
            v-if="el.type === 'BOOLEAN'"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            :label="el.name"
            :true-value="el.trueValue ? el.trueValue : '1'"
            :false-value="el.falseValue ? el.falseValue : '0'"
            :color="el.color || 'primary'"
            @input="
              el.events && el.events.input
                ? el.events.input($event)
                : () => {
                    return false;
                  }
            "
            @change="
              el.events && el.events.input
                ? el.events.input($event)
                : el.events && el.events.change
                ? el.events.change($event)
                : () => {
                    return false;
                  }
            "
            :value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            :input-value="
              el.fieldIndex >= 0 ? obj[el.field][el.fieldIndex] : obj[el.field]
            "
            hide-details
            :disabled="el.disabled"
            :prepend-icon="el['prepend-icon-mdi']"
          >
            <template slot="prepend">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['prepend-icon'] && el['prepend-icon'].length"
                :icon="['fas', el['prepend-icon']]"
              ></font-awesome-icon>
            </template>
            <template slot="append">
              <font-awesome-icon
                class="fa-lg"
                v-if="el['append-icon'] && el['append-icon'].length"
                :icon="['fas', el['append-icon']]"
              ></font-awesome-icon>
            </template>
            <template v-slot:label v-if="isRequired(el.required)">
              {{ el.name }}
              <span class="error--text"><strong>(*)</strong></span>
            </template>
          </v-switch>
          <datetimePicker
            v-if="el.type === 'DATETIME'"
            v-on="on"
            :name="Math.random()"
            autocomplete="new-password"
            ref="datetime"
            :isRequired="isRequired(el.required)"
            :disabled="el.disabled"
            :isEventItem="false"
            :label="el.name"
            :icon="el.icon"
            :minDateTime="el.minDateTime"
            :showPrependIcon="el.showPrependIcon"
            :date_value="
              !!obj[el.field] && obj[el.field] !== ''
                ? formatDate(obj[el.field])[0]
                : ''
            "
            :time_value="
              !!obj[el.field] && obj[el.field] !== ''
                ? formatDate(obj[el.field])[1]
                : ''
            "
            @changeDateTime="
              el.events && el.events.changeDateTime
                ? el.events.changeDateTime($event)
                : () => {
                    return false;
                  }
            "
          />
          <v-menu
            v-if="el.type === 'DATE'"
            v-on="on"
            :close-on-content-click="el.closeContentOnClick"
            transition="scale-transition"
            offset-y
            :nudge-right="40"
            max-width="290px"
            min-width="290px"
            :ref="`menu_date_${index}`"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-on="on"
                :name="Math.random()"
                hide-details
                :label="el.name"
                :value="
                  getDateToShow(
                    el.fieldIndex >= 0
                      ? obj[el.field][el.fieldIndex]
                      : obj[el.field]
                  )
                "
                :solo="el.textFieldType == 'SOLO'"
                :filled="el.textFieldType == 'FILLED'"
                :outlined="el.textFieldType == 'OUTLINED'"
                readonly
                :clearable="el.clearable"
                @click:clear="
                  el.events && el.events.clear
                    ? el.events.clear()
                    : el.events.input(null)
                "
              >
                <template v-slot:label v-if="isRequired(el.required)">
                  {{ el.name }}
                  <span class="error--text"><strong>(*)</strong></span>
                </template>
              </v-text-field>
            </template>
            <v-date-picker
              first-day-of-week="1"
              :locale="$store.getters.getDocksAssignmentUser.Language == 1 ? 'es-ES' : 'en-EN'"
              :name="Math.random()"
              :value="el.dateValue"
              :range="el.range"
              @input="
                el.events && el.events.input
                  ? el.events.input(
                      el.range
                        ? $event.sort((a, b) => new Date(a) - new Date(b))
                        : $event
                    )
                  : () => {
                      return false;
                    };
                !el.range
                  ? $refs[`menu_date_${index}`][0].save()
                  : () => {
                      return false;
                    };
              "
              no-title
              scrollable
            ></v-date-picker>
          </v-menu>
          <v-menu
            v-if="el.type === 'TIME'"
            v-on="on"
            transition="scale-transition"
            offset-y
            :nudge-right="40"
            max-width="290px"
            min-width="290px"
            :close-on-content-click="false"
            :ref="`menu_time_${index}`"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-on="on"
                :name="Math.random()"
                hide-details
                :label="el.name"
                :solo="el.textFieldType == 'SOLO'"
                :filled="el.textFieldType == 'FILLED'"
                :outlined="el.textFieldType == 'OUTLINED'"
                :value="
                  el.fieldIndex >= 0
                    ? obj[el.field][el.fieldIndex]
                    : obj[el.field]
                "
                readonly
                clearable
                :ref="el.ref"
                :rules="el.rules ? el.rules : required(el.required)"
                @click:clear="
                  el.events && el.events.clear
                    ? el.events.clear()
                    : el.events.input(null)
                "
              >
                <template v-slot:label v-if="isRequired(el.required)">
                  {{ el.name }}
                  <span class="error--text"><strong>(*)</strong></span>
                </template>
              </v-text-field>
            </template>
            <v-time-picker
              :name="Math.random()"
              :min="el.minTime"
              :max="el.maxTime"
              :value="
                el.fieldIndex >= 0
                  ? obj[el.field][el.fieldIndex]
                  : obj[el.field]
              "
              @change="
                el.events && el.events.input
                  ? el.events.input($event)
                  : () => {
                      return false;
                    };
                $refs[`menu_time_${index}`][0].save();
              "
              scrollable
              format="24hr"
            ></v-time-picker>
          </v-menu>
          <template v-if="el.type === 'SLIDER'">
            <v-card flat color="transparent">
              <v-subheader class="px-0 pb-4">{{ el.name }}</v-subheader>
              <v-card-text class="px-0 pb-0">
                <v-slider
                  :name="Math.random()"
                  :disabled="el.disabled"
                  @change="
                    el.events && el.events.input
                      ? el.events.input($event)
                      : () => {
                          return false;
                        }
                  "
                  :min="el.min"
                  :max="el.max"
                  :step="el.step ? el.step : 1"
                  :value="
                    el.fieldIndex >= 0
                      ? parseFloat(obj[el.field][el.fieldIndex]) > el.min
                        ? obj[el.field][el.fieldIndex]
                        : el.min
                      : obj[el.field]
                  "
                  color="primary"
                  thumb-color="secondary secondary--text"
                  thumb-label="always"
                  hide-details
                  :key="el.key ? `${el.key}_slider` : `${el.field}_slider`"
                >
                  <template v-slot:thumb-label="{ value }">
                    <span class="tertiary--text">{{
                      parseFloat(value).toLocaleString("es-ES")
                    }}</span>
                  </template>
                </v-slider>
              </v-card-text>
            </v-card>
          </template>
          <template v-if="el.type === 'MAP'">
            <v-card flat color="transparent">
              <v-subheader class="px-0">{{ el.name }}</v-subheader>
              <v-card-text class="px-0 pb-0">
                <v-btn
                  color="primary"
                  @click="
                    openMap(obj[el.field].LATITUD, obj[el.field].LONGITUD)
                  "
                  :disabled="el.disabled"
                  >{{ $t("select_position") }}</v-btn
                >
                <modal
                  v-if="dialogMapPosition"
                  :showModal="dialogMapPosition"
                  :title="$t('select_position')"
                  :fullscreen="true"
                  @closeModal="
                    dialogMapPosition = false;
                    obj[el.field].LATITUD = tempMapClickPosition.LATITUD;
                    obj[el.field].LONGITUD = tempMapClickPosition.LONGITUD;
                  "
                  @ok="
                    el.events && el.events.input
                      ? mapOk(el)
                      : () => {
                          return false;
                        }
                  "
                >
                  <div class="marco">
                    <mapComponent
                      key="jsonFormMap"
                      v-if="showMap"
                      :mapCenter="mapCenter"
                      :mapZoom="mapZoom"
                      :mapStyle="{ height: '100%', width: '100%' }"
                      :mapOptions="{
                        scrollwheel: true,
                        fullscreenControl: false,
                        streetViewControl: false,
                        clickableIcons: false,
                      }"
                      :mapMarkers="
                        obj[el.field].LATITUD && obj[el.field].LONGITUD
                          ? [
                              {
                                markerKey: 'jsonFormMarker',
                                icon: {
                                  icon: 'blankIcon',
                                  color: '#ff5656',
                                },
                                position: {
                                  lat: obj[el.field].LATITUD,
                                  lng: obj[el.field].LONGITUD,
                                },
                              },
                            ]
                          : []
                      "
                      @mapClick="changeMapClickPosition($event, el)"
                    >
                    </mapComponent>
                  </div>
                </modal>
              </v-card-text>
            </v-card>
          </template>
          <template v-if="el.type === 'IMAGE'">
            <v-card flat color="transparent">
              <v-card-text class="px-0 pb-0">
                <v-row
                  v-if="
                    obj[el.field].fileName &&
                    obj[el.field].fileName.length &&
                    obj[el.field].fileUrl
                  "
                >
                  <v-col cols="3">
                    <v-card flat tile height="75px">
                      <v-btn
                        v-if="!el.hideRemove"
                        icon
                        color="error"
                        class="removeImage"
                        small
                        @click.stop="
                          el.events && el.events.input
                            ? deleteImage(el)
                            : () => {
                                return false;
                              }
                        "
                      >
                        <v-icon class="center" color="white">clear</v-icon>
                      </v-btn>
                      <v-img :src="obj[el.field].fileUrl" height="75px"></v-img>
                    </v-card>
                  </v-col>
                </v-row>
                <v-text-field
                  :name="Math.random()"
                  autocomplete="new-password"
                  class="mt-1"
                  :solo="el.textFieldType == 'SOLO'"
                  :filled="el.textFieldType == 'FILLED'"
                  :outlined="el.textFieldType == 'OUTLINED'"
                  :label="$t('select_image')"
                  @click="pickFile(`imageInput_${index}`)"
                  v-model="obj[el.field].fileName"
                  prepend-icon="attach_file"
                >
                  <template v-slot:label v-if="isRequired(el.required)">
                    {{ el.name }}
                    <span class="error--text"><strong>(*)</strong></span>
                  </template>
                </v-text-field>
                <input
                  type="file"
                  style="display: none"
                  :ref="`imageInput_${index}`"
                  accept="image/jpeg, image/gif, image/png, image/x-eps"
                  @change="onFilePicked($event, el)"
                  readonly
                  multiple
                />
              </v-card-text>
            </v-card>
          </template>
          <template v-if="el.type === 'BINARY'">
            <v-card flat color="transpararent">
              <v-card-text class="px-0 pb-0">
                <v-file-input
                  class="mt-1"
                  :label="$t('select_file')"
                  :clearable="false"
                  :accept="el.accept ? el.accept : null"
                  chips
                  hide-details
                  :value="obj[el.field] ? obj[el.field] : []"
                  @change="onTemplateSelected($event, el)"
                >
                  <template v-slot:label v-if="isRequired(el.required)">
                    {{ el.name }}
                    <span class="error--text"><strong>(*)</strong></span>
                  </template>
                </v-file-input>
              </v-card-text>
            </v-card>
          </template>
          <template v-if="el.type === 'ALERT'">
            <v-alert
              :border="el.border"
              :dense="el.dense"
              :icon="el.icon"
              :outlined="el.outlined"
              :prominent="el.prominent"
              :text="el.text"
              :type="el.color"
            >
              {{ el.label }}
            </v-alert>
          </template>
        </template>
        <span>{{ el.tooltip || el.name }}</span>
      </v-tooltip>
    </v-col>
    <slot></slot>
  </v-row>
</template>
<script src="./jsonForm.js" />
<style src="./jsonForm.scss" lang="scss" scoped />
