<template>
  <div id="app">
    <h1>Formulário Desafio</h1>
    <div class="conteudo">
      <form class="painel" v-if="!enviado">
        <div class="cabecalho">Formulário</div>
        <NomeCompleto v-model="usuario"></NomeCompleto>        
        <Rotulo nome="Email">
          <input type="email" v-model.trim="usuario.email" />
        </Rotulo>
        <Rotulo nome="Senha">
          <input type="password" v-model.trim="usuario.senha" />
        </Rotulo>
        <Rotulo nome="Armazenar dados?">
          <span class="mr-4"
            >Sim
            <input type="radio" value="true" v-model="saveData" />
          </span>
          <span class="mr-4"
            >Não
            <input type="radio" value="false" v-model="saveData" />
          </span>
        </Rotulo>
        <button @click.prevent="SalvarDados">Salvar</button>
      </form>
      <div v-else class="painel">
        <div class="cabecalho">Resultado</div>
        <Rotulo nome="Nome">
          <span>{{ usuario.nome }}</span>
        </Rotulo>
        <Rotulo nome="Sobrenome">
          <span> {{ usuario.sobrenome }} </span>
        </Rotulo>
        <Rotulo nome="Email">
          <span>{{ usuario.email }}</span>
        </Rotulo>
        <Rotulo nome="Senha">
          <span>{{ usuario.senha }}</span>
        </Rotulo>
        <Rotulo nome="Salvar Dados">
          <span>{{ saveData }} </span>
        </Rotulo>
      </div>
    </div>
  </div>
</template>
<script>
import Rotulo from './components/Rotulo.vue'
import NomeCompleto from './components/NomeCompleto.vue'
export default {
  name: 'app',
  components: { Rotulo, NomeCompleto },
  data() {
    return {
      usuario: {
        nome: '',
        sobrenome: '',
        email: '',
        senha: ''
      },
      enviado: false,
      saveData: false
    }
  },
  methods: {
    SalvarDados() {
      this.enviado = true;
    }
  },
}
</script>
<style>
body {
  background-color: #ececec;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
}
.conteudo {
  display: flex;
}
.painel {
  flex: 1;
  background: #fff;
  margin: 0px 10px;
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 5px;
}
.painel .cabecalho {
  width: 100%;
  background-color: #ddd;
  padding: 10px 0px;
  border-radius: 5px;
  font-size: 1.4rem;
}
#app form button {
  float: right;
  margin: 10px 0px;
  padding: 10px 20px;
  font-size: 1.4rem;
  border-radius: 5px;
  color: #fff;
  background-color: #2196f3;
}
#app h1 {
  font-weight: 200;
  margin: 20px;
  padding: 0;
}
.mr-4 {
  margin-right: 40px;
}
</style>