<template>
  <section>
    <div class="columns">
      <div class="column py-4 mt-5 has-text-centered">
        <b-field>
          <b-button
            class="mx-5"
            expanded
            :type="type"
            @click="hasDominion = true"
            >Con Dominio</b-button
          >
          <b-button
            class="mx-5"
            expanded
            :type="typeTwo"
            @click="hasDominion = false"
            >Sin Dominio</b-button
          >
        </b-field>

        <b-field class="m-5" label="Dominio">
          <b-input v-model="dominio" :disabled="!hasDominion" />
        </b-field>

        <b-button
          class="mt-4"
          type="is-success"
          @click="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Esta segur@ de querer subir este archivo?',
              actualizarDominio
            )
          "
        >
          Actualizar
        </b-button>
      </div>

      <div class="column has-text-centered pb-5">
        <b-field>
          <b-upload v-model="logo" drag-drop expanded accept=".png,.jpeg,.jpg">
            <section
              class="
                section
                is-flex is-align-items-center is-justify-content-center
                drag-drop
              "
            >
              <div class="content has-text-centered">
                <p>
                  <b-icon icon="upload" size="is-large"> </b-icon>
                </p>

                <p>{{ logo.name || 'Adjunta el logo de la Institución' }}</p>
              </div>
            </section>
          </b-upload>
        </b-field>

        <b-button
          type="is-success"
          :disabled="!logo.name"
          @click="
            $alertsGenericos.imprimirWarning(
              $buefy,
              '¿Esta segur@ de querer subir este archivo?',
              subirLogo
            )
          "
        >
          Subir
        </b-button>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    admin: { type: Object, require: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      hasDominion: false,
      dominio: '',
      logo: {},
    }
  },
  methods: {
    deleteDropFile(index) {
      this.logo.splice(index, 1)
    },
    obtenerDominio() {
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/institucion/institucion?id_institucion=${this.admin.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.dominio = res.data.dominio
          this.dominio ? (this.hasDominion = true) : (this.hasDominion = false)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    actualizarDominio() {
      if (this.hasDominion) this.dominio = ''
      const data = {
        id_institucion: this.admin.institucion.id_institucion,
        dominio: this.hasDominion ? this.dominio : '',
        email_institucional: this.dominio ? true : false,
      }
      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/institucion`, data, this.$getToken.token())
        .then((res) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    subirLogo() {
      const formData = new FormData()

      this.updateIsLoading(true)
      formData.append('logo', this.logo)
      axios
        .post(
          `${process.env.api}/upload-file/upload-logo?id_institucion=${this.admin.institucion.id_institucion}`,
          formData,
          this.$getToken.token()
        )
        .then((res) => {
          this.dropFiles = []
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  computed: {
    type() {
      return {
        'is-info': this.hasDominion == true,
      }
    },
    typeTwo() {
      return {
        'is-info': this.hasDominion == false,
      }
    },
  },
  created() {
    this.obtenerDominio()
  },
}
</script>
