<template>

   <div>

          <div class="regpatient" >

                <h1 id="pl">REGISTER NEW PATIENT</h1>

                <hr>

                <div class="formm" style="margin-left:6em; margin-top:2em;">

                      <form @submit="fs" enctype=multipart/form-data>

                    <ul>

                        <li>

                            <label for="fname" class="label" >Name:</label><br>

                            <input type="text"   v-model="patientname"   id="fname" name="patientname" class="inputfield" required><br><br>

                        <li>

                            <label for="fname" class="label">age:</label><br>

                            <input type="text"    v-model="age"   id="fname" name="age" class="inputfield"><br><br>

                        </li>

                        <li>

                            <label for="fname" class="label">Adhar no:</label><br>

                            <input type="text"  v-model="patientadno" id="fname" name="patientadno" class="inputfield"><br><br>

                        </li>

                        <li>

                            <label for="fname" class="label">Ph no:</label><br>

                            <input type="text"  v-model="phno" id="fname" name="phno" class="inputfield">

                        </li>

                        <!-- <li>

                            <label for="fname" class="label upload">Upload prescription:</label>

                            <input type="file" id="myFile" name="reportt" class="inputfield" ><br><br>

                        </li> -->

                        <li>

                        </li>

                    </ul>

                     <input type="submit" value="Submit" name="patient" class="signup">

                </form>

                </div>

            </div>

            <vue-instant-loading-spinner ref="Spinner"></vue-instant-loading-spinner>

   </div>

</template>

<script>

//import PostsService from "@/services/apiService";

import VueInstantLoadingSpinner from "vue-instant-loading-spinner/src/components/VueInstantLoadingSpinner.vue";

import axios from "axios";

export default {

    name: "regpatient",

    data (){

        return{

            objj: {

                x:1

            },

            patientname: '',

            age: '',

            patientadno: '',

            phno: '',

        }

    },

      components: {

    VueInstantLoadingSpinner

  },

    methods: {

        fs(e)

        { 

             this.objj.y= this.age

            e.preventDefault();

            console.log("submit pressed")

            const newTodo = {

                name: this.patientname,

                age : this.age ,

                adharNo : this.patientadno ,

                phNo : this.phno ,

            }

            console.log(newTodo)

            //construct object and emmit to parent

            // this.$emit('add-todo', newTodo);

            axios.post('http://localhost:8080/registerPatient', {

                     name: this.patientname,

                age : this.age ,

                adharNo : this.patientadno ,

                phNo : this.phno ,

                 })

            .then(res => this.objj = res.data)

            //this.objj = res.data

            .catch(e => {

            this.errors.push(e)

            })

        },

    //  created(){

    //      axios.get('https://jsonplaceholder.typicode.com/todos')

    //      .then(res => console.log(res))

    //      .catch(err => console.log(err))

    //  }

    }

}

</script>

<style scoped>

.regpatient

{

    background-color: white;

    height: 480px;

    width: 500px;

     border-radius: 25px;

  padding: 2em;

    margin: 5em auto;

  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}

.signup{

    background-color: #126597; /* Green */

  border: none;

  color: white;

  padding: 12px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  /* margin: 4px 2px; */

  margin-left: 6em;

  margin-top: 1.1em;

  cursor: pointer;

  border-radius: 12px;

  width: 100px;

  font-weight: bold;

}

#pl{

    text-align: center;

}

.inputfield {

       width: 15em;

    padding: 0.8em;

    /* border-radius: 0.5em; */

    border: none;

    border-bottom: 1px solid black;

}

ul,li{

    list-style-type: none;

    text-align: left;

}

</style>