<template>
    <div class="row m-b-15 parentContainer">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Email Like</label>
                                        <input type="text" class="form-control" v-model="email" @keyup.enter="search"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0">
                            <div class="btn btn-primary b-rad-none" @click="search">
                                <i class="fa fa-search lh-40"></i>
                            </div>
                        </div>
                        <div class="col-auto p-l-0">
                            <div class="btn btn-secondary b-rad-none" @click="reset">
                                <i class="fa fa-remove lh-40"></i>
                            </div>
                        </div>
                        <div class="col"></div>
                    </div>
                </div>
            </div>
            <list-component :key="currentKey" :section="section" :endpoint="route('api.account.user.list')" :options="options">
                <template #list="{ data }">
                    <user-component :data="data"></user-component>
                </template>
            </list-component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import route from '@/general/functions/router';

interface Props {
    section: string;
}

const props = defineProps<Props>();
const authStore = useAuthStore();

const section = props.section;
const currentKey = ref(1);
const email = ref('');
const options = reactive<Record<string, any>>({
    type_in: authStore.isSuperAdmin ? [1, 2] : [2]
});

const search = () => {
    options.email_like = email.value;
    currentKey.value += 1;
};

const reset = () => {
    email.value = '';
    delete options.email_like;
    currentKey.value += 1;
};
</script>
