<template>
	<PageContainer>
		<div class="d-flex justify-center">
			<FilterModule :filters="filters" />
		</div>
	</PageContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import PageContainer from "@/elements/PageContainer/PageContainer.vue";
import FilterModule from "@/patterns/FilterModule/FilterModule.vue";

export default defineComponent({
	components: {
		PageContainer,
		FilterModule,
	},
	data() {
		return {
			filters: [
				{
					type: "select",
					multiple: true,
					dynamic: true,
					items: [
						{
							text: "Email",
							value: "email",
						},
						{
							text: "Courrier",
							value: "mail",
						},
						{
							text: "SMS",
							value: "sms",
						},
					],
					value: null,
					fieldOptions: {
						outlined: true,
						label: "Moyen de contact",
						filterTitle: "Moyen de contact",
					},
				},
				{
					type: "range",
					min: 0,
					max: 100,
					value: null,
					fieldOptions: {
						outlined: true,
						filterTitle: "Intervalle",
					},
				},
				{
					type: "text",
					value: null,
					fieldOptions: {
						outlined: true,
						hideDetails: true,
						label: "Nom",
						filterTitle: "Nom",
					},
				},
			],
		};
	},
});
</script>