import './proj-edit-step.css';
import {Breadcrumb, Col, message, Row} from "antd";
import {Link, useParams} from "react-router-dom";
import {useEffect} from "react";
import {get} from "../../../util/AjaxUtils.ts";
import {Form, Input} from 'antd';
import {AxiosResponse} from "axios";

type FieldType = {
    applyName: string;
    applyPhone: string;
    applyAddress: string;
    applyZipCode: string;
    applyContactName: string;
    applyContactPhone: string;
    applyContactEmail: string;
    applyContactFax: string;
};

export default function ProjEditStep5Show() {
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FieldType>();
    const height = window.innerHeight - 180;

    useEffect(() => {
        get({
            messageApi,
            url: `/api/proj/get/edit-step5/${pathParams.projId}`,
            onSuccess({data}: AxiosResponse) {
                form.setFieldsValue({
                    applyName: data.applyName,
                    applyPhone: data.applyPhone,
                    applyAddress: data.applyAddress,
                    applyZipCode: data.applyZipCode,
                    applyContactName: data.applyContactName,
                    applyContactPhone: data.applyContactPhone,
                    applyContactEmail: data.applyContactEmail,
                    applyContactFax: data.applyContactFax,
                })
            }
        })
    }, [])

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
                    {title: '申请人信息'},
                ]}
            />
            <div className="form-container" style={{height: `${height}px`}}>
                <div className="form-body">
                    <Form
                        name="basic"
                        form={form}
                        layout="vertical"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 24}}
                        style={{width: '800px'}}
                        disabled={true}
                        autoComplete="off"
                    >
                        <Row gutter={15}>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="姓名"
                                    name="applyName"
                                    rules={[{required: true, message: '请输入姓名'}]}
                                >
                                    <Input placeholder="请输入姓名"/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="电话"
                                    name="applyPhone"
                                    rules={[{required: true, message: '请输入电话'}]}
                                >
                                    <Input placeholder="请输入电话"/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={15}>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="地址"
                                    name="applyAddress"
                                    rules={[{required: true, message: '请输入地址'}]}
                                >
                                    <Input placeholder="请输入地址"/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="邮编"
                                    name="applyZipCode"
                                    rules={[{required: true, message: '请输入邮编'}]}
                                >
                                    <Input placeholder="请输入邮编"/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={15}>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="联系人姓名"
                                    name="applyContactName"
                                    rules={[{required: true, message: '请输入联系人姓名'}]}
                                >
                                    <Input placeholder="请输入联系人"/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="联系人手机"
                                    name="applyContactPhone"
                                    rules={[{required: true, message: '请输入联系人手机'}]}
                                >
                                    <Input placeholder="请输入联系人手机"/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={15}>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="联系人邮箱"
                                    name="applyContactEmail"
                                    rules={[{required: true, message: '请输入联系人'}]}
                                >
                                    <Input placeholder="请输入联系人"/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item<FieldType>
                                    label="联系人传真"
                                    name="applyContactFax"
                                    rules={[{required: false, message: '请输入联系人传真'}]}
                                >
                                    <Input placeholder="请输入联系人传真"/>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        </>
    )

}