import React, {useCallback, useEffect} from 'react';
import {Button, Col, DatePicker, Flex, Form, Input, message, Row, Select} from "antd";
import {useForm} from "antd/es/form/Form";
import {PlusOutlined, RedoOutlined, SearchOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import creatMessageCommonAxios from "../../../../http/CreatMessageCommonAxios";
import {debounce} from "lodash";

QueryConditionBox.propTypes = {};

function QueryConditionBox(props) {

    const {setQueryRequest, setLoading} = props;

    const [messageApi, contextHolder] = message.useMessage();

    const [form] = useForm();

    const commonAxios = creatMessageCommonAxios(messageApi);

    const [staffInfo, setStaffInfo] = React.useState([]);

    const onReset = () => {
        form.resetFields();
        setQueryRequest({
            page: 1,
            size: 6,
            id: null,
            staffNumber: null,
            fileType: null,
            status: null,
            startTime: null,
            endTime: null
        })
        setLoading(true)
    }

    const onFinish = () => {
        const newRequest = {
            page: 1,
            size: 6,
            id: form.getFieldValue('id'),
            staffNumber: form.getFieldValue('staffNumber'),
            fileType: form.getFieldValue('fileType'),
            status: form.getFieldValue('status'),
            startTime: form.getFieldValue('time-range') ? form.getFieldValue('time-range')[0] : null,
            endTime: form.getFieldValue('time-range') ? form.getFieldValue('time-range')[1] : null
        };
        setQueryRequest(newRequest);
        setLoading(true)
    }

    const fetchStaffInfo = (value) => {
        commonAxios.get(`/api/auth/query/registered?page=1&size=10&staffNumber=${value}&precise=false`)
            .then((response) => {
                let staffInfoList = response.data.data.list || [];
                setStaffInfo(staffInfoList);
            })
    }

    const debouncedFetchStaffInfo = useCallback(debounce(fetchStaffInfo, 150), []);

    const navigate = useNavigate();

    useEffect(() => {
        commonAxios.get(`/api/auth/query/registered?page=1&size=10&precise=false`)
            .then((response) => {
                let staffInfoList = response.data.data.list || [];
                setStaffInfo(staffInfoList);
            })
    }, []);

    return (
        <div className={'query-condition-box'}>
            {contextHolder}
            <Form form={form}
                  onFinish={onFinish}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item label={"编号"} name='id'>
                            <Input
                                allowClear
                                placeholder={'证明编号'}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label={"教师"} name='staffNumber'>
                            <Select
                                mode="multiple"
                                placeholder={'输入工号搜索'}
                                showSearch
                                allowClear
                                maxTagCount={'responsive'}
                                onSearch={debouncedFetchStaffInfo}
                                options={(staffInfo || []).map(item => ({
                                    value: item.staffNumber,
                                    label: `${item.name} (${item.staffNumber})`
                                }))}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label={"类型"} name='fileType'>
                            <Select
                                placeholder="请选择证明类型"
                                options={[
                                    {
                                        value: '01',
                                        label: '本科教学课时证明'
                                    },
                                    {
                                        value: '02',
                                        label: '任职后工作情况证明'
                                    }
                                ]}
                                style={{minWidth: 180}}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label={"状态"} name='status'>
                            <Select
                                placeholder="请选择生成状态"
                                options={[
                                    {
                                        value: '01',
                                        label: '生成中'
                                    },
                                    {
                                        value: '02',
                                        label: '生成成功'
                                    },
                                    {
                                        value: '03',
                                        label: '生成失败'
                                    },
                                    {
                                        value: '04',
                                        label: '失效'
                                    },
                                ]}
                                style={{minWidth: 120}}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={10}>
                        <Form.Item label={"申请时间"} name='time-range'>
                            <DatePicker.RangePicker showTime/>
                        </Form.Item>
                    </Col>
                </Row>
                <Flex justify={"space-between"} align={"center"}>
                    <Flex justify={"start"} align={"center"}>
                        <Button icon={<PlusOutlined/>}
                                onClick={() => navigate('/generate-certificate')}>生成新报告</Button>
                    </Flex>
                    <Flex justify={"center"} align={"center"} gap={"large"}>
                        <Button type={"primary"} htmlType={"submit"} icon={<SearchOutlined/>}>搜索</Button>
                        <Button type={"default"} onClick={onReset} icon={<RedoOutlined/>}>重置</Button>
                    </Flex>
                </Flex>

            </Form>
        </div>
    );
}

export default QueryConditionBox;