<template>
  <div>
    <div class="columns is-align-items-flex-end pl-0 pb-4 mt-4">
      <b-field class="column mb-0 pb-0" label="Modelo">
        <b-input
          placeholder="Nombre de la modelo"
          type="text"
          @keyup.enter.native="warning()"
          v-model="modelo"
          rounded
        />
      </b-field>

      <BotonCrear columnSize="is-4" :disabled="!modelo" :crear="warning" />
    </div>

    <b-collapse
      animation="slide"
      aria-id="contentIdForA11y3"
      class="card"
      v-model="activo"
    >
      <template #trigger>
        <div
          aria-controls="contentIdForA11y3"
          class="card-header"
          role="button"
          :aria-expanded="activo"
        >
          <p class="card-header-title">
            Tabla de modelos de {{ tipo === 'e' ? 'equipos' : 'carritos' }}
          </p>

          <a class="card-header-icon">
            <b-icon :icon="activo ? 'menu-down' : 'menu-up'" />
          </a>
        </div>
      </template>

      <TablaOpcionesCreadas
        v-if="activo"
        :data="modelos"
        :columnaModeloC="true"
      />
    </b-collapse>
  </div>
</template>

<script>
import axios from 'axios'
import BotonCrear from '@/components/botones/BotonCrear'
import TablaOpcionesCreadas from '@/components/admin/TablaOpcionesCreadas'

export default {
  components: { BotonCrear, TablaOpcionesCreadas },
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
    tipo: { type: String, required: true, default: '' },
  },
  data() {
    return { activo: false, modelos: [], modelo: '' }
  },
  methods: {
    obtenerModelos() {
      return axios
        .get(
          `${process.env.api}/modelo?tipo=${this.tipo}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.modelos = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    crearModelo() {
      const data = {
        modelo: this.modelo,
        tipo: this.tipo,
      }

      this.updateIsLoading(true)
      return axios
        .post(`${process.env.api}/modelo/`, data, this.$getToken.token())
        .then((res) => {
          this.modelo = ''
          this.obtenerModelos()
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.$alertsGenericos.imprimirError(
            this.$buefy,
            this.$router,
            err.response.data
          )
        })
    },
    warning() {
      if (this.modelo)
        this.$alertsGenericos.imprimirWarning(
          this.$buefy,
          `¿Está segur@ de querer crear este modelo de ${
            this.tipo === 'e' ? 'equipo' : 'carrito'
          }?`,
          this.crearModelo
        )
    },
  },
  created() {
    this.obtenerModelos()
  },
}
</script>
