<template>
    <div>
      <v-container class="bg-white rounded-lg" fluid>
        <v-row>
          <v-col cols="3">
            <div class="d-flex align-center ga-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="$t('message.search.startdate')"
                    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-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="$t('message.search.enddate')"
                    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>
            </div>
          </v-col>
          <v-col cols="1.5">
            <v-text-field 
              :label="$t('message.search.noreg')"
              variant="outlined"
              hide-details
              append-inner-icon="mdi-magnify"
            ></v-text-field>
          </v-col>
          <v-col cols="1.5">
            <v-autocomplete
              :label="$t('message.search.group')"
              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: 55px; width: 40px;"
                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="5">
            <div style="height: 100%;">
              <v-row class="d-flex pt-4 justify-end ga-2">
                <v-btn fab 
                    variant="tonal"
                    small
                    style="height: auto;"
                    color="secondary"
                    class="bg-secondary-lighten rounded-lg">
                    <iconify-icon
                        style="font-size: 2rem;"
                        icon="fluent:notepad-person-24-regular"
                    ></iconify-icon>
                </v-btn>
                <v-btn fab 
                    variant="tonal"
                    small
                    style="height: auto;"
                    color="success"
                    class="bg-success-lighten rounded-lg">
                    <iconify-icon
                        style="font-size: 2rem;"
                        icon="fluent:note-add-24-regular"
                    ></iconify-icon>
                </v-btn>
                <v-btn fab 
                    variant="tonal"
                    small
                    style="height: auto;"
                    color="info"
                    class="bg-info-lighten rounded-lg">
                    <iconify-icon
                        style="font-size: 2rem;"
                        icon="fluent:eye-24-regular"
                    ></iconify-icon>
                </v-btn>

                <div>
                    <v-btn
                        class="bg-primary-lighten"
                        variant="tonal"
                        color="primary"
                        size="x-large"
                    >
                    {{ $t('message.search.history') }}
                    </v-btn>
                </div>
                <div>
                    <v-btn
                        variant="flat"
                        small
                        class="bg-primary text-white"
                        size="x-large"
                    >
                    {{ $t('message.search.save') }}
                    </v-btn>
                </div>
                <div>
                    <v-btn
                        variant="flat"
                        small
                        class="bg-success text-white mr-2"
                        size="x-large"
                    >
                    {{ $t('message.search.send') }}
                    </v-btn>
                </div>
              </v-row>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </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.validation.date;
            },
            set(val) {
                console.log(val)
                this.$store.commit("validation/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>