<template>
  <div>
    <div class="row">
      <card class="col-8">
        <el-table
          :data="
            compras.filter(
              (data) =>
                !search ||
                data.detalle.toLowerCase().includes(search.toLowerCase()) ||
                data.fecha.toLowerCase().includes(search.toLowerCase()) ||
                data.metodo_pago.toLowerCase().includes(search.toLowerCase()) ||
                data.categoria.toLowerCase().includes(search.toLowerCase())
            )
          "
          border
          height="900"
        >
          <el-TableColumn prop="fecha" label="Fecha" sortable> </el-TableColumn>
          <el-TableColumn prop="detalle" label="Detalle" sortable>
          </el-TableColumn>
          <el-TableColumn prop="valor" label="Valor" sortable> </el-TableColumn>

          <el-TableColumn prop="metodo_pago" label="Metodo de pago" sortable>
          </el-TableColumn>

          <el-TableColumn prop="categoria" label="Categoria" sortable>
          </el-TableColumn>
          <el-TableColumn label="Actions" sortable>
            <div slot-scope="{ row, $index }">
              <el-tooltip content="Delete" effect="light">
                <base-button
                  type="danger"
                  icon
                  size="sm"
                  class="btn-link"
                  @click="deleteCompra($index)"
                >
                  <i class="fas fa-trash"></i>
                </base-button>
              </el-tooltip>
              <el-tooltip content="Edit">
                <base-button
                  type="primary"
                  icon
                  size="sm"
                  class="btn-link"
                  @click="deleteCompra($index)"
                >
                  <i class="fas fa-edit"></i>
                </base-button>
              </el-tooltip>
            </div>

            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="Type to search"
              />
            </template>
          </el-TableColumn>
        </el-table>
      </card>

      <card class="col-4">
        <base-input
          label="Fecha"
          v-model="newCompra.fecha"
          type="Date"
        ></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.metodo_pago">
            <option v-for="metodo in metodos_pago">{{ metodo.metodo }}</option>
          </select>
        </base-input>
        <base-input label="categoría">
          <select class="form-control" v-model="newCompra.categoria">
            <option v-for="categoria in categorias">{{ categoria.ctg }}</option>
          </select>
        </base-input>
        <base-button type="primary" class="mb-3" size="lg" @click="saveCompra()"
          >Guardar</base-button
        >
      </card>
    </div>
  </div>
</template>
<script>
import { Table, TableColumn } from "element-ui";
import { Select, Option } from "element-ui";
export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Option.name]: Option,
    [Select.name]: Select,
  },
  data() {
    return {
      newCompra: {
        fecha: "",
        detalle: "",
        valor: 0,
        metodo_pago: "",
        categoria: "",
      },
      compras: [],
      search: "",
      metodos_pago: [
        {
          metodo: "Efectivo",
        },
        {
          metodo: "Tarjeta Credito",
        },
        {
          metodo: "Tarjeta Debito",
        },
      ],
      categorias: [
        {
          ctg: "Restaurante",
        },
        {
          ctg: "Servicios",
        },
        {
          ctg: "Transporte",
        },
      ],
    };
  },
  methods: {
    saveCompra() {
      var compra = JSON.stringify(this.newCompra);
      this.compras.push(JSON.parse(compra));
      console.log(compra);
    },
    deleteCompra(index) {
      this.compras.splice(index, 1);
      //console.log(index)
    },
  },
};
</script>

<style>
</style>