<template>
  <div >
  
      <v-card class="mb-3">
        <v-card-text>
             <div class="d-flex">
              <v-text-field
            v-model="value"
            label="Ketikkan pencarian pasien"
            placeholder="Mulai mengetik lalu tekan enter..."
            :loading="loading"
            hint="NAMA + DOB (DD-MM-YYYY) + NIK + HP"
            hide-details="auto"
            class="me-auto pr-3"
            density="compact"
          >
        </v-text-field>
    

        <v-btn-toggle
        v-model="type_card"
        variant="outlined"
        divided
        class="mt-1"
        density="compact"

      >
        <v-btn >
          <v-icon size="x-large"  icon="mdi-badge-account"></v-icon>
        </v-btn>

        <v-btn>
          <v-icon size="x-large"  icon="mdi-book-account"></v-icon>
        </v-btn>
      </v-btn-toggle>
            </div>
          
        </v-card-text>
      </v-card>
      <v-card border="xl" variant="outlined" class="scroll-container pa-2" style="height:70vh">
      <v-card
          class="mb-3"
          subtitle="AAE0033398"
          color="orange-lighten-5"
          dark
          prepend-avatar="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
        >

          <template v-slot:title>
            <span class="text-subtitle-1 font-weight-bold">Fajri Hardhita M</span>
          </template>
          <template v-slot:append>
            <v-btn
              class="ma-2 text-none"
              color="success"
              label
              v-show="type_card == 1"
              size="small"
              variant="tonal"
            >
              <v-icon icon="mdi-check" start></v-icon>
              Telah dipilih
            </v-btn>
        </template>
   
          <v-divider></v-divider>
          <v-card-text class="pt-1 pl-0 ml-0 mb-0 pb-0 pr-2">
            <div class="d-flex justify-start no-gutters">
              <v-chip
            class="ma-2"
            color="pink"
            label
            
            size="small"
          >
            <v-icon icon="mdi-label" start></v-icon>
            Tags
          </v-chip>

          <v-chip
            class="ma-2"
            color="primary"
            label
            size="small"
          >
            <v-icon icon="mdi-account-circle-outline" start></v-icon>
            John Leider
          </v-chip>
          <v-chip
            class="ma-2"
            color="cyan"
          size="small"
            label
          >
            <v-icon icon="mdi-twitter" start></v-icon>
            New Tweets
          </v-chip>
            </div>
            <v-card v-show="type_card == 0" class="ml-2 mb-0 mr-0 pr-0"
              variant="tonal"
              density="compact"
              color="blue-grey-lighten-1"
              text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
            ></v-card>

          </v-card-text>
          <v-card-actions v-show="type_card == 0">
            <v-btn
            color="success"
            prepend-icon='mdi-check'
            class="text-none"
            block
            text="Pasien telah dipilih"
            variant="tonal"
          ></v-btn>
          </v-card-actions>
        </v-card>
        <v-card
          class="mb-3"
          subtitle="AAE0033398"
        
          prepend-avatar="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
        >

          <template v-slot:title>
            <span class="text-subtitle-1 font-weight-bold">Fajri Hardhita M</span>
          </template>
          <template  v-slot:append >
            <v-btn
              v-show="type_card == 1"
              class="ma-2 text-white text-none"
              color="blue-lighten-2"
              label
              size="small"
              variant="elevated"
            >
              Pilih pasien
            </v-btn>
        </template>
          <v-divider></v-divider>
          <v-card-text class="pt-1 pl-0 ml-0 mb-0 pb-0 pr-2">
            <div class="d-flex justify-start no-gutters">
              <v-chip
            class="ma-2"
            color="pink"
            label
            size="small"
          >
            <v-icon icon="mdi-label" start></v-icon>
            Tags
          </v-chip>

          <v-chip
            class="ma-2"
            color="primary"
            label
            size="small"
          >
            <v-icon icon="mdi-account-circle-outline" start></v-icon>
            John Leider
          </v-chip>
          <v-chip
            class="ma-2"
            color="cyan"
          size="small"
            label
          >
            <v-icon icon="mdi-twitter" start></v-icon>
            New Tweets
          </v-chip>
            </div>
            <v-card class="ml-2 mb-0 mr-0 pr-0"
              variant="tonal"
              v-show="type_card == 0"
              density="compact"
              text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!"
            ></v-card>

          </v-card-text>
          <v-card-actions v-show="type_card == 0">
            <v-btn
              color="blue-lighten-2"
              text="Pilih pasien"
              class="text-none"
              block
              border
              @click="reserve"
            ></v-btn>
          </v-card-actions>
        </v-card>
        <v-divider class="mt-2 mb-2"></v-divider>
        <v-card>
          <v-btn
              color="orange-lighten-3"
              text="Tampilkan lebih banyak"
              class="text-none"
              block
              border="5px"
            ></v-btn>
        </v-card>
      </v-card>

      <!--<v-data-table-server
        :headers="headers"
        :items="patients"
        :items-per-page="itemperpage"
        :sort-by="sortby"
        height="47vh"
        fixed-header
        :loading="loading"
        @update:sort-by="handleSort"
      >
        <template v-slot:top>
          <div class="d-flex align-center mb-2">
            <v-sheet style="width: 100%" class="pr-2">
              <v-text-field
                variant="outlined"
                v-model="search"
                placeholder="Ketikkan kata pencarian"
                label="Cari"
                hint="Nama+NIK+DOB+HP+Alamat"
                @keyup.enter="searchPat"
                density="compact"
              ></v-text-field
            ></v-sheet>
            <v-sheet style="width: 60px" class="text-center">
              <v-btn
                :disabled="loading"
                @click="searchPat"
                height="40"
                min-width="40"
                class="mb-5"
                color="primary"
              >
                <v-icon>mdi-magnify</v-icon>
              </v-btn>
            </v-sheet>
            <v-sheet style="width: 60px" class="text-center pl-2">
              <v-btn height="40" min-width="40" class="mb-5" color="warning">
                <v-icon>mdi-plus</v-icon>
              </v-btn>
            </v-sheet>
          </div>
        </template>
        <template v-slot:item="{ item }">
          <tr
            @click="selectItem(item)"
            v-bind:class="{ 'bg-primary-lighten': isItemSelected(item) }"
          >
            <td>{{ item.M_PatientNoReg }}</td>
            <td>
              <p class="mb-0">{{ item.PatientFullName }}</p>
              <p
                class="text-caption text-no-wrap bg-secondary"
                style="padding-left: 0.3rem; width: 10rem"
              >
                NIK : {{ item.M_PatientIDNumber }}
              </p>
            </td>
            <td>{{ item.M_PatientAddressDescription }}</td>
          </tr>
        </template>
        <template v-slot:bottom>
          <div v-if="patients.length > 0" class="text-center pt-2">
            <v-btn
              :loading="loading"
              v-if="loadmore"
              @click="loadMore()"
              class="mt-3 mb-0 text-none"
              variant="tonal"
              color="primary-darken"
              block
              >Tampilkan data lebih banyak ...</v-btn
            >
            <v-btn
              v-if="!loadmore"
              class="mt-3 mb-0 text-none"
              color="error-darken"
              block
              variant="tonal"
              >Sudah tidak ada data ditemukan</v-btn
            >
          </div>
        </template>
      </v-data-table-server>-->

  </div>
</template>

<script>
export default {
  name: "leftcomp",
  components: {},
  mounted() {},
  data() {
    return {
      type_card:0,
      value:'',
      loading:false,
      expanded: [],
      headers: [
        {
          title: "No Reg", // pastikan menggunakan 'text' bukan 'title'
          align: "start",
          key: "M_PatientNoReg",
          sortable: true,
          width: "15%",
          value: "M_PatientNoReg", // tambahkan 'value' untuk identifikasi
        },
        {
          title: "Nama",
          align: "start",
          key: "M_PatientName",
          sortable: true,
          width: "35%",
          value: "PatientFullName", // tambahkan 'value' untuk identifikasi
        },
        {
          title: "Alamat",
          align: "start",
          key: "M_PatientAddress",
          sortable: true,
          value: "M_PatientAddressDescription", // tambahkan 'value' untuk identifikasi
        },
      ],
    };
  },
  computed: {
    search: {
      get() {
        return this.$store.state.patient.search;
      },
      set(data) {
        this.$store.commit("setSearch", data);
      },
    },
    patients() {
      return this.$store.state.patient.patients;
    },
    selected_patient: {
      get() {
        return this.$store.state.patient.selected_patient;
      },
      set(data) {
        this.$store.commit("setSelectedPatient", data);
      },
    },
    current_page: {
      get() {
        return this.$store.state.patient.current_page;
      },
      set(data) {
        this.$store.commit("setCurrentPage", data);
      },
    },
    loading: {
      get() {
        return this.$store.state.patient.loading;
      },
      set(data) {
        this.$store.commit("setLoading", data);
      },
    },
    loadmore: {
      get() {
        return this.$store.state.patient.loadmore;
      },
      set(data) {
        this.$store.commit("setLoadMore", data);
      },
    },
    itemsperpage: {
      get() {
        return this.$store.state.patient.itemsperpage;
      },
      set(data) {
        this.$store.commit("setItemsPerPage", data);
      },
    },
    sortby: {
      get() {
        return this.$store.state.patient.sortby;
      },
      set(data) {
        this.$store.commit("setSortBy", data);
      },
    },
  },
  methods: {
    selectItem(data) {
      this.selected_patient = data;
    },
    isItemSelected(data) {
      return data.M_PatientID === this.$store.state.patient.selected_patient.M_PatientID;
    },
    searchPat() {
      this.current_page = 1;
      this.searchPatients();
    },
    searchPatients() {
      if(this.search != ''){
        this.loading = true;
        const formattedSortBy =
          this.sortby.length > 0 ? `${this.sortby[0].key}:${this.sortby[0].order}` : "";
        if (this.search !== "") {
          this.$store
            .dispatch("searchPatients", {
              current_page: this.current_page,
              items_per_page: this.itemsperpage,
              sort_by: formattedSortBy,
              search: this.search,
            })
            .then(() => {
              this.loading = false;
            });
        }
      }
    },
    loadMore() {
      this.current_page += 1;
      this.searchPatients();
    },
    handleSort(sortBy) {
      this.sortby = sortBy.map((sort) => ({
        key: sort.key,
        order: sort.order === "desc" ? "desc" : "asc",
      }));
      this.current_page = 1;
      this.searchPatients(); // Panggil searchPatients setelah sortBy diupdate
    },
  },
};
</script>

<style scoped>
.row-pointer >>> tbody tr :hover {
  cursor: pointer;
}
</style>
