import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Pagination, Card, Button, Icon, Tooltip, message, notification, Modal, Table, Select, Input, DatePicker } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import className from 'classnames';
import Cell from '../../components/Cell';
import styles from './style.less';
import { fetch, apis } from '../../utils/request';
import request from '../../utils/request';
import AuthButton from '@/components/AuthButton';
import SelectContact from './components/SelectContact';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

function header(props) {
    // 获取初始化数据
    const [data, setData] = useState({})
    const [contactList, setContactList] = useState([])
    const [contactVisible, setContactVisible] = useState(false)

    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 });
    }, [])

    // 查询列表
    const getList = (params) => {
        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
            console.log(data)
            setData(data)
        })
    }


    // 提交事件
    const handleSubmit = (e, props) => {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                let { createDate, ...submitValue } = values
                if (null != createDate && createDate.length > 0) {
                    const [startCreateDate, endCreateDate] = createDate
                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
                } else {
                    submitValue.startCreateDate = null
                    submitValue.endCreateDate = null
                }
                getList({ pageNum: 1, pageSize: 10, ...submitValue })
            }
        });
    }

    const changePageNum = (pageNumber) => {
        let { createDate, ...submitValue } = props.form.getFieldsValue()
        if (null != createDate && createDate.length > 0) {
            const [startCreateDate, endCreateDate] = createDate
            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
        } else {
            submitValue.startCreateDate = null
            submitValue.endCreateDate = null
        }
        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
    }

    /**
     *
     *
     * @param {*} props
     * @returns
     */
    const columns = [
        {
            title: '姓名',
            dataIndex: 'sampleName',
            key: 'sampleName',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'orgName',
            key: 'orgName',
            align: 'center',
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            align: 'center',
            render: (text, record) => <img src={record.avatar} className={styles.touxiang} />,
        },
        {
            title: '固话',
            dataIndex: 'orderer',
            key: 'orderer4',
            align: 'center',
        },
        {
            title: '手机号',
            dataIndex: 'orderer',
            key: 'orderer3',
            align: 'center',
        },
        {
            title: '对外头衔',
            dataIndex: 'orderer',
            key: 'orderer2',
            align: 'center',
        },
        {
            title: '权重',
            dataIndex: 'orderer',
            key: 'orderer1',
            align: 'center',
        },

    ];
    function handleReset() {
        props.form.resetFields();
        getList({ pageNum: 1, pageSize: 10 })
    }

    const toDeatil = () => {
        router.push({
            pathname: '/fundManagement/AccountDetail',
        });
    }

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
            setContactList(selectedRows)
        },
    };
    const toAdd = (id) => () => {
        console.log('hhhhhhhhhhhhhhh')
        setContactVisible(true)
    }
    const toDel = rowData => () => {
        if (contactList.length < 1) {
            message.info('请至少选择一条数据')
            return
        }

        Modal.confirm({
            title: '确定删除联系人信息吗',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                request({ ...apis.contact.batchDeleteContact, data: contactList, }).then((data) => {
                    message.info("操作成功")
                    getList({ pageNum: 1, pageSize: 10 });
                }).catch((err) => {

                })
            },
            onCancel() { },
        });
    }
    const { getFieldDecorator } = props.form
    return (

        <>
            {/* {contactVisible && <SelectContact />} */}
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} >
                <Form.Item>
                    {getFieldDecorator('name')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="姓名"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('Telephone')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="固话"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('phone')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="手机号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('title')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="对外头衔"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
                        搜索
                    </Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
            <div style={{ margin: '10px 0 16px 0' }}>
                <Button type="danger" className={styles.addBtn} onClick={toAdd()}><SelectContact /></Button>
                <Button type="primary" className={styles.addBtn} onClick={toDel()} style={{ marginLeft: '30px' }} >删除</Button>
            </div>
            <Table rowSelection={rowSelection} rowKey="newsType" dataSource={data.records} columns={columns} pagination={false} />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
            </div>
        </>
    )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader