import './proj-edit-step.css';
import { Col, Flex, message, Modal, Row, Select, Spin } from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put } from "../../../util/AjaxUtils.ts";
import { Button, Form, Input } from 'antd';
import { AxiosResponse } from "axios";

const { TextArea } = Input;

type FieldType = {
    projName: string;
    projIntroduction: string;
    projStyleType: string;
    projCodeType: string;
    projDesc: string;
};

export default function ProjEditStep1(props: any) {
    // const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FieldType>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const height = window.innerHeight - 200
    // 初始化表格数据
    useEffect(() => {
        get({
            messageApi,
            url: `/api/proj/get/edit-step1/${pathParams.projId}`,
            onSuccess({ data }: AxiosResponse) {
                form.setFieldsValue({
                    projName: data.projName,
                    projIntroduction: data.projIntroduction,
                    projStyleType: data.projStyleType,
                    projCodeType: data.projCodeType,
                    projDesc: data.projDesc
                })
            }
        })
    }, [])

    return (
        <div style={{ height: `${height}px`, overflow: 'auto' }}>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
                    {title: '标题简介'},
                ]}
            /> */}
            {/* <div className="form-container" style={{ height: `${height}px` }}> */}
            <div className="form-container" style={{ paddingBottom: '13px', boxSizing: "border-box" }}>
                <div className='Step-title'>
                    <div className='Step-titlel'></div>
                    <div className='Step-titler'>标题简介</div>
                </div>
                <div className="form-body">
                    <Form
                        name="basic"
                        form={form}
                        layout="vertical"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 24 }}
                        // style={{ width: '600px' }}
                        onFinish={() => {
                            setIsEditModalOpen(true);
                        }}
                        autoComplete="off"
                    >
                        <Row gutter={15}>
                            <div className='projNameInt'>
                                <div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
                                <Form.Item<FieldType>
                                    // label="项目名称"
                                    name="projName"
                                    rules={[{ required: true, message: '请输入项目名称' }]}
                                >
                                    <Input
                                        style={{ height: '50px', width: '300px', fontSize: '16px' }}
                                    />
                                </Form.Item>
                            </div>
                            <div className='projNameInt'>
                                <div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
                                <Form.Item<FieldType>
                                    // label="样式类型"
                                    name="projStyleType"
                                    rules={[{ required: true, message: '请选择样式类型' }]}
                                >
                                    <Select
                                        style={{ height: '50px', width: '300px', fontSize: '16px' }}
                                        placeholder="请选择样式类型"
                                        onChange={(value: string) => {
                                            console.log(`selected ${value}`);
                                        }}
                                        options={[
                                            { value: 'DEFAULT', label: '默认(WEB)' },
                                        ]}
                                    />
                                </Form.Item>
                            </div>
                            <div className='projNameInt'>
                                <div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
                                <Form.Item<FieldType>
                                    // label="代码类型"
                                    name="projCodeType"
                                    rules={[{ required: true, message: '请选择代码类型' }]}
                                >
                                    <Select
                                        style={{ height: '50px', width: '300px', fontSize: '16px' }}
                                        placeholder="请选择代码类型"
                                        onChange={(value: string) => {
                                            console.log(`selected ${value}`);
                                        }}
                                        options={[
                                            { value: 'code1', label: '默认类型' },
                                        ]}
                                    />
                                </Form.Item>
                            </div>


                        </Row>
                        <Row gutter={15}>
                            <Col span={24}>
                                <div className='projNameInt'>
                                    <div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
                                    <div style={{ width: '1250px' }}>

                                        <Form.Item<FieldType>
                                            // label="项目简介"
                                            name="projIntroduction"
                                            rules={[{ required: true, message: '请输入项目简介' }]}
                                        >
                                            <TextArea
                                                style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
                                                rows={3} placeholder="请用一段话简单描述系统"
                                            />
                                        </Form.Item>
                                    </div>

                                </div>
                            </Col>
                        </Row>
                        <Row gutter={15}>


                        </Row>
                        <Row gutter={15}>
                            <Col span={24}>
                                <div className='projNameInt' >
                                    <div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
                                    <div style={{ width: '1250px' }}>
                                        <Form.Item<FieldType>
                                            // label="项目详细介绍"
                                            name="projDesc"
                                            extra="请对项目做出详细介绍，此内容在操作手册中引用"
                                            rules={[{ required: true, message: '请输入项目详细介绍' }]}
                                        >
                                            <TextArea
                                                style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
                                                rows={8} placeholder="请输入项目详细介绍" />
                                        </Form.Item>
                                    </div>
                                </div>

                            </Col>
                        </Row>

                        <div className='setProBtn'>
                            <Form.Item wrapperCol={{ span: 24 }}>
                                <Flex align="center" justify="center" gap="large">
                                    <Button type="default" htmlType="button"
                                        // style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
                                        size='large'
                                        onClick={() => {
                                            props.closeModal()
                                           
                                        }}>
                                        关闭
                                    </Button>
                                    <Button type="primary"
                                        htmlType="submit"
                                        // style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
                                        size='large'
                                    >
                                        保存
                                    </Button>

                                </Flex>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
            </div>

            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                destroyOnClose={true}
                open={isEditModalOpen}
                onOk={() => {
                    setIsEditModalOpen(false);
                    put({
                        messageApi,
                        url: `/api/proj/update/edit-step1/${pathParams.projId}`,
                        body: {
                            projName: form.getFieldValue('projName'),
                            projIntroduction: form.getFieldValue('projIntroduction'),
                            projStyleType: form.getFieldValue('projStyleType'),
                            projCodeType: form.getFieldValue('projCodeType'),
                            projDesc: form.getFieldValue('projDesc'),
                        },
                        onBefore() {
                            setLoading(true);
                        },
                        onSuccess() {
                            messageApi.open({
                                type: 'success',
                                content: '编辑成功'
                            })
                            setTimeout(() => {
                                props.closeModal()
                                // window.location.reload(); // 刷新页面
                            }, 500);

                        },
                        onFinally() {
                            setLoading(false);
                        }
                    })
                }}
                onCancel={() => {
                    setIsEditModalOpen(false);
                }}>
                <div>确定提交吗？</div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />

        </div>
    )

}