<template>
    <div>
      <v-row>
        <v-col cols="12">
          <v-container class="bg-white rounded-lg" fluid>
            <v-row>
                <v-col cols="5">
                    <v-text-field
                        :label="$t('message.right.noreg')"
                        variant="outlined"
                        hide-details
                        append-inner-icon="mdi-magnify"
                        ></v-text-field
                    >
                </v-col>
                <v-col cols="5">
                        <v-autocomplete
                        :label="$t('message.right.station')"
                        variant="outlined"
                        hide-details
                        menu-icon="mdi-chevron-down"
                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
                        ></v-autocomplete>
                </v-col>
                <v-col cols="2">
                    <v-btn 
                        variant="flat"
                        small
                        style="height: 100%;"
                        class="bg-primary rounded-lg">
                        <iconify-icon
                            style="font-size: 2rem;"
                            icon="fluent:send-24-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
                v-model="selectedItems"
                :items="xpatientright"
                :headers="headers"
                return-object
                hide-default-footer
            >
              <template
                v-slot:item="{ item, isSelected, toggleSelect, internalItem }"
              >
                <tr>
                    <td class="px-2">
                        <v-checkbox-btn
                        :model-value="isSelected(internalItem)"
                        color="primary"
                        @update:model-value="toggleSelect(internalItem)"
                        ></v-checkbox-btn>
                    </td>
                  <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-center">
                    <p>{{ item.name }}</p>
                  </td>
                  <td class="text-center">
                    <p>{{ item.test }}</p>
                  </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: "RightComponent",
      components: {},
      mounted() {},
      data() {
        return {
          menu: false,
          visible: false,
          selectedItems: [],
          headers: [
            {
              title: "",
              align: "center",
              sortable: false,
              key: "name",
              width: "15%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.right.table.noreg'),
              align: "center",
              sortable: false,
              key: "name",
              width: "25%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.right.table.name'),
              align: "center",
              sortable: false,
              key: "name",
              width: "30%",
              class: "font-weight-bold",
            },
            {
              title: this.$t('message.right.table.test'),
              align: "center",
              sortable: false,
              key: "name",
              width: "30%",
              class: "font-weight-bold",
            }
          ],
        };
      },
      computed: {
        // Akses state dari store
        xpatientright() {
            return this.$store.state.patient.patientright
        },
        selected_patientright: {
            get() {
                return this.$store.state.patient.selected_patientright
            },
            set(val) {
                this.$store.commit("patient/setSelectedPatientRight", 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>
  