import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import styles from './style.less';
import { fetch, apis } from '../../../utils/request';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';

function header(props) {

    const [data, setData] = useState([])
    const [contactList, setContactList] = useState([])
    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 });
    }, [])
    // 查询列表
    const getList = params => {
        request({ ...apis.contact.listContactByCondition, params: { ...params } }).then(data => {
            console.log(data)
            setData(data)
        })
    }

    const toAdd = (id) => () => {
        router.push({
            pathname: '/contact/contact/add',
            //   query: {
            //     id
            //   },
        });
    }

    const toEdit = (id) => () => {
        router.push({
            pathname: '/contact/contact/detail',
            query: {
                id
            },
        });
    }

    const handleSubmit = (e, props) => {
        console.log(e)
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ pageNum: 1, pageSize: 10, ...values })
            }
        });
    }

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

    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 rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
            setContactList(selectedRows)
        },
    };

    const changePageNum = pageNumber => {
        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
    }

    const columns = [
        {
            title: '姓名',
            dataIndex: 'contactName',
            key: 'contactName',
            align: 'center',

        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            render: (sex) => <span>{sex != null ? (sex === 1 ? '男' : '女') : ""}</span>,
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            key: 'avatar',
            align: 'center',
            render: (text, record) => <img src={record.avatar} className={styles.touxiang} />,
        },
        {
            title: '固话',
            dataIndex: 'telephone',
            key: 'telephone',
            align: 'center',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '内部岗位',
            dataIndex: 'job',
            key: 'job',
            align: 'center',

        },
        {
            title: '权重',
            dataIndex: 'orderNo',
            key: 'orderNo',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            align: 'center',
            render: (x, row) => (
                <>
                    <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEdit(row.contactId)}>
                        查看详情 
                    </span>
                </>
            ),
        },
    ];

    const { getFieldDecorator } = props.form
    return (

        <>
            <div>
                <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                    <Form.Item>
                        {getFieldDecorator('contactName')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="姓名"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('telephone')(
                            <Input style={{ width: '180px' }} placeholder="固话">

                            </Input>,
                        )}
                    </Form.Item>

                    <Form.Item>
                        {getFieldDecorator('phone')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="手机号"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('job')(
                            <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>

                <Button type="danger" className={styles.addBtn} onClick={toAdd()}>新增</Button>

                <Button type="primary" className={styles.addBtn} onClick={toDel()} style={{ marginLeft: '30px' }} >删除</Button>

                <Table rowSelection={rowSelection} rowKey={r => r.contactId} dataSource={data.records} columns={columns} pagination={false} />

                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                    {<Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current} />}
                </div>
            </div>
        </>
    )
}

const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader