<template>
	<a-table :data-source="data" :columns="columns" bordered  :pagination="pagination" @change="pageChange" :loading="loading">
		<template #image="{ record }">
			<slot name="image" :record='record'></slot>
		</template>
		<template #operation="{ record }">
			<slot :record='record'></slot>
		</template>
		<template #meet_status="{ record }">
			<slot name="meet_status" :record='record'></slot>
		</template>
	</a-table>
</template>

<script lang="ts" setup>
	import { ref, onMounted,defineEmits, defineProps, watch } from 'vue';
	let props = defineProps(['data', 'columns', 'pagination', 'loading']);
	const emit = defineEmits();
	let data = ref<Object[]>([])
	let columns = ref<Object[]>([])
	let loading = ref<Boolean>(props.loading);
	let pagination = ref<CommonType.PageType>({
		current: 1,
		pageSize: 10,
		total: 10,
		pageSizeOptions: ['10', '20', '30', '40'],
		hideOnSinglePage: false,
		showSizeChanger: true
	})
	watch(() => [props.data, props.columns, props.pagination, props.loading],
		(newVal, oldVal) => {
			data.value = newVal[0];
			columns.value = newVal[1];
			pagination.value = newVal[2];
			loading.value = newVal[3]
		})
		
	const pageChange = (val) => {
		emit("page", val)
	}
	
</script>

<style scoped lang="less">
	// :deep(.ant-table-thead >tr>th) {
	// 	background-color: #fff !important;
	// 	border: none !important;
	// 	color: #bbb !important;
	// }
	
	// :deep(.ant-table-thead >tr>th::before) {
	// 	display: none !important;
	// }
	// :deep(.ant-table-tbody >tr >td) {
	// 	border: none !important;
	// }
	
	// :deep(.ant-table-pagination) {
	// 	justify-content: center !important;
	// 	padding: 20px 0 !important;
	// }
	
</style>