import { useEffect } from 'react'
import { Button, Col, Form, Input, Row } from 'antd'
import { UpOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons'
import SelectDeptTree from '@/components/SelectDeptTree'
import SelectOrganTree from '@/components/SelectOrganTree'
import style from '@/global.less'

const { Item: FormItem } = Form
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree

const StaffSheetRenderAdvancedForm = (props) => {
    const [form] = Form.useForm()
    const { dispatch, handleSearch, handleFormReset, toggleForm, selectDeptTree, selectOrganTree, params } = props

    useEffect(() => {
        form.setFieldsValue({
            user_name: params?.user_name,
            user_name_cn: params?.user_name_cn,
            deptname: params?.deptname,
            orgname: params?.orgname,
        })
    }, [params])

    const onFinish = values => {
        // if (getDeptTreeBySelectTree) {
        //     values.dept_code = getDeptTreeBySelectTree.dept_code
        //     values.deptname = getDeptTreeBySelectTree.title
        // }

        if (getOrganTreeBySelectTree) {
            values.org_code = getOrganTreeBySelectTree.org_code
            values.orgname = getOrganTreeBySelectTree.title
        }

        handleSearch(values)
    }

    const myHandleFormReset = () => {
        form.resetFields()
        handleFormReset()
    }

    const selectedDeptTreeValue = (deptRecord) => {
        getDeptTreeBySelectTree = deptRecord
    }

    const selectedOrganTreeValue = (orgRecord) => {
        getOrganTreeBySelectTree = orgRecord
    }

    const parentDeptTreeMethod = {
        dispatch: dispatch,
        selectDeptTree: selectDeptTree,
        selectedDeptTreeValue: selectedDeptTreeValue
    }

    const parentOrganTreeMethod = {
        dispatch: dispatch,
        selectOrganTree: selectOrganTree,
        selectedOrganTreeValue: selectedOrganTreeValue
    }

    return (
        <Form form={form} onFinish={onFinish} layout='inline'>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
                <Col md={8} sm={24}>
                    <FormItem label='用户名' name='user_name'>
                        <Input placeholder='请输入' />
                    </FormItem>
                </Col>

                <Col md={8} sm={24}>
                    <FormItem label='用户名称' name='user_name_cn'>
                        <Input placeholder='请输入' />
                    </FormItem>
                </Col>

                <Col md={8} sm={24}>
                    <FormItem label='机构代码' name='orgname'>
                        <SelectOrganTree {...parentOrganTreeMethod} />
                    </FormItem>
                </Col>
            </Row>

            <Row gutter={{md: 8, lg: 24, xl: 48}} className={style.searchBox}>
                {/*<Col md={8} sm={24}>*/}
                {/*    <FormItem label='部门名称' name='deptname'>*/}
                {/*        <SelectDeptTree placeholder={'请选择部门'} {...parentDeptTreeMethod} />*/}
                {/*    </FormItem>*/}
                {/*</Col>*/}

                <Col md={24} sm={24}>
                    <div className={style.searchBtn}>
                        <Button type='primary' htmlType='submit'>
                            查询
                        </Button>

                        <Button onClick={myHandleFormReset}>
                            重置
                        </Button>

                        <a onClick={() => toggleForm(form)}>
                            收起 <UpOutlined />
                        </a>
                    </div>
                </Col>
            </Row>
        </Form>
    )
}

export default StaffSheetRenderAdvancedForm