<template>
  <v-app-bar>
      <v-app-bar-title>Hello</v-app-bar-title>
      <v-spacer />
      <v-btn @click="toggleTheme">
        <v-icon>ph:sun</v-icon>
        toggle thema</v-btn>
    </v-app-bar>
  <VContainer class="central">
    <v-alert
        class="mb-5"
        v-model="alert.alert"
        closable
        type="success"
    >
      This is a success alert that is closable.
    </v-alert>
      <VCard width="850" class="ma-auto">
          <VCardTitle class="text-center">
              {{ title }}
          </VCardTitle>
          <VCardText>
              <VForm 
              ref="form"
              @submit.prevent="form_proses">
                  <v-container>
                      <v-row justify="space-around">
                          <v-col cols="12" md="6">
                              <v-text-field
                              name="Idx_daftar"
                              v-model="payload.Idx_daftar"
                              label="Idx daftar"
                              ></v-text-field>
                            </v-col>
                            <v-col cols="12" md="6">
                                <v-text-field
                                name="Kode_dokter"
                                v-model="payload.Kode_dokter"
                                label="Kode dokter"
                                ></v-text-field>
                            </v-col>
                        </v-row>
                      <v-row justify="space-around">
                          <v-col cols="12" md="6">
                              <v-text-field
                              name="Kode_dpjp"
                              v-model="payload.Kode_dpjp"
                              label="Kode dpjp"
                              ></v-text-field>
                          </v-col>
                          <v-col cols="12" md="6">
                              <v-text-field
                              name="Kode_poli"
                              v-model="payload.Kode_poli"
                              label="Kode poli"
                              ></v-text-field>
                          </v-col>
                      </v-row>
                      <VBtn
                  variant="tonal"
                  type="submit"
                  block>
                  U B A H
                  </VBtn>
                  </v-container>
              </VForm>
          </VCardText>
      </VCard>
  </VContainer>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect } from "vue";
import { useTheme } from "vuetify";
import { VForm } from 'vuetify/components';
import { storeToRefs } from "pinia";
import {useSubspesialisStorePost} from "@/stores/users"

const theme = useTheme();

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
}

const {data_edit} = storeToRefs(useSubspesialisStorePost());
console.log(data_edit.value)

const payload = reactive({
    Idx_daftar: '',
    Kode_dokter: '',
    Kode_dpjp: '',
    Kode_poli: '',
}) 

const alert = reactive({
    alert:false
})

watchEffect(() => {
    if (data_edit.value) {
        payload.Idx_daftar = data_edit.value.Idx_daftar || '';
        payload.Kode_dokter = data_edit.value.Kode_dokter || '';
        payload.Kode_dpjp = data_edit.value.Kode_dpjp || '';
        payload.Kode_poli = data_edit.value.Kode_poli || '';
    }
})


// console.log(form);
const load = ref(false);
// console.log(data_edit)

const form_proses = async() => {
    if(data_edit.value){
        alert.alert=true
        console.log("proses edit dijalankan")
        //navigateTo(`/`)
    }else{
        alert.alert=true
        console.log("proses tambah yang dijalankan")
        //navigateTo(`/`)
    }
}
const title = computed(()=>data_edit.value ? 'UBAH DATA' : "TAMBAH DATA")
</script>

<style>

</style>