<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear carrito</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <SelectModulo
          :idInstitucion="idInstitucion"
          :moduloPadre="modulo"
          @modulo-seleccionado="(nuevoModulo) => (modulo = nuevoModulo)"
        />

        <SelectTipoCarrito
          tipo="c"
          :tipoCarritoPadre="tipoCarrito"
          @tipo-carrito-seleccionado="
            (nuevoTipoCarrito) => (tipoCarrito = nuevoTipoCarrito)
          "
        />

        <SelectMarca
          tipo="c"
          :marcaPadre="marca"
          @marca-seleccionada="(nuevaMarca) => (marca = nuevaMarca)"
        />

        <SelectModelo
          tipo="c"
          :modeloPadre="modelo"
          @modelo-seleccionado="(nuevoModelo) => (modelo = nuevoModelo)"
        />

        <BotonCrear
          columnSize="is-3"
          :disabled="
            !marca.id_marca ||
            !modelo.id_modelo ||
            !modulo.id_modulo ||
            !tipoCarrito.id_tipo_carrito
          "
          :crear="warning"
        />
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import SelectMarca from '@/components/selects/SelectMarca'
import SelectModulo from '@/components/selects/SelectModulo'
import SelectModelo from '@/components/selects/SelectModelo'
import SelectTipoCarrito from '@/components/selects/SelectTipoCarrito'

export default {
  components: {
    BotonCrear,
    SelectMarca,
    SelectModelo,
    SelectModulo,
    SelectTipoCarrito,
  },
  props: {
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    idInstitucion: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      marca: {},
      modelo: {},
      modulo: {},
      tipoCarrito: {},
    }
  },
  methods: {
    crearCarrito() {
      const data = {
        marca: this.marca.marca,
        modelo: this.modelo.modelo,
        // id_marca: this.marca.id_marca,
        // id_modulo: this.modulo.id_modulo,
        id_modulo: this.modulo.id_modulo,
        id_tipo_carrito: this.tipoCarrito.id_tipo_carrito,
      }

      this.updateIsLoading(true)
      axios
        .post(`${process.env.api}/carrito`, data, this.$getToken.token())
        .then((res) => {
          this.marca = {}
          this.modelo = {}
          this.modulo = {}
          this.tipoCarrito = {}
          this.updateActualizarTabla(true)
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    warning() {
      if (
        this.marca.id_marca ||
        this.modelo.id_modelo ||
        this.modulo.id_modulo ||
        this.tipoCarrito.id_tipo_carrito
      )
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          '¿Esta segur@ de querer crear este carrito?',
          this.crearCarrito
        )
    },
  },
}
</script>
