import React, { useState, useEffect, useMemo } from "react";
import { render } from "react-dom";
import { Table } from "antd";
import { VList } from "virtuallist-antd";
import type { ColumnsType } from 'antd/es/table';
import type { ResizeCallbackData } from 'react-resizable';
import { Resizable } from 'react-resizable';

import "./styles.css";
import "antd/dist/antd.css";

interface DataType {
key: React.Key;
date: string;
amount: number;
type: string;
note: string;
}

const ResizableTitle = (
props: React.HTMLAttributes<any> & {
onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
width: number;
},
) => {
const { onResize, width, ...restProps } = props;

if (!width) {
return <th {...restProps} />;
}

return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation();
}}
/>
}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
);
};

function App() {
const [dataSource, setDataSource] = useState([]);

useEffect(() => {
let tempDataSource = [];
for (let i = 0; i < 1000; i++) {
tempDataSource.push({
company_name: aaa${i} 富士山下的你好美,
company_name1: aaa${i} index inde,
company_name2: aaa${i} company,

    company_name3: `aaa${i} company c`,
    company_name4: `aaa${i} company `,
    company_name5: `aaa${i} company`,
    company_name6: `aaa${i} company`
  });
}

setTimeout(() => {
  setDataSource(tempDataSource);
}, 2000);

}, []);

const handleResize: Function =
(index: number) => (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
const newColumns = [...columns];
newColumns[index] = {
...newColumns[index],
width: size.width,
};
setColumns(newColumns);
};

const [columns, setColumns] = useState<ColumnsType<DataType>>([
{
title: "序号",
key: "id",
fixed: "left",
render(text, record, index) {
return index + 1;
},
width: 100,
onHeaderCell: (column,index) => ({
width: column.width,
onResize: handleResize(0),
}),
},
{
title: "公司",
dataIndex: "company_name",
width: 200,
children: [{
title: "公司1",
dataIndex: "company_name1",
width: 200,
},{
title: "公司2",
dataIndex: "company_name2",
width: 200,
}]
},
{
title: "公司1",
dataIndex: "company_name1",
width: 200,
onHeaderCell: (column,index) => ({
width: column.width,
onResize: handleResize(0),
}),
},
{
title: "公司2",
fixed: "right",
dataIndex: "company_name2",
width: 200
}
]);

const vc1 = useMemo(() => {
return VList({
height: 500,
vid: "first"
});
}, []);

const vc2 = useMemo(() => {
return VList({
height: "calc(20vh)",
vid: "second"
});
}, []);

return (
<div>
<div style={{width:300,height:500,background:'red'}}></div>
<Table
bordered
columns={columns}
dataSource={dataSource}
pagination={false}
/** 不建议使用x: max-content. 如果columns有fixed, x为max-content的话. ellipsis会失效 */
scroll={{ y: 500, x: "100%" }}
rowKey={"company_name"}
components={{
...vc1,
header: {
cell: ResizableTitle,
},
}}
sticky
summary={pageData => {
let totalBorrow = 0;
let totalRepayment = 0;

      pageData.forEach(({ borrow, repayment }) => {
        totalBorrow += borrow;
        totalRepayment += repayment;
      });

      return (
        <Table.Summary fixed>
          <Table.Summary.Row>
            <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
            <Table.Summary.Cell index={1}>
              2
            </Table.Summary.Cell>
            <Table.Summary.Cell index={2}>
             3
            </Table.Summary.Cell>
            <Table.Summary.Cell index={3}>
             3
            </Table.Summary.Cell>
            <Table.Summary.Cell index={4}>
             4
            </Table.Summary.Cell>
          </Table.Summary.Row>
        </Table.Summary>
      );
    }}
  />
  <div style={{width:300,height:500,background:'red'}}></div>
</div>

);
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);