<template>
  <div>
    <v-container class="bg-white rounded-lg" fluid>
      <v-row class="pa-0">
        <v-col cols="4" class="pl-0">
          <v-autocomplete :label="$t('message.search.resultcollection')" variant="outlined" hide-details
            menu-icon="mdi-chevron-down"
            :items="['Semua', 'Ambil Sendiri', 'dikirim WA', 'Dari kurir']"></v-autocomplete>
        </v-col>
        <v-col cols="7" class="pl-0">
          <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" class="pl-0 pr-2">
          <v-btn variant="flat" small style="height: 100%;" class="bg-primary rounded-lg" v-if="btn_hide === false">
            <iconify-icon style="font-size: 2rem;" icon="fluent:send-20-regular" @click="doSend"></iconify-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<style scoped></style>

<script type="module">
export default {
  name: "SearchVerificationRight",
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    btn_hide: {
      get() {
        return this.$store.state.verification.btn_hide
      },
      set(val) {
        this.$store.commit("verification/update_btn_hide", val)
      }
    },
    selected_transaction() {
      // Akses selected_transaction dari Vuex atau beri nilai default
      return this.$store.state.verification.selected_transaction || [];
    }
  },
  methods: {
    doSend() {
      this.btn_hide = true;

      // Filter untuk mendapatkan item yang dipilih berdasarkan nilai 'chex'
      const selectedItems = this.selected_transaction
      // Periksa jika ada item yang dipilih
      if (selectedItems.length > 0) {
        console.log({
          selected: selectedItems // Daftar item yang dipilih
        });
      } else {
        console.log("Tidak ada item yang dipilih");
      }

      this.btn_hide = false;
    }
  },
  wacth: {

  }
}
</script>