<template>
  <div>
    <v-row>
      <v-col cols="12">
        <v-container class="bg-white rounded-lg">
          <v-row>
            <v-col cols="5"
              ><v-text-field
                label="No reg/Nama"
                variant="outlined"
                hide-details
                append-inner-icon="mdi-magnify"
              ></v-text-field
            ></v-col>
            <v-col cols="5">
              <v-autocomplete
                label="Specimen"
                variant="outlined"
                hide-details
                menu-icon="mdi-chevron-down"
                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
              ></v-autocomplete>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="5">
              <!-- <v-date-input label="Date input"></v-date-input> -->
              <v-menu
                v-model="menu"
                :close-on-content-click="false"
                transition="scale-transition"
                offset-y
                min-width="auto"
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ props  }">
                  <!-- v-model="formatDate()" -->
                  <v-text-field
                    :model-value="formatDate()"
                    label="Pilih Tanggal"
                    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="menu=false"
                ></v-date-picker>
              </v-menu>
              <!-- <v-menu v-model="menu" transition="scale-transition">
                <template v-slot:activator="{ props }">
                  <v-text-field
                    v-model="date"
                    label="Pilih Tanggal"
                    prepend-inner-icon="mdi-calendar"
                    readonly
                    variant="outlined"
                    v-bind="props"
                  ></v-text-field>
                </template>

                <div>klsajkls</div>
              </v-menu> -->
            </v-col>
            <v-col cols="5">
              <v-autocomplete
                label="Kel. Pelanggan"
                variant="outlined"
                hide-details
                menu-icon="mdi-chevron-down"
                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
              ></v-autocomplete>
            </v-col>
            <v-col cols="2">
              <div style="height: 100%;">
                <v-row class="pt-3">
                  <div
                    style="height: 100%;"
                    class="rounded-lg bg-primary pa-2 mr-2 h-100"
                  >
                    <iconify-icon
                      class="text-center"
                      style="font-size: 2rem;"
                      icon="fluent:search-20-regular"
                    ></iconify-icon>
                  </div>
                </v-row>
              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-col>
      <v-col cols="12">
        <v-container class="bg-white rounded-lg">
          <v-data-table
            v-model="selectedItems"
            :items="items"
            :headers="headers"
            hide-default-footer
          >
            <template v-slot:item="{ item }">
              <tr>
                <td>
                  <p class="font-weight-medium">{{ item.mou }}</p>
                </td>
                <td>
                  <div class="text-center">
                    <p class="font-weight-medium">{{ item.noreg }}</p>
                    <v-chip class="ma-1" size="small" label>
                      {{ item.orderdate }}
                    </v-chip>
                    <v-chip class="ma-1" size="small" label>
                      {{ item.regstaff }}
                    </v-chip>
                  </div>
                </td>
                <td>
                  <p class="text-center">{{ item.pasienname }}</p>
                </td>
                <td>
                  <div class="text-center">
                    <p class="">{{ item.sample }}</p>
                    <p class="font-weight-medium">{{ item.samplenumber }}</p>
                    <v-chip class="ma-1" color="primary" size="small" label>
                      {{ item.sampledate }}
                    </v-chip>
                    <v-chip class="ma-1" size="small" label>
                      {{ item.samplestaff }}
                    </v-chip>
                  </div>
                </td>
                <td>
                  <!-- <v-sheet>
                  
                   
                  </v-sheet> -->
                  <v-row no-gutterss class="text-center">
                    <v-col cols="6" class="pa-0">
                      <v-btn icon="mdi-close" color="error" variant="plain">
                      </v-btn
                    ></v-col>
                    <v-col cols="6" class="pa-0">
                      <v-btn icon="mdi-export" color="success" variant="plain">
                      </v-btn
                    ></v-col>
                  </v-row>
                </td>
              </tr>
            </template>
          </v-data-table>
        </v-container>
      </v-col>
    </v-row>
  </div>
</template>

<script type="module">
  export default {
    name: "LeftSpecimen",
    components: {},
    mounted() {},
    data() {
      return {
        menu: false,
        visible: false,
        items: [
          {
            mou: "Pasien Dokter",
            noreg: "055000035LA",
            orderdate: "01-08-2024 15:02",
            orderdate: "01-08-2024 15:02",
            regstaff: "NOVITA",
            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
            sample: "NaF 2JPP",
            samplenumber: "055000035LAEL1",
            sampledate: "01-08-2024 15:04",
            samplestaff: "ADMIN WESTERINDO",
          },
          {
            mou: "Pasien Dokter",
            noreg: "055000036LA",
            orderdate: "01-08-2024 15:02",
            orderdate: "01-08-2024 15:02",
            regstaff: "NOVITA",
            pasienname: "Tn. ANDREW ISKANDAR BUDIMAN",
            sample: "NaF 2JPP",
            samplenumber: "055000035LAEL1",
            sampledate: "01-08-2024 15:04",
            samplestaff: "ADMIN WESTERINDO",
          },
        ],
        selectedItems: [],
        headers: [
          {
            title: "KEL. PELANGGAN",
            align: "center",
            sortable: false,
            key: "name",
            width: "20%",
            class: "font-weight-bold",
          },
          {
            title: "NO REG",
            align: "center",
            sortable: false,
            key: "name",
            width: "20%",
            class: "font-weight-bold",
          },
          {
            title: "NAMA",
            align: "center",
            sortable: false,
            key: "name",
            width: "20%",
            class: "font-weight-bold",
          },
          {
            title: "BARCODE",
            align: "center",
            sortable: false,
            key: "name",
            width: "20%",
            class: "font-weight-bold",
          },
          {
            title: "PROSES",
            align: "center",
            sortable: false,
            key: "name",
            width: "20%",
            class: "font-weight-bold",
          },
        ],
      };
    },
    computed: {
      // Akses state dari store
      count() {
        return this.$store.state.login.count;
      },
      date: {
        get() {
          return this.$store.state.specimen.date;
        },
        set(val) {
          this.$store.commit("specimen/setDate", val);
          //   this.menu = false;
          console.log(val);
        },
      },
      password: {
        get() {
          return this.$store.state.login.password;
        },
        set(val) {
          this.$store.commit("login/setPassword", 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>
