<template>
  <div
    v-if="myel"
    :class="
      (editOn ? ` clEditDiv` : ``) +
      `` +
      (!myel.active ? ` clEditNotActive` : ``)
    "
  >
    <div v-if="!!myel.type">
      <div class="column">
        <q-btn
          v-if="enableAdd"
          label="Aggiungi"
          icon="fas fa-plus"
          color="primary"
          @click="visuadd = true"
        >
        </q-btn>
      </div>
      <q-bar v-if="enableEdit" dense class="q-px-sm">
        <q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
        </q-toggle>
        <!--<q-toggle v-if="tools.isManager()"
                v-model="enableAdd"
                icon="fas fa-plus"
      </q-toggle>
      >-->
        &nbsp;
        <q-input
          style="max-width: 60px"
          hide-bottom-space
          borderless
          dense
          @update:model-value="modifElem"
          v-model="neworder"
          v-on:keyup.enter="saveElem(false)"
          type="number"
        >
        </q-input>

        <q-space />
        <q-btn
          icon="fas fa-trash-alt"
          color="negative"
          dense
          flat
          size="sm"
          @click="delElem"
        >
        </q-btn>
        <q-btn
          icon="far fa-copy"
          color="primary"
          dense
          flat
          size="sm"
          @click="dupElem(myel.order + 10)"
        >
        </q-btn>
      </q-bar>
      <div class="justify-center row q-ma-xs">
        <q-btn
          dense
          v-if="enableEdit && !disableSave"
          icon="fas fa-check"
          color="positive"
          label="Applica"
          size="sm"
          :disable="disableSave"
          @click="saveElem"
        >
        </q-btn>
        <q-btn
          dense
          v-if="enableEdit && !disableSave"
          icon="fas fa-check"
          color="positive"
          label="Salva"
          size="sm"
          :disable="disableSave"
          @click="saveElem(true)"
        >
        </q-btn>
      </div>
      <div class="row">
        <q-input
          label="Lunghezza:"
          @update:model-value="modifElem"
          style="width: 100px"
          v-model="myel.widthimg"
          filled
          dense
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Altezza:"
          @update:model-value="modifElem"
          style="width: 100px"
          v-model="myel.heightimg"
          filled
          dense
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>

      <div class="row">
        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-if="enableEdit"
          rounded
          outlined
          v-model="myel.align"
          :options="tools.SelectListAlign"
          @update:model-value="modifElem"
          dense
          label="Allinea"
          style="width: 100px"
          emit-value
          map-options
        >
        </q-select>
        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-if="enableEdit"
          rounded
          outlined
          v-model="myel.vertalign"
          :options="tools.SelectListVertAlign"
          @update:model-value="modifElem"
          dense
          label="Vert Allinea"
          style="min-width: 150px"
          emit-value
          map-options
        >
        </q-select>
        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-if="enableEdit"
          rounded
          style="min-width: 150px"
          outlined
          v-model="myel.class"
          :options="tools.SelectListClass"
          @update:model-value="modifElem"
          dense
          label="Classe"
          emit-value
          map-options
        >
        </q-select>
        <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
          v-if="enableEdit && showFit"
          rounded
          style="width: 100px"
          outlined
          v-model="myel.fit"
          :options="tools.SelectListFit"
          @update:model-value="modifElem"
          dense
          label="Adatta:"
          emit-value
          map-options
        >
        </q-select>
      </div>
      <div class="row">
        <q-input
          dense
          label="Classe:"
          @update:model-value="modifElem"
          v-model="myel.class2"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <CSelectAnimation
        v-if="enableEdit && showAnimation"
        v-model="myel.anim"
        @update:model-value="modifElem"
      >
      </CSelectAnimation>
      <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
        <div v-if="enableEdit">
          <q-input
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.container"
            dense
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div
        v-if="myel.type === shared_consts.ELEMTYPE.CARD"
        :class="myel.span ? '' : ''"
      >
        <CSelectAnimation
          v-if="enableEdit && showAnimation"
          v-model="myel.anim2"
          @update:model-value="modifElem"
          label="Animazione Immagini"
        >
        </CSelectAnimation>
        <div class="row">
          <q-input
            dense
            label="Classe Schede:"
            @update:model-value="modifElem"
            v-model="myel.class3"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
        <q-btn
          rounded
          dense
          color="primary"
          label="Scheda"
          icon="fas fa-plus"
          @click="addNewCard"
        >
        </q-btn>

        <q-tabs
          v-model="tabCard"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab
            v-for="(rec, ind) in myel.listcards"
            :key="ind"
            :name="`card` + ind"
            :label="`Scheda ` + (ind + 1)"
            icon="fas fa-pencil-alt"
          />
        </q-tabs>

        <q-tab-panels v-model="tabCard" animated>
          <q-tab-panel
            v-for="(rec, ind) in myel.listcards"
            :key="ind"
            :name="`card` + ind"
          >
            <div v-if="enableEdit" class="column bordered q-ma-xs">
              <q-bar class="bg-primary text-white">
                Card {{ ind + 1 }}
                <q-space />
                <q-btn
                  icon="fas fa-trash-alt"
                  color="negative"
                  dense
                  flat
                  size="sm"
                  @click="delRecCard(rec._id, myel)"
                >
                </q-btn>
              </q-bar>

              <CMyFieldRec
                title="Immagine:"
                table="imgcards"
                :id="rec._id"
                :rec="rec"
                field="imagefile"
                @update:model-value="modifElem"
                @save="saveCard"
                :canEdit="true"
                :canModify="true"
                :nosaveToDb="true"
                :path="myel.path"
                :fieldtype="costanti.FieldType.imgcard"
              >
              </CMyFieldRec>

              <div v-if="enableEdit" class="row">
                <q-input
                  dense
                  style="min-width: 150px"
                  label="Titolo:"
                  class="fa-border"
                  @update:model-value="modifElem"
                  v-model="rec.alt"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>
                <q-input
                  dense
                  style="min-width: 150px"
                  label="Style:"
                  class="fa-border"
                  @update:model-value="modifElem"
                  v-model="rec.style"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>
                <CSelectColor
                  v-if="enableEdit"
                  style="min-width: 150px"
                  v-model="rec.color"
                  @update:model-value="modifElem"
                  title="Col Titolo"
                >
                </CSelectColor>
                <CSelectFontSize
                  v-if="enableEdit"
                  style="min-width: 200px"
                  v-model="rec.size"
                  @update:model-value="modifElem"
                  title="Font Titolo"
                >
                </CSelectFontSize>
              </div>
              <CMyEditor
                v-model:value="rec.content"
                title="Contenuto:"
                @keyup.enter.stop
                :showButtons="false"
                :canModify="true"
                @update:value="modifElem"
                @showandsave="saveElem"
              >
              </CMyEditor>

              <q-input
                label="Sottotitolo:"
                class="fa-border"
                dense
                @update:model-value="modifElem"
                v-model="rec.description"
                filled
                v-on:keyup.enter="saveElem"
              >
              </q-input>
            </div>
            <div v-if="enableEdit" class="row">
              <CSelectColor
                v-if="enableEdit"
                v-model="rec.colorsub"
                @update:model-value="modifElem"
                title="Col Sottotitolo"
              >
              </CSelectColor>
            </div>
          </q-tab-panel>
        </q-tab-panels>
      </div>

      <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
        <div v-if="enableEdit">
          <q-input
            dense
            label="Margine:"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.size"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
        <div v-if="enableEdit">
          <q-input
            dense
            label="Titolo"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.title"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Style"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.styleadd"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Immagine:"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.imgback"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
        <div v-if="enableEdit">
          <CMyFieldRec
            title="Immagine:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="image"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
            :fieldtype="costanti.FieldType.image"
          >
          </CMyFieldRec>

          <q-input
            dense
            label="Title"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Sottotitolo"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.container2"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
        <div v-if="enableEdit">
          <q-input
            dense
            label="Velocità"
            style="max-width: 100px"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.speed"
            type="number"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CMyFieldRec
            title="Immagine:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="image"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
            :fieldtype="costanti.FieldType.image"
          >
          </CMyFieldRec>
          <CMyFieldRec
            title="Logo:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="img"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
            :fieldtype="costanti.FieldType.image"
          >
          </CMyFieldRec>
          <div class="row">
            <q-input
              label="Lunghezza Logo:"
              @update:model-value="modifElem"
              v-model="myel.width"
              filled
              dense
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              label="Altezza Logo:"
              @update:model-value="modifElem"
              v-model="myel.height"
              filled
              dense
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>

          <q-btn
            rounded
            dense
            color="primary"
            label="Testo"
            icon="fas fa-plus"
            @click="addNewElemText"
          >
          </q-btn>

          <q-tabs
            v-model="tabElemsText"
            dense
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="justify"
            narrow-indicator
          >
            <q-tab
              v-for="(rec, ind) in myel.elemsText"
              :key="ind"
              :name="`elem` + ind"
              :label="`Testo ` + (ind + 1)"
              icon="fas fa-pencil-alt"
            />
          </q-tabs>

          <q-tab-panels v-model="tabElemsText" animated>
            <q-tab-panel
              v-for="(rec, ind) in myel.elemsText"
              :key="ind"
              :name="`elem` + ind"
            >
              <div v-if="enableEdit" class="column bordered q-ma-xs">
                <q-bar class="bg-primary text-white">
                  Elem {{ ind + 1 }}
                  <q-space />
                  <q-btn
                    icon="fas fa-trash-alt"
                    color="negative"
                    dense
                    flat
                    size="sm"
                    @click="delRecCard(rec._id, myel)"
                  >
                  </q-btn>
                </q-bar>
                <div v-if="enableEdit" class="row">
                  <CSelectColor
                    v-if="enableEdit"
                    style="min-width: 150px"
                    v-model="rec.color"
                    @update:model-value="modifElem"
                    title="Col Titolo"
                  >
                  </CSelectColor>
                  <CSelectFontSize
                    v-if="enableEdit"
                    style="min-width: 200px"
                    v-model="rec.size"
                    @update:model-value="modifElem"
                    title="Font Titolo"
                  >
                  </CSelectFontSize>
                </div>
                <q-input
                  dense
                  label="Classe:"
                  @update:model-value="modifElem"
                  v-model="rec.class"
                  filled
                  v-on:keyup.enter="saveElem"
                >
                </q-input>
                <CMyEditor
                  v-model:value="rec.text"
                  title="Contenuto:"
                  @keyup.enter.stop
                  :showButtons="false"
                  :canModify="true"
                  @update:value="modifElem"
                  @showandsave="saveElem"
                >
                </CMyEditor>
                <CSelectAnimation
                  v-if="enableEdit && showAnimation"
                  v-model="rec.anim"
                  @update:model-value="modifElem"
                  label="Animazione"
                >
                </CSelectAnimation>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
        <div v-if="enableEdit">
          <q-input
            dense
            label="Classe:"
            @update:model-value="modifElem"
            v-model="myel.class"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CMyEditor
            v-model:value="myel.containerHtml"
            title=""
            @keyup.enter.stop
            :showButtons="false"
            :canModify="true"
            @update:value="modifElem"
            @showandsave="saveElem"
          >
          </CMyEditor>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
        <div v-if="enableEdit">
          <q-input
            label="NomeFile Img:"
            @update:model-value="modifElem"
            v-model="myel.image"
            filled
            dense
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CMyFieldRec
            title="NomeFile Img:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="image"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
            :fieldtype="costanti.FieldType.image"
          >
          </CMyFieldRec>
        </div>
      </div>

      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
        <div v-if="enableEdit">
          <q-input
            dense
            label="NomeFile Img:"
            @update:model-value="modifElem"
            v-model="myel.image"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CMyFieldRec
            title="NomeFile Img:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="image"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
            :fieldtype="costanti.FieldType.image"
          >
          </CMyFieldRec>
          <div class="">
            <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
              <q-input
                dense
                label="Lunghezza:"
                @update:model-value="modifElem"
                v-model="myel.widthimg"
                filled
                v-on:keyup.enter="saveElem"
              >
              </q-input>
              <q-input
                dense
                label="Altezza:"
                @update:model-value="modifElem"
                v-model="myel.heightimg"
                filled
                v-on:keyup.enter="saveElem"
              >
              </q-input>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
        <div v-if="enableEdit" class="row">
          <q-input
            dense
            label="NomeFile Video:"
            @update:model-value="modifElem"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Ratio:"
            type="number"
            @update:model-value="modifElem"
            v-model="myel.ratio"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
        <div v-if="enableEdit" class="row">
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            rounded
            outlined
            v-model="myel.container"
            :options="arrPages"
            label="Pagina"
            emit-value
            map-options
            @change="saveElem"
          >
          </q-select>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
        <div v-if="enableEdit" class="row">
          <q-input
            dense
            label="NomeFile Img:"
            @update:model-value="modifElem"
            v-model="myel.container"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
            <q-input
              dense
              label="Lunghezza:"
              type="number"
              @update:model-value="modifElem"
              debounce="1000"
              v-model="myel.widthimg"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              label="Altezza:"
              type="number"
              @update:model-value="modifElem"
              debounce="1000"
              v-model="myel.heightimg"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              dense
              label="Link:"
              @update:model-value="modifElem"
              debounce="1000"
              v-model="myel.link"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
      </div>
      <div
        v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
      >
        <CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
        <div v-if="enableEdit" class="row">
          <q-input
            dense
            label="ImgMap:"
            @update:model-value="modifElem"
            v-model="myel.container"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="UrlMap:"
            @update:model-value="modifElem"
            v-model="myel.container2"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Title:"
            @update:model-value="modifElem"
            v-model="myel.container3"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Coordinata Mappa 1:"
            @update:model-value="modifElem"
            v-model="myel.containerHtml"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            dense
            label="Coordinata Mappa Big:"
            @update:model-value="modifElem"
            v-model="myel.link"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
        <div v-if="enableEdit" class="row">
          <CMyFieldRec
            title="Lista Immagini:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="list"
            @update:model-value="modifElem"
            :canEdit="true"
            :canModify="true"
          >
          </CMyFieldRec>

          <!--sss
          -->

          <q-input
            dense
            label="Secondi tra un'immagine e l'altra:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.container2"
            type="number"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-toggle
            label="Sottotitoli"
            v-model="myel.parambool"
            color="positive"
            icon="fas fa-eye"
          >
          </q-toggle>

          <q-toggle
            label="Miniature"
            v-model="myel.parambool2"
            color="positive"
            icon="fas fa-eye"
          >
          </q-toggle>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
        <q-input
          dense
          label="Colore:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.color"
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Colore Testo:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.containerHtml"
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Link:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.link"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Testo Bottone:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Icona:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.container2"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Dimensione"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.size"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          dense
          label="Target:"
          @update:model-value="modifElem"
          debounce="1000"
          v-model="myel.container3"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
        <div v-if="enableEdit" class="row">
          <q-input
            dense
            label="Visualizza ultimi N eventi:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.number"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
        <q-select
          v-model="myel.container"
          :options="[{label: 'Mostra Sempre', value: true }, { label: 'Solo se Offline', value: false}]"
          label="Quando mostrarlo"
          emit-value
          map-options
        >
        </q-select>
      </div>
    </div>
  </div>
  <div>
    <q-dialog
      v-model="visuadd"
      transition-show="slide-up"
      transition-hide="slide-down"
      :maximized="$q.screen.lt.sm"
    >
      <q-card class="dialog_card">
        <q-bar dense class="bg-primary text-white">
          Aggiungi Elemento:
          <q-space />
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-bar>

        <q-card-section class="inset-shadow row q-ma-sm q-pa-sm">
          <q-tabs v-model="tabadd" inline-label class="bg-gray shadow-2">
            <q-tab name="tools" label="Strumenti" />
            <q-tab v-if="tools.isAdmin()" name="others" label="Altri" />
            <q-tab v-if="tools.isAdmin()" name="others2" label="Altri 2" />
          </q-tabs>

          <q-tab-panels v-model="tabadd" animated class="row justify-center">
            <q-tab-panel name="tools">
              <div
                v-for="(rec, index) in shared_consts.TypesElem"
                :key="index"
                class="q-pa-sm"
              >
                <q-btn
                  v-if="enableAdd"
                  :label="rec.label"
                  icon="fas fa-plus"
                  color="primary"
                  @click="
                    newtype = rec.value;
                    addNewElem(myel.order - 10);
                  "
                >
                </q-btn>
              </div>
            </q-tab-panel>
            <q-tab-panel name="others">
              <div
                v-for="(rec, index) in shared_consts.TypesElemAdmin"
                :key="index"
                class="q-pa-sm"
              >
                <q-btn
                  v-if="enableAdd"
                  :label="rec.label"
                  icon="fas fa-plus"
                  color="primary"
                  @click="
                    newtype = rec.value;
                    addNewElem(myel.order - 10);
                  "
                >
                </q-btn>
              </div>
            </q-tab-panel>
            <q-tab-panel name="others2">
              <div
                v-for="(rec, index) in shared_consts.TypesElemAdminTools"
                :key="index"
                class="q-pa-sm"
              >
                <q-btn
                  v-if="enableAdd"
                  :label="rec.label"
                  icon="fas fa-plus"
                  color="primary"
                  @click="
                    newtype = rec.value;
                    addNewElem(myel.order - 10);
                  "
                >
                </q-btn>
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CMyEditElem.ts">
</script>
<style lang="scss" scoped>
@import './CMyEditElem.scss';
</style>
