<template>
  <div>
    <v-card class="mb-3 rounded-lg" elevation="0">
      <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-4"
            density="compact"
            variant="outlined"
          >
          </v-text-field>
          <v-btn class="rounded-lg bg-primary mr-4" size="large">
              <iconify-icon
                  style="font-size: 1.75rem;"
                  icon="fluent:search-24-regular"
              ></iconify-icon>
          </v-btn>
          <v-btn class="rounded-lg bg-primary" size="large">
              <iconify-icon
                  style="font-size: 1.75rem;"
                  icon="fluent:add-24-regular"
              ></iconify-icon>
          </v-btn>
        </div>
      </v-card-text>

      <div class="mx-4">
        <v-list selectable lines="three" item-props density="compact">
          <v-list-subheader class="font-weight-medium">Hasil Pencarian Pasien</v-list-subheader>

          <v-list-item
            class="rounded-lg"
            color="primary"
            v-for="(item, index) in items"
            :key="index"
            @click="handleSelect(item)"
          >
            <template v-slot:prepend>
              <v-avatar color="grey-lighten-1">
                <v-img
                  :src="item.prependAvatar"
                  class="rounded-circle"
                  max-width="40"
                ></v-img>
              </v-avatar>
            </template>
            <template v-slot:title>
              <p class="font-weight-medium">{{ item.title }}</p>
            </template>
            <template v-slot:subtitle>
              <p class="font-weight-medium text-primary">{{ item.name }}</p>
              <p class="text-black">{{ item.subtitle }}</p>
              <v-chip class="mt-1 mr-1" color="success" label size="small">
                <v-icon icon="mdi-cake" start></v-icon>
                {{ item.dob }}
              </v-chip>

              <v-chip class="mt-1 mr-1" color="primary" label size="small">
                <v-icon icon="mdi-phone" start></v-icon>
                {{ item.hp }}
              </v-chip>
            </template>

            <!-- <template v-slot:append>
              <v-btn
                v-if="item.selected"
                color="primary"
                icon="mdi-check"
                variant="text"
              ></v-btn>
            </template> -->
          </v-list-item>
        </v-list>
      </div>
    </v-card>
  </div>
</template>

<script setup>
const items = [
  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
    title: "LAA0000082",
    name: "Fatiha Rizku Nur Imansari",
    subtitle: `Giwangan Tegal Turi UH.7 144 Sawunggaling, Wonokromo, Surabaya`,
    dob: "19-01-2001",
    hp: "087731221123",
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
    title: "LAA0007904",
    name: "Stephan Wilson Mandala Putra Aditama",
    subtitle: `Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
    dob: "07-07-2002",
    hp: "081234222126",
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
    title: "LAA0000035",
    name: "Ujang Taufik S.Sastramidjaja",
    subtitle: 'JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya',
    dob: "14-09-1988",
    hp: "085111222129",
    selected: false,
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
    title: "LAA0000072",
    name: "Santi Yuliana",
    subtitle: 'Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
    dob: "11-10-2004",
    hp: "0852343421900",
    selected: true,
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
    title: "LAA0010689",
    name: "Cindy Tiara Hadianti",
    subtitle: 'Gunung Sari Indah OO-9 Sawunggaling, Wonokromo, Surabaya',
    dob: "17-01-2001",
    hp: "087734211126",
    selected: false,
  },
];
</script>
<script>
  export default {
    name: "leftcomp",
    components: {},
    mounted() {},
    data() {
      return {
        selected: {},
        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: {
      handleSelect(item) {
        console.log("Selected item:", item);
        this.selected = item; // Simpan item yang dipilih
      },
      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>
