import React, { useEffect, useState, useRef, useMemo } from 'react';
import { connect } from 'react-redux';
import { Table, Button, Pagination, Skeleton, Form, Tooltip } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import { SkeletonScreen } from "$components";
import '../style.less'
import { Setup } from "$components";
import moment from 'moment'
import { set } from 'nprogress';
import { UserAttribute, isAuthorized } from '$utils'

const employeeInformation = (props) => {
    const { dispatch, actions, history, user, loading, socket, xqMembers } = props

    const { humanAffairs } = actions;

    const form = useRef();//表单
    let [archivesList, setArchivesList] = useState([]);//人员列表
    let [workPlaceList, setWorkPlaceList] = useState([]);//工作地点
    let [nativeList, setNativeList] = useState([]);//户籍地

    const [setup, setSetup] = useState(false);//表格设置是否显现
    const [setupp, setSetupp] = useState([]);//实际显示的表格列表
    const [lookup, setLookup] = useState({});//搜索
    const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
    const [order, setOrder] = useState({ orderBy: 'hiredate', orderDirection: 'DESC' }); //页码信息
    const [limits, setLimits] = useState()//每页实际条数
    const [downloadUrl, setDownloadUrl] = useState('')//下载pdf
    const EMPLOYEEINFORMATION = "employeeInformation";
    const page = useRef(query.page);//哪一页
    const tableList = [//表格属性
        {
            title: '基础信息',
            list: [
                { name: "姓名", value: "userName" },
                { name: "所属部门", value: "departmrnt" },
                { name: "职位", value: "userJob" },
                { name: "岗位", value: "userPost" },
                { name: "在职状态", value: "userActiveStatus" },
                { name: "绩点", value: "gradePoint" },
                { name: "所属机构", value: "userOrganization" },
                { name: "技术职级等级", value: "technicalGrade" },
                { name: "证件号", value: "idNumber" },
                { name: "性别", value: "gender" },
                { name: "籍贯", value: "nativePlace" },
                { name: "出生日期", value: "birthday" },
                { name: "婚育状态", value: "marital" },
                { name: "政治面貌", value: "politicsStatus" },
                { name: "联系方式", value: "phoneNumber" },
                { name: "工作地点", value: "workPlace" },
                { name: "年龄", value: "age" },
            ]
        }, {
            title: '学历信息',
            list: [
                { name: "毕业院校", value: "graduatedFrom" },
                { name: "学历", value: "educationBackground" },
                { name: "专业", value: "specialty" },
                { name: "毕业时间", value: "graduationDate" },
            ]
        }, {
            title: '学历信息',
            list: [
                { name: "入职时间", value: "hiredate" },
                { name: "转正时间", value: "regularDate" },
                { name: "转试用期时间", value: "turnProbationPeriod" },
                { name: "离职日期", value: "dimissionDate" },
                { name: "入职年限", value: "employmentLife" },
                { name: "试用期时间", value: "probationPeriodDate" },
                { name: "工作经验", value: "experienceYear" },
            ]
        }, {
            title: '履历信息',
            list: [
                { name: "历史工作经历与职务", value: "occupationalHistory" },
                { name: "简历", value: "vitae" },
            ]
        }
    ];
    useEffect(() => {
        getMemberNativePlaceList()//查询籍贯列表
        getMemberWorkPlaceList()//查询工作地列表
        localStorage.getItem(EMPLOYEEINFORMATION) == null
            ? localStorage.setItem(
                EMPLOYEEINFORMATION,
                JSON.stringify(['userName', 'departmrnt', 'userJob', 'userPost', 'userActiveStatus', 'gradePoint', 'userOrganization', 'technicalGrade',
                    'hiredate', 'age', 'phoneNumber', 'marital', 'politicsStatus', 'educationBackground',
                    'graduatedFrom', 'employmentLife', 'occupationalHistory'])
            )
            : "";
        attribute();
    }, [])
    useEffect(() => {
        getMemberSearchList()//查询人员列表
    }, [query, order])


    function getMemberSearchList() {//查询人员列表
        let obj = lookup
        if (lookup.entryTime?.length > 1) {
            obj.hiredateStart = moment(lookup.entryTime[0]).format('YYYY-MM-DD')
            obj.hiredateEnd = moment(lookup.entryTime[1]).format('YYYY-MM-DD')
        }
        else {
            obj.hiredateStart = ''
            obj.hiredateEnd = ''
        }
        dispatch(humanAffairs.getMemberList({ ...obj, ...query, ...order })).then((res) => {//查询人员列表
            if (res.success) {
                setArchivesList(res.payload?.data?.rows)
                setLimits(res.payload?.data?.count)
            }
        })
    }
    function getMemberNativePlaceList() {
        dispatch(humanAffairs.getMemberNativePlace()).then((res) => {//查询籍贯列表
            if (res.success) {
                setNativeList(res.payload?.data)
            }
        })
    }
    function getMemberWorkPlaceList() {
        dispatch(humanAffairs.getMemberWorkPlace()).then((res) => {//查询工作地列表
            if (res.success) {
                setWorkPlaceList(res.payload?.data)
            }
        })
    }
    const columns = [
        {
            title: (
                <span>
                    <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 员工编号
                </span>
            ),
            width: 200,
            dataIndex: "userCode",
            key: "userCode",
            sorter: (a, b) => { },
            // sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
            render: (_, r, index) => {
                return (r.userCode ? r.userCode : '-');
            },
        },
    ];
    //获取表格属性设置
    function attribute() {
        const arr = localStorage.getItem(EMPLOYEEINFORMATION)
            ? JSON.parse(localStorage.getItem(EMPLOYEEINFORMATION))
            : [];

        const column = [
            {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 姓名
                    </div>
                ),
                width: 100,
                dataIndex: "userName",
                key: "userName",
                render: (_, r, index) => {
                    return (r.userName ? r.userName : '-');
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 所属部门
                    </div>
                ),
                width: 200,
                dataIndex: "departmrnt",
                key: "departmrnt",
                render: (_, r, index) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            {
                                r.departmrnt.map((ite, idx) => {
                                    let departmentsArr = []
                                    for (let i = 0; i < r.departmrnt.length; i++) {
                                        departmentsArr.push(r.departmrnt[i].name)
                                    }
                                    return (
                                        <div key={idx} style={{ display: 'flex' }}>
                                            {idx == 0 ?
                                                (<div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4 }}>
                                                    {ite.name}
                                                </div>) : ('')

                                            }
                                            {
                                                r.departmrnt.length > 1 && idx == 1 ? (
                                                    <Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
                                                        <div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}>
                                                            +{r.departmrnt.length - 1}
                                                        </div>
                                                    </Tooltip>
                                                ) : ('')
                                            }
                                        </div>
                                    )
                                })
                            }
                        </div>
                    )
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 职位
                    </div>
                ),
                width: 100,
                dataIndex: "userJob",
                key: "userJob",
                render: (_, r, index) => {
                    return r.userJob ? UserAttribute.jobDataSource[r.userJob - 1] : '-';
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 岗位
                    </div>
                ),
                width: 120,
                dataIndex: "userPost",
                key: "userPost",
                render: (_, r, index) => {
                    return r.userPost || '-';
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 在职状态
                    </div>
                ),
                width: 110,
                dataIndex: "userActiveStatus",
                key: "userActiveStatus",
                render: (_, r, index) => {
                    return r.userActiveStatus ? UserAttribute.activeStatusDataSource[r.userActiveStatus - 1] : '-';
                },
            }, {
                title: '绩点',
                width: 100,
                dataIndex: "gradePoint",
                key: "gradePoint",
                render: (_, r, index) => {
                    return r.gradePoint || '-';
                },
            }, {
                title: (
                    <div>
                        <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 所属机构
                    </div>
                ),
                width: 150,
                dataIndex: "userOrganization",
                key: "userOrganization",
                render: (_, r, index) => {
                    return r.userOrganization ? UserAttribute.organizationDataSource[r.userOrganization - 1] : '-';
                },
            }, {
                title: '技术职级等级',
                width: 150,
                dataIndex: "technicalGrade",
                key: "technicalGrade",
                // render: (_, r, index) => <span>-</span>,
            }, {
                title: '证件号',
                width: 180,
                dataIndex: "idNumber",
                key: "idNumber",
                render: (_, r, index) => {
                    return (r.idNumber ? r.idNumber : '-');
                },
            }, {
                title: '性别',
                width: 60,
                dataIndex: "gender",
                key: "gender",
                render: (_, r, index) => {
                    return (r.gender ? r.gender : '-');
                },
            }, {
                title: '籍贯',
                width: 150,
                dataIndex: "nativePlace",
                key: "nativePlace",
                render: (_, r, index) => {
                    return (r.nativePlace ? r.nativePlace : '-');
                },
            }, {
                title: '出生日期',
                width: 120,
                dataIndex: "birthday",
                key: "birthday",
                render: (_, r, index) => {
                    return (r.birthday ? r.birthday : '-');
                },
            }, {
                title: '婚育状态',
                width: 100,
                dataIndex: "marital",
                key: "marital",
                render: (_, r, index) => {
                    return (r.marital ? r.marital : '-');
                },
            }, {
                title: '政治面貌',
                width: 100,
                dataIndex: "politicsStatus",
                key: "politicsStatus",
                render: (_, r, index) => {
                    return (r.politicsStatus ? r.politicsStatus : '-');
                },
            }, {
                title: '联系方式',
                width: 120,
                dataIndex: "phoneNumber",
                key: "phoneNumber",
                render: (_, r, index) => {
                    return (r.phoneNumber ? r.phoneNumber : '-');
                },
            }, {
                title: '工作地点',
                width: 150,
                dataIndex: "workPlace",
                key: "workPlace",
                render: (_, r, index) => {
                    return (r.workPlace ? r.workPlace : '-');
                },
            }, {
                title: '年龄',
                width: 100,
                dataIndex: "age",
                key: "age",
                sorter: (a, b) => { },
                render: (_, r, index) => {
                    return (r.birthday ? moment(new Date()).diff(r.birthday, 'years') + '岁' : '-');
                },
            }, {
                title: '毕业院校',
                width: 200,
                dataIndex: "graduatedFrom",
                key: "graduatedFrom",
                render: (_, r, index) => {
                    return (r.graduatedFrom ? r.graduatedFrom : '-');
                },
            }, {
                title: '学历',
                width: 60,
                dataIndex: "educationBackground",
                key: "educationBackground",
                render: (_, r, index) => {
                    return (r.educationBackground ? r.educationBackground : '-');
                },
            }, {
                title: '专业',
                width: 200,
                dataIndex: "specialty",
                key: "specialty",
                render: (_, r, index) => {
                    return (r.specialty ? r.specialty : '-');
                },
            }, {
                title: '毕业时间',
                width: 120,
                dataIndex: "graduationDate",
                key: "graduationDate",
                render: (_, r, index) => {
                    return (r.graduationDate ? r.graduationDate : '-');
                },
            }, {
                title: '入职时间',
                width: 120,
                dataIndex: "hiredate",
                key: "hiredate",
                sorter: (a, b) => { },
                render: (_, r, index) => {
                    return (r.hiredate ? r.hiredate : '-');
                },
            }, {
                title: '转正时间',
                width: 120,
                dataIndex: "regularDate",
                key: "regularDate",
                render: (_, r, index) => {
                    return (r.regularDate ? r.regularDate : '-');
                },
            }, {
                title: '转试用期时间',
                width: 120,
                dataIndex: "turnProbationPeriod",
                key: "turnProbationPeriod",
                render: (_, r, index) => {
                    return (r.turnProbationPeriod ? r.turnProbationPeriod : '-');
                },
            }, {
                title: '离职日期',
                width: 120,
                dataIndex: "dimissionDate",
                key: "dimissionDate",
                render: (_, r, index) => {
                    return (r.dimissionDate ? r.dimissionDate : '-');
                },
            }, {
                title: '入职年限',
                width: 120,
                dataIndex: "employmentLife",
                key: "employmentLife",
                sorter: (a, b) => { },
                render: (_, r, index) => {
                    return (r.hiredate ? <span style={{ color: '#1890FF' }}>{String(moment(new Date()).diff(r.hiredate, 'years', true)).substring(0, 3) + '年'}</span> : '-')
                },
            }, {
                title: '试用期时间',
                width: 120,
                dataIndex: "probationPeriodDate",
                key: "probationPeriodDate",
                render: (_, r, index) => {
                    return (r.regularDate ? moment(r.regularDate).diff(r.hiredate, 'months', true).toFixed(1) + '个月' : '-')
                },
            }, {
                title: '工作经验',
                width: 120,
                dataIndex: "experienceYear",
                key: "experienceYear",
                render: (_, r, index) => {
                    return (r.experienceYear ? r.experienceYear + '年' : '-')
                },
            }, {
                title: '历史工作经历与职务',
                width: 200,
                dataIndex: "occupationalHistory",
                key: "occupationalHistory",
                render: (_, r, index) => {
                    return (r.occupationalHistory ?
                        (
                            <Tooltip content={r.occupationalHistory} style={{ lineHeight: 2 }}>
                                <div style={{
                                    textOverflow: 'ellipsis',
                                    overflow: 'hidden',
                                    whiteSpace: 'nowrap',
                                    width: 200
                                }}>{r.occupationalHistory}</div>
                            </Tooltip>

                        ) : '-')
                },
            }, {
                title: '简历',
                width: 200,
                dataIndex: "vitae",
                key: "vitae",
                render: (_, r, index) => {
                    return (r.vitae ? <a href={`/_file-server/${r.vitae}`} style={{ color: '#005ABD' }}>下载</a> : '-')
                },
            },
        ];
        let newColumns = columns;
        for (let i = 0; i < column.length; i++) {
            if (arr.indexOf(column[i].key) > -1) {
                newColumns.push(column[i]);
            }
        }
        setSetupp(newColumns);
    }
    function handleRow(record, index) {//斑马条纹
        // 给偶数行设置斑马纹
        if (index % 2 === 0) {
            return {
                style: {
                    background: '#FAFCFF',
                }
            };
        } else {
            return {};
        }
    }
    const scroll = useMemo(() => ({}), []);
    return (
        <>
            <div style={{ padding: '0px 12px' }}>
                <div style={{ display: 'flex' }}>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>档案中心</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>人员档案</div>
                    <div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: '#033C9A', fontSize: 14 }}>员工信息</div>
                </div>
                <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'baseline' }}>
                            <div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                            <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>员工信息</div>
                            <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>EMPLOYEE INFORMATION</div>
                        </div>
                    </div>
                    <div style={{ marginRight: 20, marginTop: 18 }}>
                        <Form
                            labelPosition="left"
                            labelAlign="right"
                            labelWidth="80px"
                            onValueChange={(values, field) => {
                                // console.log('values', values);
                            }}
                            getFormApi={(formApi) => (form.current = formApi)}
                        >
                            <div>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <Form.Select
                                        pure
                                        field="keywordTarget"
                                        placeholder="请选择搜索类型"
                                        style={{ width: 200 }}
                                        initValue={"name"}
                                    >
                                        <Form.Select.Option value='post'>岗位</Form.Select.Option>
                                        <Form.Select.Option value='dep'>部门</Form.Select.Option>
                                        <Form.Select.Option value='number'>编号</Form.Select.Option>
                                        <Form.Select.Option value='name'>姓名</Form.Select.Option>
                                    </Form.Select>
                                    <Form.Input
                                        suffix={<IconSearch />}
                                        field="keyword"
                                        pure
                                        showClear
                                        style={{ width: 346, marginLeft: 12, marginRight: 12 }}
                                        placeholder="请输入或选择关键词"
                                    />

                                    <Form.DatePicker
                                        label='入职时间:'
                                        field='entryTime' type="dateRange" density="compact" showClear style={{ width: 370, color: "#F9F9F9" }} />
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <Form.Select
                                            label="婚育状态:"
                                            field="marital"
                                            labelPosition="left"
                                            placeholder="全部"
                                            style={{ width: 246, marginRight: 20, color: "#F9F9F9", }}
                                            showClear
                                        >
                                            <Form.Select.Option value=''>
                                                全部
                                            </Form.Select.Option>
                                            <Form.Select.Option value='已婚已育'>
                                                已婚已育
                                            </Form.Select.Option>
                                            <Form.Select.Option value='已婚'>
                                                已婚
                                            </Form.Select.Option>
                                            <Form.Select.Option value='未婚'>
                                                未婚
                                            </Form.Select.Option>
                                        </Form.Select>
                                        <Form.Select
                                            label='户籍地:'
                                            labelPosition="left"
                                            field='native'
                                            style={{ width: 246, marginRight: 20, color: "#F9F9F9", }}
                                            placeholder="全部"
                                            showClear
                                        >
                                            {nativeList.map((item) => {
                                                return (
                                                    <Form.Select.Option key={item.nativePlace} value={item.nativePlace}>
                                                        {item.nativePlace}
                                                    </Form.Select.Option>
                                                );
                                            })}
                                        </Form.Select>
                                        <Form.Select
                                            label='工作地点:'
                                            labelPosition="left"
                                            field='workPlace'
                                            style={{ width: 246, marginRight: 20, color: "#F9F9F9", }}
                                            placeholder="全部"
                                            showClear
                                        >
                                            {workPlaceList.map((item) => {
                                                return (
                                                    <Form.Select.Option key={item.workPlace} value={item.workPlace}>
                                                        {item.workPlace}
                                                    </Form.Select.Option>
                                                );
                                            })}
                                        </Form.Select>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        {
                                            isAuthorized('EXPORTEMPLOYEEINFORMATION') ? <div style={{ width: 20, height: 20, cursor: "pointer", marginRight: 15 }}
                                                onClick={() => {
                                                    let obj = form.current.getValues()
                                                    if (form.current.getValues().entryTime?.length > 1) {
                                                        obj.hiredateStart = moment(form.current.getValues().entryTime[0]).format('YYYY-MM-DD')
                                                        obj.hiredateEnd = moment(form.current.getValues().entryTime[1]).format('YYYY-MM-DD')
                                                    }
                                                    else {
                                                        obj.hiredateStart = ''
                                                        obj.hiredateEnd = ''
                                                    }
                                                    setDownloadUrl(`members/export?token=${user.token}&keywordTarget=${obj.keywordTarget ? obj.keywordTarget : ''}&keyword=${obj.keyword ? obj.keyword : ''}&marital=${obj.marital ? obj.marital : ''}&native=${obj.native ? obj.native : ''}&workPlace=${obj.workPlace ? obj.workPlace : ''}&hiredateStart=${obj.hiredateStart}&hiredateEnd=${obj.hiredateEnd}`)
                                                }}>
                                                <img src="/assets/images/hrImg/export.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                {
                                                    downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : ''
                                                }
                                            </div> : ''
                                        }

                                        <img src="/assets/images/hrImg/newsetup.png" alt="" style={{ width: 20, height: 20, cursor: "pointer", marginRight: 15 }}
                                            onClick={() => setSetup(true)}
                                        />
                                        <Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
                                            onClick={() => {
                                                setLookup(form.current.getValues())
                                                setQuery({ limit: 10, page: 0 })
                                            }}>查询</Button>
                                    </div>
                                </div>
                            </div>
                        </Form>
                        <div style={{ border: '1px solid #C7E1FF', background: '#F4F8FF', borderRadius: 2, height: 32, width: 669, padding: '8px 0px 7px 12px', display: 'flex', alignItems: 'center', color: '#0F7EFB', fontSize: 12 }}>
                            <img src="/assets/images/hrImg/!.png" alt="" style={{ width: 14, height: 14, marginRight: 8 }} />
                            表格中带有认证标识"
                            <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} />
                            "信息的为系统基础数据，来源于项企PEP、钉钉等系统，其他数据均为导入或自定义数据
                        </div>
                        <div style={{ marginTop: 20 }}>
                            <Skeleton
                                // loading={loading}
                                loading={false}
                                active={true}
                                placeholder={SkeletonScreen()}
                            >
                                <Table
                                    columns={setupp.filter((s) => s)}
                                    dataSource={archivesList}
                                    bordered={false}
                                    empty="暂无数据"
                                    pagination={false}
                                    onChange={({ sorter }) => {
                                        if (sorter.key == 'userCode') {
                                            if (sorter.sortOrder == 'descend') {
                                                setOrder({ orderBy: 'code', orderDirection: 'DESC' })
                                            } else {
                                                setOrder({ orderBy: 'code', orderDirection: 'ASC' })
                                            }
                                        } else if (sorter.key == 'age') {
                                            if (sorter.sortOrder == 'descend') {
                                                setOrder({ orderBy: 'age', orderDirection: 'DESC' })
                                            } else {
                                                setOrder({ orderBy: 'age', orderDirection: 'ASC' })
                                            }
                                        } else {
                                            if (sorter.sortOrder == 'descend') {
                                                setOrder({ orderBy: 'hiredate', orderDirection: 'DESC' })
                                            } else {
                                                setOrder({ orderBy: 'hiredate', orderDirection: 'ASC' })
                                            }
                                        }
                                    }}
                                    onRow={handleRow}
                                    scroll={scroll}
                                />
                            </Skeleton>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    padding: "20px 20px",
                                }}
                            >
                                <div>
                                </div>
                                <div style={{ display: 'flex', }}>
                                    <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
                                        共{limits}条信息
                                    </span>
                                    <Pagination
                                        className="22"
                                        total={limits}
                                        showSizeChanger
                                        currentPage={query.page + 1}
                                        pageSizeOpts={[10, 20, 30, 40]}
                                        onChange={(currentPage, pageSize) => {
                                            setQuery({ limit: pageSize, page: currentPage - 1 });
                                            page.current = currentPage - 1
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {setup ? (
                <Setup
                    tableType={EMPLOYEEINFORMATION}
                    tableList={tableList}
                    length={30}
                    close={() => {
                        setSetup(false);
                        attribute();
                    }}
                />
            ) : (
                ""
            )}
        </>
    )
}

function mapStateToProps(state) {
    const { auth, global, MemberSearch, webSocket } = state;
    return {
        //   loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        xqMembers: MemberSearch.data,
        //   socket: webSocket.socket
    };
}

export default connect(mapStateToProps)(employeeInformation);