<template>
  <el-card class="box-card">
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-form ref="addValidateForm"
        :model="formAddPaciente"
         label-position="left"
         label-width="100px">
         <el-form-item label="Nome" prop="nomePaciente">
           <el-input v-model="formAddPaciente.nomePaciente" ></el-input>
         </el-form-item>
         <el-form-item label="Médico Responsável" prop="nomeMedico">
           <el-input v-model="formAddPaciente.nomeMedico" ></el-input>
         </el-form-item>
         <el-form-item label="Data de Nascimento" prop="dataDeNascimento">
           <el-date-picker
             v-model="formAddPaciente.dataSelecionada"
             type="date"
             format="dd/MM/yyyy"
            width="120px">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="Causa da Internação" prop="causaDaInternacao">
           <el-input v-model="formAddPaciente.causaDaInternacao" ></el-input>
         </el-form-item>
          <el-form-item label="Hospital" prop="telefone">
            <el-input v-model="formAddPaciente.telefone" ></el-input>
          </el-form-item>
          <el-form-item label="Foto" prop="foto">
            <file-base64
                v-bind:multiple="true"
                v-bind:done="getFiles"
                v-model="formAddPaciente.foto">
            </file-base64>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addPaciente()">Cadastrar Paciente</el-button>
            <el-button>Cancelar</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import api from '../axios'
import { mapState, mapGetters } from 'vuex'
import fileBase64 from 'vue-file-base64'
import moment from "moment"

export default{
  components: {
    fileBase64
  },
  data(){

    return {
      formAddPaciente:{
            nomePaciente: '',
            nomeMedico:'',
            dataSelecionada:'',
            dataDeNascimento:'',
            causaDaInternacao:'',
            telefone: '',
            numeroDoProntuario: 2222,
            foto:null,
          }
    }
  },

  computed:{
    ...mapGetters(['idMedico'])
  },

  methods:{

    getFiles(files){

      this.formAddPaciente.foto = files[0].base64  // Pego a posição referente a base64
      this.formAddPaciente.foto = this.formAddPaciente.foto.split(',') // Transformo ela em uma base64 válida
      this.formAddPaciente.foto = this.formAddPaciente.foto[1] // Pego a posição 1 do array

    },

    addPaciente: function(){

      let dados = this.formAddPaciente;
      dados.idMedico = this.idMedico;
      dados.dataDeNascimento = dados.dataSelecionada.toJSON().substring(0, 10);
      // let teste = this.files.base64;
      console.log(dados);

      if(dados.nomePaciente ==''|| dados.telefone ==''|| dados.nomeMedico ==''|| dados.senha ==''|| dados.dataDeNascimento ==''|| dados.causaDaInternacao == '')
      {
        this.$message({
          type:'info',
          message:'Preencha todos os campos!',
          showClose: true,
          duration: 2000
        })

      } else {


      api.addPaciente(dados).then(({
          data
      }) => {
          if (data) {
              this.$message({
                  type: 'success',
                  message: 'Paciente cadastrado com sucesso.',
                  showClose: true,
                  duration: 2000
              })

          } else {
              this.$message({
                  type: 'info',
                  message: 'Erro no cadastro do paciente.',
                  showClose: true,
                  duration: 2000
              })

          }

      }).catch((err) => {
          console.log(err);
      })
    }
    }
  }
}
</script>

<style>
  .el-date-picker{
    min-width: 320px;
  }
  .el-date-editor.el-input{
    width: 297px;
  }
</style>