<template>
  <div>
    <div v-if="mypathin && !!rec">
      <q-inner-loading id="spinner" :showing="onloading">
        <q-spinner-tail color="primary" size="4em"> </q-spinner-tail>
      </q-inner-loading>

      <div v-if="!onloading">
        <q-toggle
          v-if="tools.isManager()"
          v-model="editOn"
          dense
          color="green"
          size="sm"
          @update:model-value="changeVisuDrawer(mypathin, editOn)"
          icon="fas fa-pencil-alt"
        >
        </q-toggle>

        <q-drawer
          v-model="visuEditor"
          v-if="selElem && editOn && !tools.isObjectEmpty(selElem)"
          show-if-above
          :breakpoint="350"
          side="right"
          :width="tools.isMobile() ? 350 : mywidthEditor"
          elevated
          style="transition: 'width 0.3s ease'"
        >
          <q-bar dense class="q-ma-xs bg-primary text-white">
            <q-toolbar-title> Editor </q-toolbar-title>
            <q-btn
              flat
              round
              size="md"
              color="white"
              icon="close"
              @click="
                visuEditor = false;
                selElem = {};
              "
            ></q-btn>
          </q-bar>

          <CMyEditElem
            :myelem="selElem"
            :editOn="true"
            :path="rec.path"
            :idPage="rec._id"
            @selElemClick="selElemClick"
            @deleteElem="deleteElem"
            @toggleSize="toggleSize"
            @dupPage="duplicatePage"
            @expPage="showexportPage = !showexportPage"
            @impPage="showimportPage = !showimportPage"
          >
          </CMyEditElem>
        </q-drawer>

        <div class="q-gutter-xs" style="margin-left: 1px; margin-right: 1px">
          <div v-if="!!rec.img1" class="text-center">
            <q-img :src="`` + rec.img1" class="img"></q-img>
          </div>

          <div v-if="!!rec.content" v-html="rec.content"></div>
          <q-video v-if="!!rec.video1" :src="rec.video1" :ratio="rec.ratio1">
          </q-video>

          <div v-if="!!rec.img2" class="text-center">
            <q-img :src="`` + rec.img2" class="img"></q-img>
          </div>

          <div v-if="!!rec.content2" v-html="rec.content2"></div>
          <q-video
            v-if="!!rec.video2"
            :src="rec.video2"
            :ratio="rec.ratio2"
          ></q-video>

          <div v-if="!!rec.img3" class="text-center">
            <q-img :src="`` + rec.img2" class="img"></q-img>
          </div>

          <div v-if="!!rec.content3" v-html="rec.content3"></div>
          <q-video
            v-if="!!rec.video3"
            :src="rec.video3"
            :ratio="rec.ratio3"
          ></q-video>
          <div v-if="!!rec.content4" v-html="rec.content4"></div>

          <div v-for="myelem in myelems" :key="myelem._id">
            <div>
              <transition :duration="1000" appear>
                <CTitleBanner
                  v-if="
                    (myelem.active || editOn) &&
                    !!rec.path &&
                    myelem.titleBanner
                  "
                  :class="`q-pa-xs `"
                  :title="myelem.titleBanner"
                  bgcolor="bg-primary"
                  :clcolor="myelem.color ? `` : `text-white`"
                  :mystyle="
                    myelem.color ? `color: ${myelem.color} !important;` : ``
                  "
                  :myclass="myelem.classBanner"
                  :canopen="true"
                >
                  <CMyElem
                    :myelem="myelem"
                    :idPage="rec._id"
                    :editOn="editOn"
                    :addOn="addOn"
                    :path="!!rec.path ? rec.path : ''"
                    :selElem="selElem"
                    @selElemClick="selElemClick"
                  >
                  </CMyElem>
                </CTitleBanner>
                <CMyElem
                  v-else-if="(myelem.active || editOn) && !!rec.path"
                  :myelem="myelem"
                  :editOn="editOn"
                  :addOn="addOn"
                  :idPage="rec._id"
                  :path="!!rec.path ? rec.path : ''"
                  :selElem="selElem"
                  @selElemClick="selElemClick"
                >
                </CMyElem>
              </transition>
            </div>
            <div v-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
              <CMyPageElem2 :mypath="myelem.container">&nbsp;</CMyPageElem2>
            </div>
          </div>

          <div v-if="myelems.length === 0">
            <CMyElem
              v-if="editOn && !!rec.path"
              :myelem="myelemVoid"
              :editOn="editOn"
              :addOn="addOn"
              :idPage="rec._id"
              :selElem="selElem"
              :path="rec.path"
              @selElemClick="selElemClick"
            >
            </CMyElem>
          </div>
        </div>
        <LandingFooter v-if="rec.showFooter"></LandingFooter>
      </div>
    </div>
    <div v-else>
      <div v-if="!!title">
        <CTitle
          v-if="imgbackground"
          :imgbackground="imgbackground"
          :headtitle="title"
          :sizes="sizes"
          :styleadd="styleadd"
        ></CTitle>
        <div v-if="!imgbackground">
          <CImgTitle v-if="img" :src="img" :title="title"> </CImgTitle>
        </div>
        <slot></slot>
        <div v-if="!nofooter"></div>
      </div>
    </div>

    <q-dialog v-model="showexportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
            :esporta="true"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog v-model="showimportPage">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Esporta Pagina </q-toolbar-title>
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <br />
          <CExportImportPage
            :idPage="rec._id"
            :nomefileprop="`esporta_${rec.path}.json`"
          >
          </CExportImportPage>
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

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