<template>
  <div>
    <card>
      <div class="row">
        <base-input class="col-6">
          <select class="form-control">
            <option>Presupuesto</option>
            <option>Presupuesto 2</option>
          </select>
        </base-input>

        <div class="row pull-right pull-buttom">
          <div class="col-12">
            <Fpresupuesto
              :newPresupuesto="newPresupuesto"
              :savePresupuesto="savePresupuesto"
            />
          </div>
        </div>
      </div>
    </card>
    <card title="Presupuesto">
      <div class="row">
        <div class="col-6">


          <el-table
          :data="selectedPresupuesto.datos"
          border
          empty-text="No hay items"
          stripe          
          style="width: 100%"
          height="300"
        >
          
          <el-TableColumn prop="detalle" label="Detalle" sortable>
          </el-TableColumn>
          <el-TableColumn prop="valor" label="Valor" sortable>
          </el-TableColumn>

          <el-TableColumn>
            <div slot-scope="{ row, $index }">
              
 
              <el-tooltip content="Delete" effect="light">
                <base-button
                  type="danger"
                  icon
                  size="sm"
                  class="btn-link"
                  @click="deleteIngreso(row._id)"
                >
                  <i class="el-icon-delete-solid"></i>
                </base-button>
              </el-tooltip>
            </div>
          </el-TableColumn>
        </el-table>

        </div>

        <div class="col-6">
          <base-input v-model="newItem.detalle"   label="Descripción">
          </base-input>
          <base-input v-model="newItem.valor" type="Number">
          </base-input>
           <base-input>
          <select class="form-control" v-model="newItem.tipo">
            <option>Ingreso</option>
            <option>Egreso</option>
          </select>
        </base-input>
       <base-button
            
            type="info"
            class="mb-3 col-12"
            size="lg"
            @click="addItem()"
            >Guardar</base-button
          >

        </div>
      </div>
    </card>

    <card>

      <div class="row">
        <div class="col-4">
          <b>Ingresos: </b> {{formatMoneda(totalIngresos)}}
        </div>
                <div class="col-4">
          <b>Egreso:</b> <span>{{formatMoneda(totalEgresos)}} </span>
        </div>
                <div class="col-4">
          <b>Total:<span :class="[total<0?'text-danger':'text-success']"> {{formatMoneda(total)}}</span></b>  
        </div>
      </div>
     
    </card>
  </div>
</template>

<script>
import { Table, TableColumn } from "element-ui";

export default {
   components: {
      
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
   },
  middleware: "authenticated",
  data() {
    return {
      newPresupuesto: {
        fecha: "",
        detalle: "",
      },
      selectedPresupuesto:{

        _id:"",
        fecha:"",
        nombrePresupuesto:"",
        datos:[]

      },
      newItem: {
        detalle:"",
        valor: 0,
        tipo:"Egreso"

      },

      presupuestos: [],
      totalIngresos:0,
      totalEgresos:0,
      total:0
    };
  },
  methods: {
    savePresupuesto() {},
    addItem() {
      this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
      this.sumItems()
    },
    sumItems(){

      this.totalIngresos=this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo ==="Ingreso"?acc + Number(x.valor):acc,0)

      this.totalEgresos = this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo==="Egreso"?acc + Number(x.valor):acc,0)
      this.total =  this.totalIngresos - this.totalEgresos

    },
        formatMoneda(dato) {
      var num = dato;
      if (!isNaN(num)) {
        num = Math.abs(num)
          .toString()
          .split("")
          .reverse()
          .join("")
          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
        num = num.split("").reverse().join("").replace(/^[\.]/, "");
        return `$ ${num}`;
      }
    },
  },
  mounted() {
    this.newPresupuesto.fecha = this.$store.state.fecha;
  },

};
</script>

<style>
</style>