<script setup lang="ts">
// import { ref } from 'vue'
// import dataSample from '~/assets/data/coba.json'
const cari = ref()
const practitionerlist = ref([])
const loading = ref(false)
const data = async () => {
  try {
    loading.value= true
    const response = await fetch("/api/practitioner/list")
    const data = await response.json();
    // console.log(data)
    // console.log(response)
    practitionerlist.value = data
    // console.log(practitioners.value)
  } catch (error) {
    console.log(error)
  }finally{
    loading.value=false
  }
}
onMounted(() =>{
  setTimeout(() => {
    loading.value = false;
  }, 2000);
  loading.value= true
  data()
})
const Search = () => {
  // console.log(cari)
}
// onM
</script>

<template>
  <v-container fluid>
    <h1>Daftar Praktisi</h1>

    <v-row>
      <v-col class="mt-5">
        <v-text-field 
          v-model="cari"
          prepend-inner-icon="mdi-magnify"
          label="Search"
          variant="solo"
          style="width: 400px"
          @change="Search"
        />
      </v-col>
    </v-row>
    <v-row>
      <template v-if="loading">
        <v-col
          v-for="(practitioner, index) in practitionerlist"
          :key="index"
          cols="6"
          sm="6"
          md="3"
        >
      <v-skeleton-loader
        type="card"
        height="300"
        class="mx-auto"
      />
    </v-col>
      </template>
      <template v-else>
      <v-col
      v-for="(practitioner, index) in practitionerlist"
          :key="index"
          cols="6"
          sm="6"
          md="3"
      >
      <v-lazy
        :min-height="200"
        :options="{'threshold':0.5}"
        transition="fade-transition"
      >
        <v-card
          max-width="300"
          elevation="3"
          height="350"
          class="hover-card d-flex flex-column justify-space-between"
        
          shaped
        >
          <v-card-text class="text-center">
            <v-row justify="center" class="mt-2">
              <!-- <v-avatar v-if="practitioner.gender == ''" size="100">
                <v-img
                  alt="image"
                  src="https://cdn.vuetifyjs.com/images/john.png"
                />
              </v-avatar>
              <v-avatar v-else size="100">
                <v-img
                  alt="image"
                  src=""
                />
              </v-avatar> -->
              <DivAvatar
                        size="80"
                        class="mr-3"
                        :gender="practitioner.Jenis_kelamin == 'Laki-laki'? 'male':practitioner.Jenis_kelamin == 'Perempuan'?'female':''"
                      />
            </v-row>
            <!-- {{ console.log(practitioner.Jenis_kelamin) }} -->
            <v-row  class="justify-center">
              <div class="text-h6 mb-0 mx-4">{{ practitioner.nama_lengkap }}</div>
            </v-row>
            <v-row class="justify-center">
              <div>
                <div class="text-overline mb-1">Dokter | {{ practitioner.Jenis_kelamin }}</div>
                  <DivIconText
                      icon="mdi-map-marker"
                      :text="'Jl. Belakang Rumah Sakit Arief'"
                    />
                    <DivIconText
                      icon="mdi-calendar"
                      :text="'01-01-2000'"
                    />
                    <DivIconText
                      icon="mdi-phone"
                      :text="'081983293784'"
                    />
              </div>
            </v-row>
          </v-card-text>
          <v-card-actions  class="d-flex justify-end mb-2">
            <v-btn
              color="deep-purple-accent-4"
              variant="text"
            >Detail <v-icon small class="ml-1">mdi-arrow-right</v-icon></v-btn>
          </v-card-actions>
        </v-card>
      </v-lazy>
      </v-col>
    </template>
    </v-row>
  </v-container>
</template>
<style>
.hover-card:hover{
  transform: translateY(-10px);
}
</style>
