<template>
  <div class="columns">
    <div class="column py-5">
      <b-image
        class="img"
        :src="this.urlTicket"
        alt="Imagen del ticekt"
      ></b-image>
    </div>
    <div class="column mt-6">
      <p>
        Administrador por favor revisa que todos los datos sean correctos, en
        caso de ser así valida el ticket
      </p>

      <div class="box">
        <p><b>Folio:</b> {{ $route.query.folio }}</p>
        <p><b>Cantidad: </b> {{ $route.query.monto }}</p>
        <p><b>Fecha del ticket:</b> {{ fecha($route.query.fecha) }}</p>
      </div>
      <div class="has-text-centered pb-5">
        <b-button
          type="is-success"
          @click="
            validacion(1),
              imprimirWarning(
                '¿ Estas seguro que los datos son correctos y quieres validar este ticekt ?',
                validar
              )
          "
          >Validar</b-button
        >
        <b-button
          type="is-danger"
          @click="
            validacion(0),
              imprimirWarning(
                '¿ Estas seguro que los datos son incorrectos y quieres declinar el ticket ?',
                validar
              )
          "
          >Denegar</b-button
        >
        <b-button type="is-info" @click="regresar()">Regresar</b-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  props: {
    imprimirMensaje: { type: Function, require: true },
    imprimirError: { type: Function, require: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      urlTicket: '',
      validado: null,
    }
  },
  methods: {
    traerTicket() {
      axios
        .get(`${process.env.api}/admin/ticket?folio=${this.$route.query.folio}`)
        .then((res) => {
          this.urlTicket = res.config.url
        })
        .catch((err) => {
          console.log(err)
          // this.imprimirError(err.response.data)
        })
    },
    validacion(value) {
      this.validado = value
    },
    validar() {
      const data = {
        folio: this.$route.query.folio,
        validacion: this.validado,
      }

      this.updateIsLoading(true)
      axios
        .put(`${process.env.api}/admin/validar`, data)
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          //   this.$router.go(-1)
        })
        .catch((err) => {
          console.log(err)
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    fecha(fecha) {
      return moment(fecha).format('L')
    },
    regresar() {
      this.$router.go(-1)
    },
  },
  created() {
    this.traerTicket()
  },
}
</script>
<style scoped>
.img {
  height: 350px;
  width: 350px;
  padding-bottom: 470px;
}
</style>
