import React, {Fragment} from "react";
import {Button, Dropdown, MenuProps, Modal, Popconfirm, Space} from "antd";
import {DownOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import {DetailForm} from "@/app/ui/task/project/DetailForm";

export interface OperationButtonProps {
    itemId: number
}
interface OperationModelProps {
    operationId: string,
    openModal:boolean
}
class OperationButton extends React.Component<OperationButtonProps,OperationModelProps> {

    constructor(props: OperationButtonProps) {
        super(props);
        this.state = {
            operationId: '',
            openModal:false
        };
    }
    render() {
        const handleCancel =()=>{
            this.setState({...this.state,openModal:false})
        }
        const items: MenuProps['items'] = [
            {
                key: '1',
                label: <a onClick={(e) => {
                    this.setState({...this.state,openModal:true})
                }}>详情</a>,
            },
            {
                key: '2',
                label: <a onClick={(e) => {
                    this.setState({...this.state,openModal:true})
                }}>添加下级</a>,
            },
            {
                key: '3',
                label: <a onClick={(e) => {
                    this.setState({...this.state,openModal:true})
                }}>修改</a>,
            }
            ,
            {
                key: '4',
                label: <Popconfirm
                    title="删除任务"
                    description="确认要删除任务?"
                    icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
                    okText="确认"
                    cancelText="取消"
                >删除</Popconfirm>,
            }
            ,
            {
                key: '5',
                label: <Popconfirm
                    title="完成任务"
                    description="确认要完成任务?"
                    okText="确认"
                    cancelText="取消"
                >完成</Popconfirm>,
            }
        ];
        return <Fragment>
            <Dropdown menu={{items}}>
                <a onClick={(e) => {
                    e.preventDefault()
                }}>
                    <Space>
                        操作<DownOutlined/>
                    </Space>
                </a>
            </Dropdown>
            <Modal
                open={this.state.openModal}
                title="Title"
                // open={open}
                // onOk={handleOk}
                onCancel={handleCancel}
                // footer={[
                //     <Button key="back" onClick={handleCancel}>
                //         Return
                //     </Button>,
                //     <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
                //         Submit
                //     </Button>,
                //     <Button
                //         key="link"
                //         href="https://google.com"
                //         type="primary"
                //         loading={loading}
                //         onClick={handleOk}
                //     >
                //         Search on Google
                //     </Button>,
                // ]}
            >
                <DetailForm itemId={this.props.itemId} operationId={'1'}/>
            </Modal>
        </Fragment>
    }
}

export default OperationButton;