<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import Multiselect from '@/Components/MultiSelect.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import rpoFields from '../Data/MultiSelectOptionsRPO';
import ConditionDisplay from '@/Components/ConditionStatement.vue';
import QueryBuilder from '@phongthien/vue3-query-builder';
import Input from '@/Components/Input.vue';
import Number from '@/Components/Number.vue';
import JsonQueryBuilder from '@/Components/JsonQueryBuilder.vue';
import { onMounted, ref } from 'vue';
import { defineEmits } from 'vue'
import { Inertia } from '@inertiajs/inertia';

const query = ref({
        condition: 'and',
        rules: [{
          id: 'addresses.street',
          operator: '=',
          value: 'V. Clementisa'
          }, {
          condition: 'and',
          rules: [{
            id: 'fullNames.value',
            operator: '(',
            value: 'Cobra s.r.o.'
          }, {
            id: 'equities.valuePaid',
            operator: '<=',
            value: 80000
          }]
        }]
      })
    

const submit = () => {
    console.log('Post data');
    console.log(query.value);
    Inertia.post(`/search`, query.value);
};

</script>

<template>
    <GuestLayout>
        
        <Head title="Register" />

        <JsonQueryBuilder :query="query" :queryOptions="rpoFields" @run-query="submit" ></JsonQueryBuilder>

    </GuestLayout>
</template>
