<template>
  <div>
    <div class="columns is-align-items-flex-end pl-0 pb-4">
      <b-field class="column mb-0 pb-0" field="modulo" label="Módulo">
        <b-select v-model="idModulo" icon="storefront-outline" expanded rounded>
          <option disabled :value="null">Módulo</option>

          <option
            v-for="(modulo, index) in modulos"
            :value="modulo.id_modulo"
            :key="index"
          >
            {{ modulo.modulo }}
          </option>
        </b-select>
      </b-field>

      <b-field class="column mb-0 pb-0" field="carrito" label="Carrito">
        <b-input
          placeholder="Carrito"
          v-model="carrito"
          icon="cart-outline"
          rounded
          @keyup.enter.native="obtenerCarritos"
        />
      </b-field>

      <b-field
        class="column mb-0 pb-0"
        field="tipoCarrito"
        label="Tipo Carrito"
      >
        <b-select v-model="idTipoCarrito" icon="monitor-share" expanded rounded>
          <option disabled :value="null">Tipo carrito</option>

          <option
            v-for="tipo_carrito in tiposCarritos"
            :value="tipo_carrito.id_tipo_carrito"
            :key="tipo_carrito.id_tipo_carrito"
          >
            {{ tipo_carrito.tipo_carrito }}
          </option>
        </b-select>
      </b-field>

      <b-button
        class="column mb-0"
        label="Buscar"
        type="is-info"
        @click="obtenerCarritos"
        rounded
        expanded
      />
    </div>

    <TablaCarritos
      :operador="operador"
      :carritos="carritos"
      :isLoadingTable="isLoadingTable"
    />
  </div>
</template>

<script>
import axios from 'axios'
import TablaCarritos from '@/components/operador/TablaCarritos'
export default {
  components: { TablaCarritos },
  props: {
    operador: { type: Object, required: true },
    updateActualizarTabla: { type: Function, required: true },
    actualizarTabla: { type: Boolean, required: true },
  },
  data() {
    return {
      modulos: [],
      idModulo: null,
      carritos: [],
      carrito: '',
      tiposCarritos: [],
      idTipoCarrito: null,
      isLoadingTable: false,
    }
  },
  methods: {
    obtenerCatalogoModulo() {
      axios
        .get(
          `${process.env.api}/modulo/modulos?id_institucion=${this.operador.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.modulos = res.data
          this.obtenerCarritos()
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCatalogoTiposCarritos() {
      axios
        .get(
          `${process.env.api}/institucion-tipo-carrito/`,
          this.$getToken.token()
        )
        .then((res) => {
          this.tiposCarritos = res.data
          this.obtenerCarritos()
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
    obtenerCarritos() {
      let id_modulo = ''
      let id_tipo_carrito = ''
      if (this.idTipoCarrito != null)
        id_tipo_carrito = '&id_tipo_carrito=' + this.idTipoCarrito
      if (this.idModulo != null) id_modulo = '&id_modulo=' + this.idModulo
      this.isLoadingTable = true
      axios
        .get(
          `${process.env.api}/carrito/carritos?pagina=1&id_institucion=${this.operador.institucion.id_institucion}&carrito=${this.carrito}${id_modulo}${id_tipo_carrito}`,
          this.$getToken.token()
        )
        .then(async (res) => {
          this.carritos = res.data[0]
          this.isLoadingTable = false
        })
        .catch((err) => {
          this.isLoadingTable = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    actualizarTabla(value) {
      if (value) {
        this.obtenerCarritos()
        this.updateActualizarTabla(false)
      }
    },
  },
  created() {
    this.obtenerCatalogoModulo()
    this.obtenerCatalogoTiposCarritos()
  },
}
</script>
