<template>
  <div
    v-if="myel"
    :class="
      (editOn ? ` clEditDiv` : ``) +
      `` +
      (!myel.active ? ` clEditNotActive` : ``)
    "
  >
    <div v-if="!!myel.type">
      <q-bar v-if="enableEdit" dense class="bg-blue-1 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-select
          v-if="enableAdd"
          v-model="newtype"
          dense
          style="width: 150px"
          :options="shared_consts.TypesElem"
          emit-value
          map-options
        >
        </q-select>
        <q-btn
          v-if="enableAdd"
          size="sm"
          dense
          flat
          icon="fas fa-plus"
          color="positive"
          @click="addNewElem(myel.order - 10)"
        >
        </q-btn>
      </q-bar>
      <div class="row">
        <q-input
          label="Width:"
          @update:model-value="modifElem"
          v-model="myel.widthimg"
          filled
          dense
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Height:"
          @update:model-value="modifElem"
          v-model="myel.heightimg"
          filled
          dense
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <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-select
          v-if="enableEdit"
          rounded
          outlined
          v-model="myel.align"
          :options="tools.SelectListAlign"
          @update:model-value="modifElem"
          dense
          label="Allinea"
          style="min-width: 100px"
          emit-value
          map-options
        >
        </q-select>
        <q-select
          v-if="enableEdit"
          rounded
          style="min-width: 100px"
          outlined
          v-model="myel.class"
          :options="tools.SelectListClass"
          @update:model-value="modifElem"
          dense
          label="Classe"
          emit-value
          map-options
        >
        </q-select>
        <q-select
          v-if="enableEdit && showFit"
          rounded
          style="min-width: 100px"
          outlined
          v-model="myel.fit"
          :options="tools.SelectListFit"
          @update:model-value="modifElem"
          dense
          label="Fit"
          emit-value
          map-options
        >
        </q-select>
      </div>
      <div class="row">
        <q-input
          label="Classe:"
          @update:model-value="modifElem"
          v-model="myel.class2"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>

      <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 ? '' : ''"
      >
        <div class="row">
          <q-input
            label="Classe Card:"
            @update:model-value="modifElem"
            v-model="myel.class3"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
        <q-btn
          rounded
          dense
          color="primary"
          label="Card"
          icon="fas fa-plus"
          @click="addNewCard"
        >
        </q-btn>
        <div v-for="(rec, ind) in myel.listcards" :key="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>

            <CSelectImage
                :title="tools.getTitleGall()"
                :directory="tools.getDirectoryGall(myvalue, 'imgcards')"
                :imgGall="[myvalue]"
                :edit="true"
                :canModify="true"
                :isInModif="true"
                @update:imgGall="updateElem"
                @showandsave="Savedb">
            </CSelectImage>

            <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: 100px"
                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: 100px"
                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: 100px"
                v-model="rec.color"
                @update:model-value="modifElem"
                title="Col Titolo"
              >
              </CSelectColor>
              <CSelectFontSize
                v-if="enableEdit"
                style="min-width: 100px"
                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>
        </div>
      </div>

      <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
        <div v-if="enableEdit">
          <q-input
            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
            label="Titolo"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.title"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Style"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.styleadd"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            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">
          <q-input
            label="Img"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem(false)"
          >
          </q-input>

          <q-input
            label="Title"
            class="fa-border"
            @update:model-value="modifElem"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
        <div v-if="enableEdit">
          <q-input
            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.container"
            filled
            dense
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <CMyFieldRec
            title="NomeFile Img:"
            table="myelems"
            :id="myel._id"
            :rec="myel"
            field="container"
            @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
            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="row">
            <q-input
              label="Width:"
              @update:model-value="modifElem"
              v-model="myel.widthimg"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
            <q-input
              label="Height:"
              @update:model-value="modifElem"
              v-model="myel.heightimg"
              filled
              v-on:keyup.enter="saveElem"
            >
            </q-input>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
        <div v-if="enableEdit" class="row">
          <q-input
            label="NomeFile Video:"
            @update:model-value="modifElem"
            v-model="myel.container"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            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
            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
            label="NomeFile Img:"
            @update:model-value="modifElem"
            v-model="myel.container"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Width:"
            type="number"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.widthimg"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Height:"
            type="number"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.heightimg"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Link:"
            @update:model-value="modifElem"
            debounce="1000"
            v-model="myel.link"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </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
            label="ImgMap:"
            @update:model-value="modifElem"
            v-model="myel.container"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="UrlMap:"
            @update:model-value="modifElem"
            v-model="myel.container2"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Title:"
            @update:model-value="modifElem"
            v-model="myel.container3"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Coordinata Mappa 1:"
            @update:model-value="modifElem"
            v-model="myel.containerHtml"
            debounce="1000"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            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
            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.CALENDAR">
        <div v-if="enableEdit" class="row">
          <q-input
            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>
  </div>
</template>

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