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

const { Option } = Select;
const { RangePicker } = DatePicker;

// 组织架构树数据
const treeData = [
    {
        title: '飞利信科技有限公司',
        value: '0-0',
        key: '0-0',
        children: [
            {
                title: '技术部',
                value: '技术部',
                key: '0-0-0',
                children: [
                    { title: '前端组', value: '前端组', key: '0-0-0-0' },
                    { title: '后端组', value: '后端组', key: '0-0-0-1' },
                    { title: '测试组', value: '测试组', key: '0-0-0-2' }
                ],
            },
            {
                title: '产品部',
                value: '产品部',
                key: '0-0-1',
                children: [
                    { title: '产品设计组', value: '产品设计组', key: '0-0-1-0' },
                    { title: '用户体验组', value: '用户体验组', key: '0-0-1-1' },
                    { title: '产品运营组', value: '产品运营组', key: '0-0-1-2' }
                ],
            },
            {
                title: '运营部',
                value: '运营部',
                key: '0-0-2',
                children: [
                    { title: '市场营销组', value: '市场营销组', key: '0-0-2-0' },
                    { title: '客户服务组', value: '客户服务组', key: '0-0-2-1' },
                    { title: '商务合作组', value: '商务合作组', key: '0-0-2-2' }
                ],
            },
            {
                title: '财务部',
                value: '财务部',
                key: '0-0-3',
                children: [
                    { title: '会计组', value: '会计组', key: '0-0-3-0' },
                    { title: '审计组', value: '审计组', key: '0-0-3-1' }
                ],
            },
            {
                title: '人事部',
                value: '人事部',
                key: '0-0-4',
                children: [
                    { title: 'HR专员组', value: 'HR专员组', key: '0-0-4-0' },
                    { title: '招聘组', value: '招聘组', key: '0-0-4-1' },
                    { title: '培训组', value: '培训组', key: '0-0-4-2' },
                    { title: '薪酬组', value: '薪酬组', key: '0-0-4-3' }
                ],
            },
        ],
    },
];

const WorkReportRenderSimpleForm = (props) => {
    const [form] = Form.useForm();
    const [expandForm, setExpandForm] = useState(false);
    const { handleSearch, handleFormReset, params } = props;
    
    React.useEffect(() => {
        form.setFieldsValue({
            workType: params?.workType,
            workPerson: params?.workPerson,
            department: params?.department,
            workDateRange: params?.workDateRange,
            durationMin: params?.durationMin,
            durationMax: params?.durationMax,
            quantityMin: params?.quantityMin,
            quantityMax: params?.quantityMax,
        });
    }, [params]);

    const onFinish = values => {
        const searchParams = {
            ...values,
            startDate: values.workDateRange ? values.workDateRange[0]?.format('YYYY-MM-DD') : undefined,
            endDate: values.workDateRange ? values.workDateRange[1]?.format('YYYY-MM-DD') : undefined,
        };
        delete searchParams.workDateRange;
        
        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="workType"
                            label="作业类型"
                        >
                            <Select
                                placeholder="请选择作业类型"
                                allowClear
                            >
                                <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="workPerson"
                            label="作业人员"
                        >
                            <Input
                                placeholder="请输入作业人员姓名"
                                allowClear
                                prefix={<UserOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="department"
                            label="部门"
                        >
                            <TreeSelect
                                placeholder="请选择部门"
                                treeData={treeData}
                                style={{ width: '100%' }}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                treeDefaultExpandAll
                                showSearch
                                treeNodeFilterProp="title"
                                allowClear
                                suffixIcon={<TeamOutlined />}
                            />
                        </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="workDateRange"
                                label="作业时间"
                            >
                                <RangePicker
                                    placeholder={['开始日期', '结束日期']}
                                    style={{ width: '100%' }}
                                    allowClear
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="持续时长(小时)"
                            >
                                <Input.Group compact>
                                    <Form.Item
                                        name="durationMin"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最少时长"
                                            min={0}
                                            max={24}
                                            step={0.5}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                    <span style={{ 
                                        display: 'inline-block', 
                                        width: '4%', 
                                        textAlign: 'center', 
                                        lineHeight: '32px' 
                                    }}>
                                        -
                                    </span>
                                    <Form.Item
                                        name="durationMax"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最多时长"
                                            min={0}
                                            max={24}
                                            step={0.5}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                </Input.Group>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="作业数量"
                            >
                                <Input.Group compact>
                                    <Form.Item
                                        name="quantityMin"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最少数量"
                                            min={0}
                                            max={100}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                    <span style={{ 
                                        display: 'inline-block', 
                                        width: '4%', 
                                        textAlign: 'center', 
                                        lineHeight: '32px' 
                                    }}>
                                        -
                                    </span>
                                    <Form.Item
                                        name="quantityMax"
                                        noStyle
                                    >
                                        <InputNumber
                                            placeholder="最多数量"
                                            min={0}
                                            max={100}
                                            style={{ width: '48%' }}
                                        />
                                    </Form.Item>
                                </Input.Group>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                name="timeRange"
                                label="时间段筛选"
                            >
                                <Select placeholder="请选择时间段" allowClear>
                                    <Option value="morning">上午(8:00-12:00)</Option>
                                    <Option value="afternoon">下午(12:00-18:00)</Option>
                                    <Option value="evening">晚上(18:00-22:00)</Option>
                                    <Option value="fullday">全天</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                )}
            </Form>
        </div>
    );

};

export default WorkReportRenderSimpleForm;
