'use client'
import React, {useEffect, useState} from 'react';
import {Button, ColorPicker, Dropdown, MenuProps, Space, Switch, Table} from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { taskTreeResult} from "@/app/lib/task/project/data";
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
import {DownOutlined} from "@ant-design/icons";
import OperationButton from "@/app/ui/task/project/OperationButton";

type TableRowSelection<T> = TableProps<T>['rowSelection'];


const columns: TableColumnsType<DataType> = [
    {
        title: '任务编码',
        dataIndex: 'code',
        key: 'code',
        width: '10%',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
        width: '20%',
    },
    {
        title: '任务描述',
        dataIndex: 'description',
        width: '30%',
        key: 'description',
    },
    {
        title: '任务状态',
        dataIndex: 'state',
        width: '10%',
        key: 'state',
    },
    {
        title: '优先级',
        dataIndex: 'priority',
        width: '10%',
        key: 'priority',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '10%',
        key: 'action',
    },
];



// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};
function recursionActionChild(children:DataType[]){
    if (children.length===0){
        return;
    }
    children.forEach(item=>{
        item.key=item.id;
        item.action=(<OperationButton itemId={item.id}></OperationButton>)
        recursionActionChild(item.children)
    })
}
const TreeTable: React.FC = () => {
    // const [checkStrictly, setCheckStrictly] = useState(false);
    const [data, setData] = useState<DataType[]>([]);
    const [pageNumber, setPageNumber] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    useEffect(() => {
        console.log("useEffect::taskTreeResult")
        taskTreeResult().then((result:ResponseVO<ResultPage<DataType>>)=>{
            if (result.status.success){
                recursionActionChild(result.data.content);
                setData(result.data.content)
            }
        })
    }, []);
    return (
        <>
            {/*<Space align="center" style={{ marginBottom: 16 }}>*/}
            {/*    CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
            {/*</Space>*/}
            <Button type="primary">添加主线任务</Button>
            <ColorPicker defaultValue="#1677ff" showText/>
            <Table
                columns={columns}
                // rowSelection={{ ...rowSelection, checkStrictly}}
                dataSource={data}
            />
        </>
    );
};

export default TreeTable;
