<template>
	<div>
		<H2>Client Contact List</H2>
		<div id="filter-container" class="filter-container">
			<input placeholder="Type to Search" />
			<p>Type:</p>
			<select id="type-selector"></select>
			<button @click="onClick" id="add-customer-button" class="interaction-button">
				Add
			</button>
		</div>
		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
	</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";

const tableData = ref([]);

const onClick = () => {
	frappe.new_doc("Customer");
};

const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
const columns = [
	{ label: "Name", fieldName: "full_name" },
	{ label: "Location", fieldName: "address" },
	{ label: "Type", fieldName: "contact_type" },
	{ label: "Contact", fieldName: "full_name" },
	{ label: "Email", fieldName: "email_id" },
	{ label: "Phone", fieldName: "phone" },
];
onMounted(async () => {
	let data = await frappe.db.get_list("Contact", searchFields);
	console.log(data);
	tableData.value = data;
});
</script>
<style lang=""></style>
