<template>
  <div>
    <v-card class="scroll-container pa-4 rounded-lg" elevation="0">
      <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
        <v-toolbar-title class="text-title-1 font-weight-bold">DATA PASIEN</v-toolbar-title>
      </v-toolbar>
      <v-row no-gutters class="mt-4">
        <v-col cols="2">
          <div class="d-flex mb-2">
            <v-img
              :aspect-ratio="1"
              class="bg-grey"
              src="https://cdn.vuetifyjs.com/images/lists/4.jpg"
              width="250"
              rounded
              cover
            ></v-img>
          </div>
          <div class="d-flex mb-2">
            <v-btn
              color="primary"
              text="Ganti Foto"
              class="flex-grow-1"
              variant="tonal"
              flat
            ></v-btn>
          </div>
          <div class="d-flex mb-2">
            <v-btn
              color="primary"
              text="Update Data"
              class="flex-grow-1"
              variant="tonal"
              flat
            ></v-btn>
          </div>
          <div class="d-flex mb-2">
            <v-btn
              color="primary"
              text="Riwayat"
              class="flex-grow-1"
              variant="tonal"
              flat
            ></v-btn>
          </div>
        </v-col>
        <v-col class="pl-4" cols="10">
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="PID"
          ></v-text-field>
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Nama"
          ></v-text-field>
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Tanggal Lahir"
          ></v-text-field>
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Umur"
          ></v-text-field>
          <v-row no-gutters class="mb-2">
            <v-col cols="6">
              <v-select
              :items="genders" return-object class="pr-1" hide-details="auto"
              density="compact" label="Kartu Identitas" color="primary"
              item-title="name" variant="outlined"
              ></v-select>
            </v-col>
            <v-col cols="6">
              <v-text-field class="pl-1" variant="outlined" density="compact" hide-details="auto"
                color="primary" v-model="first" label="Nomor ID"
              ></v-text-field>
            </v-col>
          </v-row>
          <v-textarea class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Alamat" rows="3"
          ></v-textarea>
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Diagnosa"
          ></v-text-field>
          <v-text-field class="mb-2" variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Catatan Pasien"
          ></v-text-field>
          <v-text-field variant="outlined" density="compact" hide-details="auto"
            color="primary" v-model="first" label="Catatan FO"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-card>
  </div>
</template>

<script setup>
const titles = [
  { id: "1", name: "Tn" },
  { id: "2", name: "Bapak" },
];
const genders = [
  { id: "M", name: "Laki-laki" },
  { id: "P", name: "Perempuan" },
];
const items = [
  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
    title: "LAA0000082",
    subtitle: `<span class="text-primary">Fatiha Rizku Nur Imansari</span> &mdash; 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",
    subtitle: `<span class="text-primary">Stephan Wilson Mandala Putra Aditama</span> &mdash; Taman Pondok Jati BI/5 Sawunggaling, Wonokromo, Surabaya`,
    dob: "07-07-2002",
    hp: "081234222126",
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
    title: "LAA0000035",
    subtitle:
      '<span class="text-primary">Ujang Taufik S.Sastramidjaja</span> &mdash; JL. Winata NO.14 Sawunggaling, Wonokromo, Surabaya?',
    dob: "14-09-1988",
    hp: "085111222129",
    selected: true,
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
    title: "LAA0000072",
    subtitle:
      '<span class="text-primary">Santi Yuliana</span> &mdash; Darmo Permai TIM 2/41 Sawunggaling, Wonokromo, Surabaya',
    dob: "11-10-2004",
    hp: "0852343421900",
    selected: false,
  },

  {
    prependAvatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
    title: "LAA0010689",
    subtitle:
      '<span class="text-primary">Cindy Tiara Hadianti</span> &mdash; 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>
