<template>
  <div v-if="survey">
    <Survey :survey="survey"></Survey>
  </div>
</template>
      
      <script>
import * as SurveyVue from "survey-vue";
const Swal = require("sweetalert2");

export default {
  components: { Survey: SurveyVue.Survey },
  data: () => ({
    survey: null,
    data: null,
  }),

  async mounted() {
    let self = this;
    await axios
      .get("/api/conference/edit-gallery/" + this.$route.params.id, {
        headers: {
          Authorization: AT,
          Accept: "application/json",
        },
      })
      .then((response) => {
        this.data = response.data;
        console.log(this.data);
      });
    let json = {
      locale: "es",
      title: "Galeria",
      pages: [
        {
          name: "page1",
          elements: [
            {
              type: "file",
              name: "images",
              title: "Imagenes",
              description: "Sube imágenes JPG (máx. 1 MB cada una)",
              hideNumber: true,
              allowMultiple: true,
              acceptedTypes: ".jpg",
              needConfirmRemoveFile: true,
            },
          ],
        },
      ],
      showCompletedPage: false,
    };

    this.survey = new SurveyVue.Model(json);

    this.survey.onComplete.add(async function (result) {
      await axios
        .post("/api/conference/update-gallery/" + self.$route.params.id, result.data)
        .then((response) => {
          console.log(response.data);
          if (response.data) {
            Swal.fire({
              title: "Actualizado",
              text: "La galeria ha sido actualizado con éxito",
              icon: "success",
              //  timer: 2000,
            }).then(function () {
              window.location.href = "/panel-administracion/banner";
            });
          } else {
            Swal.fire({
              title: "Error!",
              text: "No se pudo actualizar la galeria. Por favor intente más tarde.",
              icon: "error",
              //    timer: 3000,
            }).then((_) => {
              location.reload();
            });
          }
        });
    });
    this.survey.data = self.data;
  },
};
</script>