<template>
	<view class="table u-font-28">
		<!-- 表头：根据 columns 渲染 + 全选框 -->
		<view class="u-flex u-row-between no-wrap title">
			<!-- 全选框 -->
			<view class="table-th">
				<up-checkbox @change="handleSelectAll" usedAlone v-model:checked="internalAllChecked" shape="square"
					:size="20" />
			</view>

			<!-- 动态列标题 -->
			<view class="table-th" v-for="col in columns" :key="col.key" :style="col.style || {}">
				{{ col.title }}
			</view>
		</view>

		<!-- 有数据 → 渲染列表 -->
		<template v-if="internalData.length > 0">
			<view @click="handleRowCheck(item)" class="u-m-t-12 u-flex u-p-24 u-row-between row"
				v-for="(item, index) in internalData" :key="item.id || index" row-key="id">
				<view class="table-td">
					<up-checkbox @change="handleRowCheck(item)" usedAlone v-model:checked="item._checked" shape="square" :size="20"></up-checkbox>
				</view>

				<view class="table-td" v-for="col in columns" :key="col.key" :style="col.style || {}">
					<slot v-if="col.slot" :name="col.slot" :row="item" />
					<template v-else>{{ item[col.key] }}</template>
				</view>
			</view>
		</template>

		<!-- 无数据 → 显示暂无数据 -->
		<view v-else class="empty-text u-p-t-40 u-p-b-40 u-text-center">
			暂无数据
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';

	// 完全对齐 u-table2 的 props
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		columns: {
			type: Array,
			default: () => []
		},
		rowKey: {
			type: String,
			default: 'id'
		}
	});

	// 抛出和 u-table2 一样的 selection-change 事件
	const emits = defineEmits(['selection-change']);

	// 内部数据（增加选中状态 _checked）
	const internalData = ref([]);

	// 全选状态
	const internalAllChecked = ref(false);

	// 监听外部 data 变化，自动注入选中状态
	watch(
		() => props.data,
		(val) => {
			internalData.value = val.map(item => ({
				...item,
				_checked: item._checked || false
			}));
		}, {
			immediate: true,
			deep: true
		}
	);

	// 全选切换
	function handleSelectAll() {
		internalAllChecked.value = !internalAllChecked.value
		const checked = internalAllChecked.value;
		internalData.value = internalData.value.map(item => {
			item._checked = checked;
			return item;
		})
		console.log('internalData.value', internalData.value);
		emitChange();
	}

	// 行选中切换
	function handleRowCheck(row) {
		row._checked = !row._checked;
		emitChange();
	}

	// 抛出选中结果（和 u-table2 行为一致）
	function emitChange() {
		const selectedRows = internalData.value.filter(item => item._checked);
		emits('selection-change', selectedRows);
	}
	

	// 监听所有行选中状态，自动更新全选框
	watch(
		() => internalData.value,
		() => {
			const total = internalData.value.length;
			const checkedCount = internalData.value.filter(i => i._checked).length;
			internalAllChecked.value = total > 0 && checkedCount === total;
		}, {
			deep: true
		}
	);
</script>

<style lang="scss">
	.table {
		background: #f9f9f9;
		border-radius: 8rpx;
		overflow: hidden;

		.title {
			padding: 12rpx 24rpx;
			background: #aebad2;
			border-radius: 8rpx 8rpx 0 0;
			color: #fff;
		}

		.table-th,
		.table-td {
			flex: 1;
			text-align: center;
		}

		.row {
			cursor: pointer;
		}

		.row:nth-of-type(2n + 1) {
			background: #f0f0f0;
		}

		// 空数据样式
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>