import React, { useState } from 'react';
import { Button, Col, Form, Input, Row, message, Select, Space, InputNumber } from 'antd';
import { ClearOutlined, SearchOutlined, ExpandOutlined, CompressOutlined, UserOutlined, PhoneOutlined, IdcardOutlined, TeamOutlined } from '@ant-design/icons';
import styles from "../PerformanceList.less";

const FormItem = Form.Item;
const { Option } = Select; 
const PerformanceRenderSimpleForm = (props) => {
    const [form] = Form.useForm();
    const [expandForm, setExpandForm] = useState(false);
    const { submitButtons, handleSearch, handleFormReset, toggleForm, params } = props;
    
    React.useEffect(() => {
        form.setFieldsValue({
            name: params?.name,
            phone: params?.phone,
            idCard: params?.idCard,
            department: params?.department,
            gender: params?.gender,
            ageMin: params?.ageMin,
            ageMax: params?.ageMax,
            performanceStatus: params?.performanceStatus,
        });
    }, [params]);

    const onFinish = values => {
        const searchParams = {
            ...values,
            // 年龄范围验证
            ageMin: values.ageMin,
            ageMax: values.ageMax,
        };
        
        // 验证年龄范围
        if (values.ageMin && values.ageMax && values.ageMin > values.ageMax) {
            message.error("最小年龄不能大于最大年龄！");
            return;
        }
        
        handleSearch && handleSearch(searchParams);
    };

    const myhandleFormReset = () => {
        form.resetFields();
        handleFormReset && handleFormReset();
    };

    const toggleExpandForm = () => {
        setExpandForm(!expandForm);
    };

    return (
        <div className={styles.searchFormContainer}>
            <Form
                form={form}
                onFinish={onFinish}
                layout="vertical"
                className={styles.searchForm}
            >
                <Row gutter={16}>
                    <Col span={6}>
                        <Form.Item
                            name="name"
                            label="姓名"
                        >
                            <Input
                                placeholder="请输入姓名"
                                allowClear
                                prefix={<UserOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="phone"
                            label="电话"
                        >
                            <Input
                                placeholder="请输入电话"
                                allowClear
                                prefix={<PhoneOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="idCard"
                            label="身份证号"
                        >
                            <Input
                                placeholder="请输入身份证号"
                                allowClear
                                prefix={<IdcardOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label=" " colon={false}>
                            <Space size="middle">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    icon={<SearchOutlined />}
                                    className={styles.searchButton}
                                >
                                    查询
                                </Button>
                                <Button
                                    onClick={myhandleFormReset}
                                    icon={<ClearOutlined />}
                                    className={styles.resetButton}
                                >
                                    重置
                                </Button>
                                <Button
                                    type="link"
                                    onClick={toggleExpandForm}
                                    icon={expandForm ? <CompressOutlined /> : <ExpandOutlined />}
                                    className={styles.expandButton}
                                >
                                    {expandForm ? '收起' : '展开'}
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>

                {/* 展开的表单项 */}
                {expandForm && (
                    <Row gutter={16}>
                        <Col span={6}>
                            <Form.Item
                                name="department"
                                label="部门"
                            >
                                <Select 
                                    placeholder="请选择部门" 
                                    allowClear
                                    suffixIcon={<TeamOutlined />}
                                >
                                    <Option value="技术部">技术部</Option>
                                    <Option value="产品部">产品部</Option>
                                    <Option value="运营部">运营部</Option>
                                    <Option value="财务部">财务部</Option>
                                    <Option value="人事部">人事部</Option>
                                    <Option value="市场部">市场部</Option>
                                    <Option value="销售部">销售部</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                name="gender"
                                label="性别"
                            >
                                <Select placeholder="请选择性别" allowClear>
                                    <Option value="男">男</Option>
                                    <Option value="女">女</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="年龄范围"
                            >
                                <Input.Group compact>
                                    <Form.Item
                                        name="ageMin"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最小年龄"
                                            min={18}
                                            max={65}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                    <span style={{ 
                                        display: 'inline-block', 
                                        width: '4%', 
                                        textAlign: 'center', 
                                        lineHeight: '32px' 
                                    }}>
                                        -
                                    </span>
                                    <Form.Item
                                        name="ageMax"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最大年龄"
                                            min={18}
                                            max={65}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                </Input.Group>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                name="performanceStatus"
                                label="绩效状态"
                            >
                                <Select placeholder="请选择绩效状态" allowClear>
                                    <Option value="excellent">优秀</Option>
                                    <Option value="good">良好</Option>
                                    <Option value="qualified">合格</Option>
                                    <Option value="unqualified">不合格</Option>
                                    <Option value="pending">待评估</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                )}
            </Form>
        </div>
    );

};

export default PerformanceRenderSimpleForm;
