<template>
  <form name="form">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="exampleInputPassword1">Cliente</label>
            <input type="text" class="form-control" name="cliente" v-model="contestacao.cliente" placeholder="Nome do Cliente">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">CPF do Cliente</label>
            <input type="cpf" class="form-control" name="cpf" v-model="contestacao.cpf" placeholder="CPF do Cliente">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Banco</label>
            <input type="text" class="form-control" name="banco" v-model="contestacao.banco" placeholder="Banco">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Número do Contrato</label>
            <input type="cpf" class="form-control" name="numero_contrato" v-model="contestacao.numero_contrato" placeholder="Número do Contrato">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Valor do Contrato</label>
            <input type="cpf" class="form-control" name="valor_contrato" v-model="contestacao.valor_contrato" placeholder="Valor do Contrato">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Unidade</label>
            <input type="text" class="form-control" name="unidade" v-model="contestacao.unidade" placeholder="Unidade">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">UF</label>
            <input type="cpf" class="form-control" name="uf" v-model="contestacao.uf" placeholder="UF">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Agente</label>
            <input type="cpf" class="form-control" name="tipo_agente" v-model="contestacao.tipo_agente" placeholder="Tipo do Agente">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Nome do Agente</label>
            <input type="cpf" class="form-control" name="nome_agente" v-model="contestacao.nome_agente" placeholder="Nome do Agente">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">Tipo da Contestação</label>
            <input type="text" class="form-control" name="unidade" v-model="contestacao.tipo_contestacao" placeholder="Tipo da Contestação">
        </div>
        <div class="form-group col-md-3">
            <label for="exampleInputPassword1">E-mail</label>
            <input type="cpf" class="form-control" name="email" v-model="contestacao.email" placeholder="E-mail">
        </div>
    </div>
      <button type="button" class="btn btn-success waves-effect waves-light" @click.prevent="editar" v-if="id">Editar</button>
      <button type="button" class="btn btn-info waves-effect waves-light" @click.prevent="cadastrar" v-else>Cadastrar</button>
  </form>
</template>

<script>
export default {
  props:{
    id: {
      default: null
    }
  },
  data(){
    return {
      contestacao:{}
    }
  },
  watch: {
      id(getID){
        if(getID){
          axios.get('api/contestacoes/'+getID)
            .then( res => {
              this.contestacao = res.data
            })
        }else{
          this.contestacao = {}
        }
      }
  },
  methods: {
    fecharModal(){
      $('#exampleModal').modal('hide');
    },
    cadastrar() {
      axios.post('api/contestacoes', this.contestacao)
        .then( res => {
          this.mensagens.push(res.data)
          this.fecharModal();
      })
    },
    editar() {
      axios.put('api/contestacoes/'+this.id, this.contestacao)
        .then( res => {
            this.$emit('editar', res.data)
            this.fecharModal();
        })
    },

  }
}
</script>