<template>
  <v-app>
    <v-toolbar dark color="blue darken-3">
      <v-toolbar-title class="white--text">SKIV</v-toolbar-title>
    </v-toolbar>
    <v-container grid-list-md text-xs-center>
      <v-layout align-center justify-center row>
        <v-dialog v-model="dialog" persistent max-width="290">
          <v-card class="elevation-12">
            <v-toolbar dark color="primary">
              <v-toolbar-title>Masukkan Identitas Anda</v-toolbar-title>
            </v-toolbar>
            <v-card-text>
              <v-text-field v-model="data.nama" prepend-icon="person" label="Nama" type="text"></v-text-field>
              <v-text-field v-model="data.passport" prepend-icon="card_membership" label="Passport" type="text">
              </v-text-field>
              <v-menu ref="menu" v-model="menu" :close-on-content-click="false" :nudge-right="40" lazy
                transition="scale-transition" offset-y full-width min-width="290px">
                <template v-slot:activator="{ on }">
                  <v-text-field v-model="data.tanggal_lahir" label="Tanggal Lahir" prepend-icon="event" readonly
                    v-on="on">
                  </v-text-field>
                </template>
                <v-date-picker ref="picker" v-model="data.tanggal_lahir" :max="new Date().toISOString().substr(0, 10)"
                  min="1950-01-01" @change="saveDate"></v-date-picker>
              </v-menu>
              <v-text-field v-model="data.tempat_lahir" prepend-icon="place" label="Tempat Lahir" type="text">
              </v-text-field>
              <v-text-field v-model="data.pekerjaan" prepend-icon="work" label="Pekerjaan" type="text">
              </v-text-field>
              <v-select :items="jk" v-model="data.jenis_kelamin" prepend-icon="perm_identity" label="Jenis Kelamin">
              </v-select>
              <v-text-field v-model="data.nomor_telpon" prepend-icon="call" label="No Telpon" type="text">
              </v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" @click="dialog = false">Lanjut</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-card>
          <v-form ref="form" @submit.prevent="save()">
            <v-data-table :headers="headers" :items="questions" class="elevation-1" hide-actions>
              <template v-slot:items="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-left">{{ props.item.list_question }}</td>
                <td>
                  <v-radio-group v-model="data.pemeriksaan[props.item.id-1]" column>
                    <v-radio label="YA" color="blue" value=1></v-radio>
                    <v-radio label="TIDAK" color="blue" value=0></v-radio>
                  </v-radio-group>
                </td>
              </template>
            </v-data-table>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="success" type="submit">save</v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
  export default {
    data() {
      return {
        dialog: true,
        menu: false,
        headers: [
          {
            text: 'No.',
            sortable: false,
            align: 'center',
            value: 'id'
          },
          {
            text: 'Pertanyaan',
            sortable: false,
            align: 'center',
            value: 'list_question'
          },
          {
            text: 'Jawaban',
            sortable: false,
            align: 'center',
            value: ''
          },
        ],
        jk: ['Laki-laki', 'Perempuan'],
        data: {
          nama: '',
          passport: '',
          tanggal_lahir: null,
          tempat_lahir: '',
          pekerjaan: '',
          jenis_kelamin: '',
          nomor_telpon: '',
          pemeriksaan: [],

        },
        questions: [],
      }
    },
    created() {
      this.initialize()
    },
    watch: {
      menu(val) {
        val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
      }
    },
    methods: {
      initialize() {
        axios.get('/question')
          .then((res) => {
            this.questions = res.data;
            this.data.pemeriksaan = Array(res.data.length).fill(null)

          }).catch((err) => {
            console.log(err.message);
          })
      },
      save() {
        if (this.data.nama != null && this.data.passport != null && this.data.tanggal_lahir != null && this.data
          .tempat_lahir != null && this.data.pekerjaan != null && this.data.jenis_kelamin !== null && this.data.nomor_telpon !== null) {
          if (this.data.pemeriksaan.includes(null) == false) {
            axios.post('/pasien', this.data)
              .then((res) => {
                console.log('pasien berhasil ditambahkan');
              }).catch((err) => {
                console.log(err.message);
              })
            axios.post('/hasil', this.data)
              .then((res) => {
                console.log('pemeriksaan berhasil ditambahkan');
              }).catch((err) => {
                console.log(err.message);
              })
            this.$router.go('/')
          } else {
            alert('ada data yang belum terisi')
          }
        } else {
          alert('data identitas tidak boleh kosong. Anda harus mengisi semua data')
          this.$router.go('/')

        }
      },
      saveDate(tanggal_lahir) {
        this.$refs.menu.save(tanggal_lahir)

      }
    }
  }

</script>