import React, { useState } from 'react';
import ActiveField from '../../components/ActiveField';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Popover, Button, Divider, Form } from 'antd';
import './index.less'


export interface LeftToolButtonProps {
    fieldList: any[]
    referRuleInfo: object
    onSearchHandleOk: (val: any) => void
    onRefresh: () => void
}
const LeftToolButton: React.FC<LeftToolButtonProps> = (props) => {
    console.log('LeftToolButton的props', props);
    const { fieldList, referRuleInfo, onSearchHandleOk, onRefresh } = props
    const [popoverVisible, setPopoverVisible] = useState<any>(false)
    const [searchForm] = Form.useForm();
    const [fullFormContent, setFullFormContent] = useState<any>({})

    const text = <span>查询</span>;
    const content = (
        <div className="popoverContent">
            {/* <p>Content</p> */}
            <Form
                form={searchForm}
                layout="horizontal"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                labelAlign="right">
                {/* {console.log('渲染formItem')} fieldList*/}
                {fieldList ? fieldList.filter((x: any) => x.ISDISPLAY && x.ISQUERY).map((item: any) => {
                    return (
                        <ActiveField
                            key={item.OBJECTRRN}
                            field={item}
                            referRuleInfo={referRuleInfo}
                            formDetail={fullFormContent}
                            formType="searchForm"
                            onChange={(val) => {
                                setFullFormContent({ ...fullFormContent, ...val })
                            }}
                        />
                    )
                }) : null}
            </Form>
            <Divider />
            <div className="popoverBtn">
                <Button type="primary" onClick={() => { handelSearchOk(false) }}>确认</Button>&nbsp;
                <Button onClick={() => { handelSearchCancel(false) }}>取消</Button>
            </div>
        </div>
    );
    const handelSearchOk = (v: any) => {
        searchForm.validateFields().then((res: object) => {
            console.log('搜索表单校验', res);
            onSearchHandleOk({ ...res })
            setPopoverVisible(v)
        }).catch(err => console.log(err))
    }
    const handelSearchCancel = (v: any) => {
        setPopoverVisible(v)
    }
    return (
        <div className="toolButton">
            <Popover
                visible={popoverVisible}
                onVisibleChange={(v) => { setPopoverVisible(v); }}
                placement="bottomLeft"
                title={text}
                content={content}
                trigger="click">
                <Button icon={<SearchOutlined /> } >
                    查询
                </Button>
            </Popover>
            <Button
                icon={<ReloadOutlined />}
                onClick={() => {
                    searchForm.resetFields()
                    onRefresh()
                }}>刷新</Button>
        </div>
    )

}
export default LeftToolButton;