<template>
  <div v-if="myel"
       :class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
  >
    <q-bar v-if="enableEdit" dense class="bg-blue-1 text-white q-px-sm">
      <q-toggle
        v-model="myel.active"
        color="positive"
        icon="fas fa-eye"
      >
      </q-toggle>
      <q-toggle
        v-model="enableEdit"
        icon="fas fa-pencil-alt"
      >
      </q-toggle>
      <!--<q-toggle v-if="tools.isManager()"
                v-model="enableAdd"
                icon="fas fa-plus"
      </q-toggle>
      >-->

      <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-select
        v-if="enableEdit"
        rounded outlined v-model="myel.align"
        :options="tools.SelectListAlign"
        @update:model-value="modifElem"
        dense
        label="Allinea" emit-value map-options>
      </q-select>
      <q-select
        v-if="enableEdit"
        rounded 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 outlined v-model="myel.fit"
        :options="tools.SelectListFit"
        @update:model-value="modifElem"
        dense
        label="Fit" emit-value map-options>
      </q-select>
      <q-space/>
      <q-btn
        icon="fas fa-trash-alt"
        color="negative"
        dense
        flat
        size="sm"
        @click="delElem">
      </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 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"
          filled
          v-on:keyup.enter="saveElem"
        >

        </q-input>

      </div>
      <div
        :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
        @click="clickOnElem">{{ myel.container }}

      </div>
    </div>
    <div v-if="myel.type === shared_consts.ELEMTYPE.CARD">

      <q-card class="my-card" flat bordered>
        <q-img
          :src="myel.img"
        />

        <q-card-section>
          <div class="text-overline text-orange-9">{{ myel.container }}</div>
          <div class="text-h5 q-mt-sm q-mb-xs">{{ myel.container2 }}</div>
          <div class="text-caption text-grey">
            {{ myel.container3 }}
          </div>
        </q-card-section>

        <!--<q-card-actions>
          <q-btn flat color="dark" label="Share"/>
          <q-btn flat color="primary" label="Book"/>

          <q-space/>

          <q-btn
            color="grey"
            round
            flat
            dense
            :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
            @click="expanded = !expanded"
          />
        </q-card-actions>-->

        <q-slide-transition>
          <div v-show="expanded">
            <q-separator/>
            <q-card-section class="text-subitle2">
              {{ lorem }}
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </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
        :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
        @click="clickOnElem"
        :style="`margin: ` + myel.size">&nbsp;
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
      <div v-if="enableEdit">
        <q-input
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.title"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>

      </div>
      <div>
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem">
          <CTitle
            :imgbackground="myel.imgback"
            :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
          </CTitle>
        </div>
      </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 :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem">
          <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
          </CImgTitle>
        </div>
      </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 :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem"
             v-html="myel.containerHtml"></div>
      </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
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <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 class="text-center">
        <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem">
          <q-img :src="myel.container" :fit="myel.fit" class="img" :width="myel.widthimg ? myel.widthimg: undefined" :height="myel.heightimg ? myel.heightimg : undefined"></q-img>
        </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 :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem">
        <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
        </q-video>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem">

        <LandingFooter></LandingFooter>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
      <div v-if="enableEdit" class="row">
        <q-input
          label="Importa Pagina:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <div :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem">
        <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
      </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 :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem">
        <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
      </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">
      <!-- Da Fare -->
      <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
                      :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">

      </COpenStreetMap>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center">

        <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 :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
             @click="clickOnElem">

          <q-carousel
            swipeable
            animated
            :autoplay="myel.container2 ? (myel.container2 * 1000) : 8000"
            v-model="slide2"
            arrows
            :fit="myel.fit"
            :thumbnails="myel.parambool2"
            infinite
            :height="myel.height ? myel.height.toString() : 600">
            <q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
                              :img-src="getsrcbyimg(`upload/pages/`+ path + `/`+ rec.imagefile)"
                              :alt="rec.alt"
                              class="carousel_slide">
              <div
                v-if="myel.parambool" class="absolute-bottom custom-caption" style="margin-bottom: 70px">
                <div class="text-h5"><span
                  class="text-h6 text-grey-1 shadow-max">{{ index + 1 }}. </span>
                  <span v-if="rec.alt"
                        class="text-h6 text-grey-2 shadow">{{ rec.alt }}</span></div>
                <div class="text-subtitle1" v-if="rec.description"><span class="text-grey-4 shadow">{{ rec.description }}</span>
                </div>
              </div>
            </q-carousel-slide>
          </q-carousel>
        </div>
      </section>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">

      <section>
        <div class="landing">
          <div class="landing__hero maxwidth1200 text-white">
            <q-carousel
              animated
              :autoplay="animare"
              swipeable
              infinite
              navigation
              transition-next="slide-left"
              transition-prev="slide-right"
              v-model="slide"
              :height="getheightgallery()"
              width="100%"
            >
              <q-carousel-slide
                v-for="(myrec, ind) in myel.list" :key="ind"
                :name="ind"
                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">

                <div class="landing__header"></div>
                <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
                  <div class="row">
                    &nbsp;
                  </div>
                  <div class="flex justify-end">
                    <div class="q-gutter-xs testo-banda clgutter">
                      <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
                      <div class="text-subtitle1 shadow text-italic q-pl-sm">
                        {{ myel.container }}&nbsp;
                      </div>
                      <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
                        {{ myel.container2 }}
                      </div>
                      <div class="text-subtitle2 shadow text-italic q-pl-sm">
                        {{ myel.container3 }}
                      </div>
                      <div>
                        <br><br>
                        <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
                          <br><br>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--<div class="landing__arrow absolute-bottom text-center">
                  <i aria-hidden="true"
                     class="q-icon text-h2 text-white material-icons">expand_more</i>
                </div>-->
              </q-carousel-slide>
            </q-carousel>
          </div>
        </div>
      </section>
    </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>

      <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
      </CEventsCalendar>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
      <div class="q-pa-md q-gutter-md">
        <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
            $t('components.authentication.email_verification.link_sent')
          }}
        </div>

      </div>
    </div>
    <div class="justify-center q-gutter-xs row">
      <q-btn
        v-if="enableEdit && !disableSave"
        icon="fas fa-check"
        color="positive"
        label="Applica"
        size="sm"
        :disable="disableSave"
        @click="saveElem">
      </q-btn>
      <q-btn
        v-if="enableEdit && !disableSave"
        icon="fas fa-check"
        color="positive"
        label="Salva"
        size="sm"
        :disable="disableSave"
        @click="saveElem(true)">
      </q-btn>
    </div>
  </div>
</template>

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