import { useState } from "react";
import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
import MyButton from "@/components/mui/MyButton";

const VirtuallyTableDemo = () => {
	const rows = [
		{
			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
			b: "werewrw",
			c: "asdfasf",
			d: "asdfasdf",
			e: "asd4534",
			id: "a1",
		},
	];
	for (let i = 0; i < 10000; i++) {
		rows.push({
			a: "xcgh",
			b: "sdf",
			c: "sdfg",
			d: "sdfg",
			e: "wertwe",
			id: String(i),
		});
	}
	const buttonHeadCells = [
		{
			id: "a",
			label: "属性a",
			width: 150,
		},
		{
			id: "b",
			label: "属性b",
			width: 150,
		},
		{
			id: "c",
			label: "属性c",
			width: 150,
			// flexGrow: 2,
		},
		{
			id: "d",
			label: "属性d",
			width: 200,
			flexGrow: 2,
		},
		{
			id: "caozuo",
			label: "操作",
			width: 150,
			cellRenderer: (data: any) => {
				return (
					<MyButton
						text="删除"
						onClick={() => {
							// handleDelete(row.id);
						}}
					></MyButton>
				);
			},
		},
	];

	const [selectItems, setSelectItems] = useState([]);

	return (
		<div style={{ height: "600px" }}>
			<VirtuallyTable
				selectItems={selectItems}
				setSelectItems={setSelectItems}
				rows={rows}
				headCells={buttonHeadCells}
				activeId="8"
			/>
		</div>
	);
};

export default VirtuallyTableDemo;
