vuetify.js?ce5b:6508
Uncaught RangeError: Maximum call stack size exceeded.
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)
    at VueComponent.onFocusin (vuetify.js?ce5b:6508)

<template>
  <div>
    <v-toolbar :color="tab == 0 ? 'red' : 'green'" dark tabs>
      <v-toolbar-title>Categorias</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>

      <template v-slot:extension>
        <v-tabs v-model="tab" align-with-title :color="tab == 0 ? 'red' : 'green'">
          <v-tabs-slider color="white"></v-tabs-slider>

          <v-tab v-for="item in items" :key="item">{{ item }}</v-tab>
        </v-tabs>
      </template>
    </v-toolbar>

    <v-tabs-items v-model="tab">
      <v-tab-item v-for="item in items" :key="item">
        <v-card class="CardTable">
          <!-- <template> -->
            <!--<div>-->
              <v-toolbar flat id="TituloCategoria">
                <v-toolbar-title>Categorias ativas</v-toolbar-title>
                <!--<v-divider
                        class="mx-2"
                        inset
                        vertical
                ></v-divider>-->
                <v-spacer></v-spacer>
                <v-dialog v-model="dialog" max-width="500px">
                  <template v-slot:activator="{ on }">
                    <!--<v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>-->
                  </template>
                  <v-card>
                    <v-card-title>
                      <span class="headline">{{ formTitle }}</span>
                    </v-card-title>

                    <v-card-text>
                      <v-container grid-list-md>
                        <v-layout wrap>
                          <v-flex xs12>
                            <v-text-field v-model="Categoria.descricao" label="Nome"></v-text-field>
                          </v-flex>
                          <v-flex xs12>
                            <span>Ícone</span>
                            <v-spacer></v-spacer>
                            <v-icon>{{ Categoria.icone }}</v-icon>
                          </v-flex>
                          <v-spacer></v-spacer>

                          <v-flex>
                            <span>Cor</span>
                            <v-layout row>
                              <v-flex>
                                <v-radio-group row>
                                  <v-radio label="vermelho" color="red" value="red"></v-radio>
                                  <v-radio label="azul" color="blue" value="blue"></v-radio>
                                  <v-radio label="laranja" color="orange" value="orange"></v-radio>
                                  <v-radio label="roxo" color="purple" value="purple"></v-radio>
                                  <v-radio label="verde" color="green" value="green"></v-radio>
                                  <v-radio label="preto" color="black" value="black"></v-radio>
                                  <v-radio label="cinza" color="grey" value="grey"></v-radio>
                                  <v-radio label="rosa" color="pink" value="pink"></v-radio>
                                  <v-radio label="indigo" color="indigo" value="indigo"></v-radio>
                                  <v-radio label="amarelo" color="yellow" value="yellow"></v-radio>
                                </v-radio-group>
                              </v-flex>
                            </v-layout>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-card-text>

                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="blue darken-1" flat @click="close">Cancelar</v-btn>
                      <v-btn color="blue darken-1" flat @click="save">Salvar</v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </v-toolbar>
              <v-data-table
                :headers="headers"
                :loading="loadingItemsExibidos"
                :items="itemsExibidos"
                item-key="id"
                hide-actions
              >
                <template v-slot:items="props">
                  <td>{{ props.item.descricao }}</td>

                  <td class="text-xs-left">
                    <v-icon>{{ props.item.icone }}</v-icon>
                  </td>
                  <td class="text-xs-left">
                    <v-avatar size="20px" :color="props.item.cor"></v-avatar>
                  </td>
                  <td class="justify-right layout px-0">
                    <v-btn flat small fab>
                      <v-icon flat small @click="editItemCategoria(props.item)" class="mr-2">edit</v-icon>
                    </v-btn>
                    <v-btn flat small fab>
                      <v-icon flat small @click="deleteCategoria(props.item)">delete</v-icon>
                    </v-btn>
                  </td>
                </template>
              </v-data-table>
           <!-- </div> -->
         <!-- </template> -->
        </v-card>
      </v-tab-item>
    </v-tabs-items>

    <v-snackbar :timeout="2500" v-model="snackbar" :top="true" :right="true">
      <v-progress-circular indeterminate color="primary"></v-progress-circular>Aguarde um momento...
    </v-snackbar>
    <v-snackbar
      :timeout="2500"
      :color="'success'"
      v-model="snackbarOK"
      :top="true"
      :right="true"
    >{{messageResponse}}</v-snackbar>
    <v-snackbar
      :timeout="2500"
      :color="'error'"
      v-model="snackbarError"
      :top="true"
      :right="true"
    >{{errorResponse}}</v-snackbar>
  </div>
</template>


<script>
import ClassCategoria from "../../class/categoria";
export default {
  name: "Categorias",
  data: () => ({
    dialog: false,
    Categoria: undefined,
    tab: 0,
    messageResponse: "",
    errorResponse: "",
    snackbar: false,
    snackbarOK: false,
    snackbarError: false,
    items: ["DESPESAS", "RECEITAS"],
    headers: [
      {
        text: "Nome",
        align: "left",
        sortable: false,
        value: "descricao"
      },
      { text: "Ícone", value: "icone" },
      { text: "Cor", value: "cor" },
      { text: "Ações", value: "descricao", sortable: false }
    ],
    loadingItemsExibidos: false,
    itemsExibidos: [],
    editedIndex: -1,
    editedItem: {
      descricao: "",
      icone: "",
      cor: ""
    }
  }),
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "Nova categoria" : "Editar categoria";
    }
  },
  watch: {
    tab(val) {
      //console.log('tabs', val)
      if (val == 0) {
        this.getCategorias(0);
      } else {
        this.getCategorias(1);
      }
    }
  },
  created() {
    //this.initialize()
    this.Categoria = new ClassCategoria();
  },
  mounted() {
    this.getCategorias(0);
  },
  methods: {
    initialize() {
      this.itemsExibidos = [
        {
          name: "Aluguel",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          icon: "home"
        },
        {
          name: "Transporte",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          icon: "directions_car"
        },
        {
          name: "Gasolina",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          icon: "local_gas_station"
        },
        {
          name: "Alimentação",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          icon: "restaurant"
        },
        {
          name: "Pagamentos",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          icon: "payment"
        }
      ];
    },
    async getCategorias(tipo) {
      this.itemsExibidos = [];
      await this.Categoria.getByTipo(tipo).then(result => {
        //console.log(result);
        this.itemsExibidos = result;
      });
    },
    editItemCategoria(item) {
      console.log(item);
      this.editedIndex = this.itemsExibidos.indexOf(item);
      this.Categoria = Object.assign(new ClassCategoria(), item);
      this.dialog = true;
    },
    async deleteCategoria(item) {
      const index = this.itemsExibidos.indexOf(item);
      confirm("Tem certeza que deseja excluir essa categoria?") &&
        this.itemsExibidos.splice(index, 1);
    },
    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    save() {
      this.snackbar = true;
      this.Categoria.save().then(
        result => {
          this.snackbar = false;
          this.snackbarOK = true;
          this.messageResponse = result;
          this.close();
        },
        erro => {
          this.snackbar = false;
          this.snackbarError = true;
          this.errorResponse = result;
          this.close();
        }
      );
    }
  }
};
</script>

<style>
.CardTable {
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  background-color: #000;
  transform: translateY(0);
  transition: all 0.3s;
  border-radius: 15px;
  margin: 20px;
}
#TituloCategoria {
  background-color: #e1e1e1 !important;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
</style>