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

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker; 
const AttendancedataAddRenderSimpleForm = (props) => {
    const [form] = Form.useForm();
    const [expandForm, setExpandForm] = useState(false);
    const { submitButtons, handleSearch, handleFormReset, toggleForm, params } = props;
    
    React.useEffect(() => {
        form.setFieldsValue({
            employeeId: params?.employeeId,
            employeeName: params?.employeeName,
            unit: params?.unit,
            department: params?.department,
            dateRange: params?.dateRange,
            attendanceStatus: params?.attendanceStatus,
        });
    }, [params]);

    const onFinish = values => {
        const searchParams = {
            ...values,
            dateRange: values.dateRange ? [
                values.dateRange[0].format('YYYY-MM-DD'),
                values.dateRange[1].format('YYYY-MM-DD')
            ] : undefined,
        };
        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="employeeId"
                            label="员工ID"
                        >
                            <Input
                                placeholder="请输入员工ID"
                                allowClear
                                prefix={<UserOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="employeeName"
                            label="员工姓名"
                        >
                            <Input
                                placeholder="请输入员工姓名"
                                allowClear
                                prefix={<UserOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="unit"
                            label="单位"
                        >
                            <Select 
                                placeholder="请选择单位" 
                                allowClear
                                suffixIcon={<ApartmentOutlined />}
                            >
                                <Option value="company1">飞利信科技有限公司</Option>
                                <Option value="company2">飞利信软件分公司</Option>
                                <Option value="company3">飞利信研发中心</Option>
                            </Select>
                        </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="部门"
                            >
                                <TreeSelect
                                    placeholder="请选择部门"
                                    allowClear
                                    treeDefaultExpandAll
                                    suffixIcon={<TeamOutlined />}
                                    treeData={[
                                        {
                                            title: '技术部',
                                            value: 'tech',
                                            children: [
                                                { title: '前端组', value: 'tech-frontend' },
                                                { title: '后端组', value: 'tech-backend' },
                                                { title: '测试组', value: 'tech-test' }
                                            ]
                                        },
                                        {
                                            title: '产品部',
                                            value: 'product',
                                            children: [
                                                { title: '产品设计组', value: 'product-design' },
                                                { title: '用户体验组', value: 'product-ux' }
                                            ]
                                        },
                                        {
                                            title: '运营部',
                                            value: 'operation',
                                            children: [
                                                { title: '市场营销组', value: 'operation-marketing' },
                                                { title: '客户服务组', value: 'operation-service' }
                                            ]
                                        },
                                        { title: '财务部', value: 'finance' },
                                        { title: '人事部', value: 'hr' }
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                name="dateRange"
                                label="日期范围"
                            >
                                <RangePicker 
                                    placeholder={['开始日期', '结束日期']}
                                    style={{ width: '100%' }}
                                    format="YYYY-MM-DD"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                name="attendanceStatus"
                                label="考勤状态"
                            >
                                <Select placeholder="请选择考勤状态" allowClear>
                                    <Option value="normal">正常</Option>
                                    <Option value="late">迟到</Option>
                                    <Option value="early">早退</Option>
                                    <Option value="absence">缺勤</Option>
                                    <Option value="leave">请假</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                )}
            </Form>
        </div>
    );

};

export default AttendancedataAddRenderSimpleForm;
