<template>
  <div class="fixed-plugin" v-click-outside="closeDropDown">
    <div class="dropdown show-dropdown" :class="{show:isOpen }">
      <a data-toggle="dropdown" class="settings-icon">
        <i class="fa fa-plus fa-2x" @click="toggleDropDown"> </i>
      </a>
      <span class="dropdown-menu" :class="{ show: isOpen }">
       <card>
       
          <template slot="header">
          <img v-if="isUpdate === false" src="img//card-primary.png" alt="" />
          <img v-else src="img//card-info.png" alt="" />          
        </template>
          <base-input
            label="Fecha"
            v-model="newCompra.fecha"
            type="Date" required
            
          ></base-input>
          <base-input
            label="Descripcion"
            v-model="newCompra.detalle"
            
          ></base-input>
          <base-input
            label="Valor"
            type="Number"
            v-model="newCompra.valor"
          ></base-input>
          <base-input label="Metodo de pago">
            <select class="form-control" v-model="newCompra.metodopago" >
              <option v-for="metodo in metodos_pago">
                {{ metodo.name }}
              </option>
            </select>
          </base-input>
          <base-input label="categoría">
            <select class="form-control" v-model="newCompra.categoria">
              <option v-for="categoria in categorias">
                {{ categoria.name}}
              </option>
            </select>
          </base-input>
          <base-button v-if="isUpdate === false"
            type="primary"
            class="mb-3 col-12"
            size="lg"
            @click="saveCompra()"
            >Guardar</base-button>

          <base-button v-else
            type="info"
            class="mb-3 col-12"
            size="lg"
            @click="updateCompra(newCompra._id)"
            >Actualizar</base-button>

       
        </card>
      </span>
    </div>
  </div>
</template>

<script>
import Card from '../Cards/Card.vue';
export default {
  components: { Card },
  name: "Fcompras",
  props: ["categorias", "metodos_pago", "newCompra", "saveCompra","isUpdate","updateCompra"],
  data() {
    return {
      isOpen: this.openForm      
    };
  },
  methods: {
    toggleDropDown() {
      this.isOpen = !this.isOpen;
    },

    closeDropDown() {
      this.isOpen = false;
    },
  },
};
</script>

<style scoped lang="scss">
.settings-icon {
  cursor: pointer;
}

.badge-vue {
  background-color: #ffffff;
}

.color_fondo {
  background-color: #ffffff;
}
</style>