<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" />

        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>
