<template>
    <div>
      <v-row>
        <v-col cols="12">
          <v-container class="bg-white rounded-lg" fluid>
            <v-row>
                <v-col cols="3">
                    <v-text-field
                        :label="$t('message.left.noreg')"
                        variant="outlined"
                        hide-details
                        append-inner-icon="mdi-magnify"
                        ></v-text-field
                    >
                </v-col>
                <v-col cols="3">
                        <v-autocomplete
                        :label="$t('message.left.station')"
                        variant="outlined"
                        hide-details
                        menu-icon="mdi-chevron-down"
                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
                        ></v-autocomplete>
                </v-col>
                <v-col cols="5"></v-col>
                <v-col cols="1">
                    <v-btn 
                        variant="flat"
                        small
                        style="height: 100%;"
                        class="bg-primary rounded-lg">
                        <iconify-icon
                            style="font-size: 2rem;"
                            icon="fluent:search-20-regular"
                        ></iconify-icon>
                    </v-btn>
                </v-col>
            </v-row>
          </v-container>
        </v-col>
        <v-col cols="12">
          <v-container class="bg-white rounded-lg" fluid>
            <v-data-table
              :items="xpatients"
              :headers="headers"
              return-object
              hide-default-footer
            >
              <template
                v-slot:item="{ item }"
              >
                <tr>
                  <td class="text-center">
                    <p class="font-weight-medium mt-2 mb-1">{{ item.noreg }}</p>
                    <p class="mb-2">
                        <v-chip class="ma-1" size="small" label>
                            {{ item.orderdate }}
                        </v-chip>
                    </p>
                  </td>
                  <td class="text-left">
                    <p>{{ item.name }}</p>
                  </td>
                  <td class="text-left">
                    <p>{{ item.test }}</p>
                    <p>{{ item.doctorname }}</p>
                  </td>
                  <td class="text-center">
                    <div class="d-flex justify-center">
                        <div
                            class="pointer"
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                        >
                            <iconify-icon
                                class="text-primary"
                                style="font-size: 1.5rem;"
                                icon="fluent:edit-24-regular"
                            ></iconify-icon>
                        </div>
                        <div
                            class="pointer"
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                        >
                            <iconify-icon
                                class="text-error"
                                style="font-size: 1.5rem;"
                                icon="fluent:dismiss-24-regular"
                            ></iconify-icon>
                        </div>
                        <div
                            class="pointer"
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                        >
                            <iconify-icon
                                class="text-success"
                                style="font-size: 1.5rem;"
                                icon="fluent:checkmark-24-regular"
                            ></iconify-icon>
                        </div>
                    </div>
                  </td>
                  <td class="text-center">
                    <div class="d-flex justify-center">
                        <div
                            class="pointer"
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                        >
                            <iconify-icon
                                class="text-grey"
                                style="font-size: 1.5rem;"
                                icon="fluent:arrow-hook-up-left-24-regular"
                            ></iconify-icon>
                        </div>
                        <div
                            class="pointer"
                            style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                        >
                            <iconify-icon
                                class="text-green"
                                style="font-size: 1.5rem;"
                                icon="fluent:checkmark-starburst-24-regular"
                            ></iconify-icon>
                        </div>
                    </div>
                  </td>
                </tr>
              </template>
            </v-data-table>
          </v-container>
        </v-col>
      </v-row>
    </div>
  </template>
  
<style scoped>
    .pointer {
        cursor: pointer;
    }
</style>

  <script type="module">
    export default {
      name: "LeftComponent",
      components: {},
      mounted() {},
      data() {
        return {
          menu: false,
          visible: false,
          headers: [
            {
              title: this.$t('message.left.table.noreg'),
              align: "center",
              sortable: false,
              key: "name",
              width: "15%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.left.table.name'),
              align: "center",
              sortable: false,
              key: "name",
              width: "25%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.left.table.test'),
              align: "center",
              sortable: false,
              key: "name",
              width: "25%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.left.table.requirement'),
              align: "center",
              sortable: false,
              key: "name",
              width: "25%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.left.table.action'),
              align: "center",
              sortable: false,
              key: "name",
              width: "10%",
              class: "font-weight-bold",
            }
          ],
        };
      },
      computed: {
        // Akses state dari store
        xpatients() {
            return this.$store.state.patient.patients
        },
        selected_patient: {
            get() {
                return this.$store.state.patient.selected_patient
            },
            set(val) {
                this.$store.commit("patient/setSelectedPatient", val)
            }
        }
      },
      methods: {
        // Dispatch action ke store
        formatDate() {
          if (!this.date) return null;
  
          return moment(this.date).format("DD-MM-YYYY");
        },
        deFormatedDate(date) {
          if (!date) return null;
  
          const [day, month, year] = date.split("-");
          return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
        },
        increment() {
          this.$store.dispatch("increment");
        },
      },
    };
  </script>
  
  <style scoped></style>
  