import './proj-new.css';
import {Link, useNavigate} from "react-router-dom";
import {Breadcrumb, Button, Flex, Form, type FormProps, Input} from "antd";

const {TextArea} = Input;

type FieldType = {
    projTitle: string;
    projDesc: string;
};

export default function ProjNew() {
    const nav = useNavigate();

    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        console.log('Success:', values);

    };

    const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const onBack = () => {
        nav(-1);
    }

    return (
        <>
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <Link to={'/proj-new'}>新建项目</Link>},
                ]}
            />
            <div className="proj-new">
                <div className="proj-title">请完善项目的基本信息</div>
                <div className="proj-form">
                    <Form
                        name="basic"
                        layout={'vertical'}
                        labelCol={{span: 24}}
                        wrapperCol={{span: 24}}
                        style={{width: 500}}
                        initialValues={{remember: true}}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            label="系统标题"
                            name="projTitle"
                            rules={[{required: true, message: '请输入系统标题'}]}
                        >
                            <Input placeholder="请输入系统标题"/>
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="简单描述"
                            name="projDesc"
                            rules={[{required: true, message: '请输入简单描述'}]}
                        >
                            <TextArea rows={6} placeholder="请用一段话简单描述系统"/>
                        </Form.Item>

                        <Form.Item>
                            <Flex align="center" justify="center" gap="large">
                                <Button type="primary" htmlType="submit">
                                    提交并付款
                                </Button>
                                <Button type="default" htmlType="button" onClick={onBack}>
                                    返回上一级
                                </Button>
                            </Flex>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </>
    )
}