<template>
  <b-field class="column mb-0 pb-0" label="Carrito" :class="columnSize">
    <b-select
      icon="cart"
      :loading="isLoadingSelect"
      v-model="idCarrito"
      expanded
      rounded
    >
      <option v-if="!idModulo" disabled>Selecciona un módulo</option>

      <option :disabled="deshabilitarOptVacia" :value="0" v-else>
        Selecciona una opción
      </option>

      <optgroup
        v-for="(tc, index) in carritos"
        :key="index"
        :label="tiposCarritos[index].tipo_carrito"
        v-show="mostarTipoCarrito(tc)"
      >
        <option v-for="(c, jndex) in tc" :key="jndex" :value="c.id_carrito">
          {{ c.carrito }}
        </option>
      </optgroup>
    </b-select>
  </b-field>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
    idInstitucion: { type: Number, required: true, default: 0 },
    idModulo: { type: Number, required: true, default: 0 },
    idCarritoPadre: { type: Number, required: true, default: 0 },
    columnSize: { typeof: String, required: false, default: '' },
  },
  data: () => {
    return {
      carritos: [],
      tiposCarritos: [],
      isLoadingSelect: false,
      idCarrito: 0,
    }
  },
  methods: {
    mostarTipoCarrito(carritos) {
      return carritos.length > 0 ? true : false
    },
    async obtenerCarritos() {
      const carritos = []

      this.isLoadingSelect = true
      for (let i = 0; i < this.tiposCarritos.length; i++) {
        carritos.push([])
        await axios
          .get(
            `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.idInstitucion}&id_modulo=${this.idModulo}&id_tipo_carrito=${this.tiposCarritos[i].id_tipo_carrito}`,
            this.$getToken.token()
          )
          .then((res) => {
            for (let j = 0; j < res.data[0].length; j++)
              carritos[i].push(res.data[0][j])
          })
          .catch((err) => {})
        this.isLoadingSelect = false
      }
      this.carritos = carritos
    },
    obtenerTiposCarritos() {
      this.tiposCarritos = []
      axios
        .get(
          `${process.env.api}/institucion-tipo-carrito`,
          this.$getToken.token()
        )
        .then((res) => {
          this.tiposCarritos = res.data
          if (this.idModulo) return this.obtenerCarritos()
        })
        .catch((err) => {})
    },
  },
  watch: {
    idModulo(nuevoIdInstitucion) {
      if (nuevoIdInstitucion) this.obtenerCarritos()
    },
    idCarrito(carritoSeleccionado) {
      this.$emit('carrito-seleccionado', parseInt(carritoSeleccionado))
    },
    idCarritoPadre(nuevoCarrito) {
      this.idCarrito = nuevoCarrito
    },
  },
  created() {
    if (this.idCarritoPadre) this.idCarrito = this.idCarritoPadre
    this.obtenerTiposCarritos()
  },
}
</script>

<style scoped></style>
