<template>
    <div>
        <v-main>
          <v-container>
               <v-card title="List Surat Kontrol" flat>
                <div variant="outline">

                  <VForm v-model="valid" @submit.prevent="form_proses" :key="formkey">
                    <v-container >
                      <v-row>
                        <v-col cols="12" md="3">
                          <v-text-field
                          v-model="tanggal_awal"
                          label="Tanggal Awal"
                          type="date"
                          ></v-text-field>
                        </v-col>
                        
                        <v-col cols="12" md="3">
                          <v-text-field
                          v-model="tanggal_akhir"
                          label="Tanggal Akhir"
                          type="date"
                          ></v-text-field>
                        </v-col>
                      </v-row>
                      
                      <v-row>
                        <v-col cols="12" md="3">
                          <v-autocomplete 
                          label="Poliklinik"
                          v-model="poliklinik"
                          :items="subspesialis"
                          item-title="Subspesialis"
                          item-value="id"
                          dense
                          />
                        </v-col>
                        
                        <v-col cols="12" md="2">
                          <v-text-field 
                          v-model="noRM"
                          label="No RM" />
                        </v-col>
                        
                        <v-col cols="12" md="2">
                          <v-text-field 
                          v-model="noSEP"
                          label="No SEP" />
                        </v-col>
                      </v-row>
                      
                      
                      <VBtn
                      variant="tonal"
                      type="submit">
                      C A R I
                    </VBtn>
                    
                    <VBtn
                    class="text-none text-subtitle-1 pe-2"
                    color="#5865f2"
                    size="small"
                    variant="flat"
                    to="Surat-Kontrol/formSurkon" >
                    tambah
                  </VBtn>
                  
                </v-container>
              </VForm>
            </div>
        
        <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"></v-text-field>
        <v-data-table class="elevation-1" :headers="headers" :items="surkon.list_data" F :search="search">
          
          <template v-slot:item.action="{ item }" >
            <v-dialog v-model="dialog" max-width="750" >
              <template v-slot:activator="{ props: activatorProps }">
                <v-btn small v-bind="activatorProps" class="mr-2" @click="proses_edit(item)"><v-icon>mdi-pencil</v-icon>Edit</v-btn>
                <v-btn color="red" @click="modal_hapus(item)"><v-icon>mdi-delete</v-icon>Delete</v-btn>
              </template>
              
              
              <VCard width="750" class="ma-auto">
                <VCardTitle class="text-center">
                  Data Edit
                </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 :rules="[v => !!v || '*ID belum terisi']"
                            name="idxdaftar"
                            v-model="dataedit.idxdaftar"
                            label="idx daftar"
                            ></v-text-field>
                          </v-col>
                          
                          <v-col cols="12" md="6">
                            <v-text-field :rules="[v => !!v || '*No SEP belum terisi']"
                              name="noSEP"
                              v-model="dataedit.noSEP"
                              label="No.SEP"
                              ></v-text-field>
                            </v-col>
                          </v-row>
                          
                          <v-row>
                            <v-col cols="12" md="6">
                              <v-text-field :rules="[v => !!v || '*kode HFIS belum terisi']"
                                name="kodeHFIS"
                                v-model="dataedit.kodeHFIS"
                                label="kode HFIS"
                                ></v-text-field>
                              </v-col>
                              
                              <v-col cols="12" md="6">
                                <v-text-field :rules="[v => !!v || '*ID dokter belum terisi']"
                                  name="id_dokter"
                                  v-model="dataedit.id_dokter"
                                label="ID dokter"
                                ></v-text-field>
                              </v-col>
                            </v-row>
                            
                                      <v-row>
                                        <v-col cols="12" md="6">
                                          <v-text-field :rules="[v => !!v || '*kode Poli belum terisi']"
                                            name="kodePoli"
                                            v-model="dataedit.kodePoli"
                                            label="kode Poli"
                                            ></v-text-field>
                                          </v-col>
                                          
                                          <v-col cols="12" md="6">
                                            <v-text-field :rules="[v => !!v || '*Sub spesialis belum terisi']"
                                              name="subspesialis"
                                              v-model="dataedit.subspesialis"
                                              label="sub spesialis"
                                              ></v-text-field>
                                            </v-col>
                                          </v-row>
                                          
                                          <v-row>
                                            <v-col cols="12" md="6">
                                              <v-text-field :rules="[v => !!v || '*tanggal rencana kontrol belum terisi']"
                                                name="tglRencanaKontrol"
                                                v-model="dataedit.tglRencanaKontrol"
                                                label="tanggal rencana kontrol"
                                                ></v-text-field>
                                              </v-col>
                                              
                                              <v-col cols="12" md="6">
                                                <v-text-field :rules="[v => !!v || '*Nama Dokter belum terisi']"
                                                  name="user"
                                                  v-model="dataedit.user"
                                                  label="Nama Dokter"
                                                  ></v-text-field>
                                                </v-col>
                                              </v-row>
                                              
                                              <v-row>
                                                <v-col cols="12" md="6">
                                                  <v-text-field :rules="[v => !!v || '*kode diagnosa belum terisi']"
                                                    name="kode_diagnosa"
                                                    v-model="dataedit.kode_diagnosa"
                                                    label="kode diagnosa"
                                                    ></v-text-field>
                                                  </v-col>
                                                  
                                                  <v-col cols="12" md="6">
                                                    <v-text-field :rules="[v => !!v || '*Nama diagnosa belum terisi']"
                                                      name="nama_diagnosa"
                                                      v-model="dataedit.nama_diagnosa"
                                                      label="Nama Diagnosa"
                                        ></v-text-field>
                                      </v-col>
                                    </v-row>
                                    
                                    <v-row>
                                      <v-col cols="12" md="6">
                                        <v-text-field :rules="[v => !!v || '*tipe surkon belum terisi']"
                                          name="tipe_surkon"
                                          v-model="dataedit.tipe_surkon"
                                          label="tipe surkon"
                                          ></v-text-field>
                                        </v-col>
                                        
                                        <v-col cols="12" md="6">
                                          <v-text-field :rules="[v => !!v || '*tipe rawat belum terisi']"
                                            name="tipe_rawat"
                                            v-model="dataedit.tipe_rawat"
                                            label="tipe rawat"
                                            v-if="aksi == true"
                                            ></v-text-field>
                                          </v-col>
                                        </v-row>
                                        
                                        <v-row>
                                          <v-col col="12" md="6">
                                            <VBtn variant="tonal" @click="dialog.dialog=false" block> K E M B A L I </VBtn>
                                          </v-col>
                                          <v-col col="12" md="6">
                                            <VBtn variant="tonal" type="submit"block>S I M P A N</VBtn>
                                          </v-col>
                                        </v-row>
                                      </v-container>
                                    </VForm>
                            </VCardText>
                          </VCard>
                          
                        </v-dialog>   
                      </template>
                    </v-data-table>
                    
                  </v-card>
                </v-container>
              </v-main> 
            </div>
          
            
</template>
<script setup>

import { ref, reactive } from "vue";
import Swal from "sweetalert2";
import { storeToRefs } from "pinia";



const noRM = ref('');
const noSEP = ref('');
const tanggal_awal = ref('');
const tanggal_akhir = ref('');
const poliklinik = ref('');

// const itemsPerPage= 5;
const search = ref("");
const headers = [
  {
    align: 'start',
    key: 'name',
    sortable: false,
  },
  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
  { key: 'Nomor_sep', title: 'Nomor sep' },
  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
  { key: 'No_rm', title: 'Nomor Rekam Medik' },
  { key: 'NamaDokter', title: 'Nama Dokter' },
  { text: "", value: "action", title:'Aksi' },
];


const payload = {
  
    no_rm: "",
    no_sep: "",
    poliklinik: "",
    tanggal_awal: "",
    tanggal_akhir: "",
    tipe_surkon : "1",
    offset: "0",
  };

  const { surkon } = storeToRefs(useSurkonStorePost());
  const { loadSurKon } = useSurkonStorePost();


 const { subspesialis,loadSubspesialisData } = useSubspesialisStore();
  const headers2 = [
  {
    align: 'start',
    key: 'name',
    sortable: false,
  },
  { key: 'id', title: 'ID' },
  { key: 'Kode', title: 'Kode' },
  { key: 'Subspesialis', title: 'Subspesialis' },
  { key: 'FK_daftar_spesialis_ID', title: 'FK_daftar_spesialis_ID' },
  { key: 'Spesialis', title: 'Spesialis' },
  { text: "", value: "action" },
];


  const form_proses = async() => {
    payload.no_rm = noRM._value;
    payload.no_sep = noSEP._value;
    payload.tanggal_awal = tanggal_awal._value;
    payload.tanggal_akhir = tanggal_akhir._value;
    payload.poliklinik = poliklinik._value.toString();
    Swal.fire({

      title: 'Berhasil Menampilkan Data' ,
      icon: 'success',
      showConfirmButton: false,
      timer: 1000,
    })
    
    loadSurKon(payload);
  }
  

  onMounted(() => {
    loadSubspesialisData();
  });

  const dataedit = reactive({
    idxdaftar: '',
    noSEP: '',
    kodeHFIS: '',
    id_dokter: '',
    kodePoli: '',
    subspesialis: '',
    tglRencanaKontrol: '',
    user: '',
    kode_diagnosa: '',
    nama_diagnosa: '',
    tipe_surkon: '',
    tipe_rawat: '',
}) 
  const proses_edit = (item)=>{
    const {data_edit} = storeToRefs(useSurkonStorePost());
    
    const { proses_edit } = useSurkonStorePost();
    proses_edit(item);
    var aksi = false;
    watchEffect(() => {
    if (data_edit.value) {
        aksi=true;
        dataedit.idxdaftar = data_edit.value.Idx_daftar || '';
        dataedit.noSEP = data_edit.value.Nomor_sep || '';
        dataedit.kodeHFIS = data_edit.value.kodeHFIS || '';//?
        dataedit.id_dokter = data_edit.value.id_dokter || '';
        dataedit.kodePoli = data_edit.value.Kode_poli || '';
        dataedit.subspesialis = data_edit.value.Subspesialis || '';
        dataedit.tglRencanaKontrol = data_edit.value.Tanggal_rencana_kontrol || '';
        dataedit.user = data_edit.value.NamaDokter || '';
        dataedit.kode_diagnosa = data_edit.value.Kode_diagnosa || '';
        dataedit.nama_diagnosa = data_edit.value.Nama_diagnosa || '';
        dataedit.tipe_surkon = data_edit.value.Tipe_SurKon || '';
        dataedit.tipe_rawat = data_edit.value.tipe_rawat || '';//?
    }
})
}



const dialog = ref(false);
const hapusData = ref('');

const modal_hapus = (item) => {
 hapusData.value = item; 


}

const proses_hapus = () => {
  console.log("proses hapus")
  console.log(hapusData.value)
  // console.log(hapusData.value.id)
  dialog.dialog = false;
}
const tambah = reactive({
  dialog:false
})


</script>
