<script setup>
// 常用属性：
//   items - 内容数据
//   dataKey <string | Function> 数据标识，比如id
//   celled|showGridlines - 显示网格线
//   size - 表格尺寸"small" | "large"
//   tableStyle <string> 表格样式
//   tableClass <string> 表格样式Class
//   selectedItems - 已经选中的内容
//   selectionMode - 表格行选中模式：single只能单行，multiple可多行
//   scrollable - 是否可以滚动，竖向滚动需要和 scrollHeight 配合使用（比如 scrollable scrollHeight="400px"）
//
// 常用事件：
//   @row-reorder 行重新排序
//
// 单个Column常用属性：
//    field <string> 字段名
//    header - 列头名称
//    headerStyle - 列头样式
//    headerClass - 列头Class
//    style - 列样式
//    rowReorder <boolean> 是否显示排序图标
//
// 添加某个列用于拖动排序：
//    <Column rowReorder headerStyle="width: 3rem"/>
//
// 添加复选框：
//    <TDataTable :items="..." v-model:selectedItems="...">
//        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
//
// 常用插槽
//    #header 表头
//    #footer 表脚
//    #empty 无数据时的显示

import DataTable from "primevue/datatable";
import {provide, ref, watch} from "vue";
import Column from "primevue/column";

const props = defineProps(["items", "celled", "selectedItems"])

let selection = undefined
if (props.selectedItems !== undefined) {
	selection = ref([])

	watch(selection, (newArray) => {
		if (props.selectedItems instanceof Array) {
			props.selectedItems.length = 0
			props.selectedItems.push(...newArray)
		}
	})
}

const rootRef = ref()

// dynamic columns
const columns = ref([])
provide("$t_columns", columns.value)

</script>

<template>
	<DataTable ref="rootRef" v-model:value="props.items" :showGridlines="celled">
		<!-- selectionMode="multiple"
		v-model:selection="selection"-->
		<template #header v-if="$slots.header">
			<slot name="header"></slot>
		</template>
		<template #empty v-if="$slots.empty">
			<slot name="empty"></slot>
		</template>
		<template #footer v-if="$slots.footer">
			<slot name="footer"></slot>
		</template>
		<slot></slot>

		<template v-for="column in columns">
			<Column v-bind="column.instance.props">
				<template v-for="(slot, slotName) in column.instance.slots" :key="slotName" #[slotName]="slotProps">
					<Component :is="slot" v-bind="slotProps"/>
				</template>
			</Column>
		</template>
	</DataTable>
</template>

<style scoped>
:deep(.ui.table) {
	border-radius: 0;
}
</style>