<template>
    <div>
      <v-row>
        <v-col cols="12">
          <v-card class="bg-white rounded-lg pa-5">
            <v-row>
              <v-col cols="2">
                <v-menu
                  v-model="menuStartDate"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  offset-y
                  min-width="auto"
                  max-width="290px"
                >
                  <template v-slot:activator="{ props  }">
                    <v-text-field
                      :model-value="formatDate()"
                      label="Tanggal Mulai"
                      prepend-inner-icon="mdi-calendar"
                      hide-details
                      readonly
                      variant="outlined"
                      v-bind="props"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    hide-header
                    show-adjacent-months
                    rounded="lg"
                    color="primary"
                    v-model="date"
                    @update:modelValue="menuStartDate=false"
                  ></v-date-picker>
                </v-menu>
              </v-col>
              <v-col cols="2">
                <v-menu
                  v-model="menuEndDate"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  offset-y
                  min-width="auto"
                  max-width="290px"
                >
                  <template v-slot:activator="{ props  }">
                    <v-text-field
                      :model-value="formatDate()"
                      label="Tanggal Selesai"
                      prepend-inner-icon="mdi-calendar"
                      hide-details
                      readonly
                      variant="outlined"
                      v-bind="props"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    hide-header
                    show-adjacent-months
                    rounded="lg"
                    color="primary"
                    v-model="date"
                    @update:modelValue="menuEndDate=false"
                  ></v-date-picker>
                </v-menu>
              </v-col>
              <v-col cols="2">
                <v-text-field 
                  label="No Reg / Nama" 
                  variant="outlined"
                  hide-details
                  append-inner-icon="mdi-magnify"
                ></v-text-field>
              </v-col>
              <v-col cols="2">
                <v-autocomplete
                  label="Grup Pemeriksaan"
                  variant="outlined"
                  hide-details
                  menu-icon="mdi-chevron-down"
                  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
                ></v-autocomplete>
              </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-col cols="3">
                <div style="height: 100%;">
                  <v-row class="pt-3 justify-end">
                    <v-btn fab 
                        variant="tonal"
                        small
                        style="height: auto;"
                        color="secondary"
                        class="bg-secondary-lighten rounded-lg mr-2">
                        <iconify-icon
                            style="font-size: 2rem;"
                            icon="fluent:notepad-person-24-regular"
                        ></iconify-icon>
                    </v-btn>

                    <div
                      class="pt-3 pa-3"
                    >
                        <v-btn
                            small
                            class="bg-primary-lighten"
                            variant="tonal"
                            color="primary"
                        >
                            HISTORY
                        </v-btn>
                    </div>
                    <div
                      class="pt-3 pa-3"
                    >
                        <v-btn
                            variant="flat"
                            small
                            class="bg-primary text-white"
                        >
                            SIMPAN
                        </v-btn>
                    </div>
                  </v-row>
                </div>
              </v-col>
            </v-row>
          </v-card>
        </v-col>
      </v-row>
    </div>
  </template>
      
  <style scoped>
  
  </style>
      
  <script type="module">
    export default {
      name: "SearchPatient",
      data() {
          return {
            menuStartDate: false,
            menuEndDate: false,
            visible: false,
          };
      },
      computed: {
        date: {
            get() {
                return this.$store.state.entry.date;
            },
            set(val) {
                console.log(val)
                this.$store.commit("entry/setDate", val);
            },
        },
      },
      methods: {
        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")}`;
        },
      },
      wacth: {
  
      }
    }
  </script>