<template>
  <div v-if="myrec && myrec.path" style="width: 800px;" class="">
    <div v-if="esporta">
      
      <h2>Pagina '{{ myrec.path }}'</h2>
      <br />

      <div class="column">
        Esporta:
        <q-input
          outlined
          autofocus
          v-model="nomefile"
          label="Nome File"
        ></q-input>

        <q-btn
          color="primary"
          :label="esporta ? 'Esporta Pagina' : 'Importa Pagina'"
          @click="esportaPagina"
        ></q-btn>
        <CDownloadJsonFile
          v-if="testoJson"
          :testoJson="testoJson"
          :title="`Scarica file ${nomefile}`"
          :nomefile="nomefile"
        >
        </CDownloadJsonFile>
      </div>
    </div>
    <div v-else>
      <div class="column">
        Importa file JSON:
        <input
          type="file"
          @change="onFileChange">
          </input>
        fileContent: {{fileContent}}
        <q-btn
          color="primary"
          label="Importa file"
          @click="importaPagina"
        ></q-btn>
      </div>
    </div>
    <div class="row">Risultato:<br>
    {{ ris }}</div>
  </div>
</template>

<script lang="ts" src="./CExportImportPage.ts"></script>

<style lang="scss" scoped>
@import './CExportImportPage.scss';
</style>
