import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select, Input, Button, CheckboxGroup } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import PersonnelModal from '../components/personnelModal';
import ImportMembersModal from './import-members-modal'
import '../style.less'

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

    const { humanAffairs } = actions;
    let [departmentValue, setDepartmentValue] = useState('');

    let [archivesList, setArchivesList] = useState(['', '', '', '', '', '', '', '', '', '']);
    const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
    const [exportModalVs, setExportModalVs] = useState(false);
    const options = [
        { label: '离职', value: 'abc' },
        { label: '请假', value: 'hotsoon' },
        { label: '放假', value: 'pipixia' },
        { label: '在岗', value: 'toutiao' },
        { label: '加班', value: 'jiaban' }
    ]

    let [seachValue, setSeachValue] = useState('');
    let [typeChoose, setTypeChoose] = useState([]);
    useEffect(() => {
        getMemberSearchList()
    }, [])

    function getMemberSearchList() {//搜索项企用户
        dispatch(humanAffairs.getMemberSearch()).then((res) => {//搜索项企用户
            if (res.success) {
                // let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows));
                // let mytableKey = []
                // for (let index = 0; index < mytableData.length; index++) {
                //     mytableData[index].key = mytableData[index].id
                //     mytableKey.push(mytableData[index].id)
                // }
                // setTableKey(mytableKey)
                // setTableData(mytableData)
                // setLimits(res.payload.data.count)
                // mylimits.current = res.payload.data.rows.length
            }
        })
    }

    function typeOnChange(e) {//角色选择
        console.log('e.target.value', e.target.value);
        setTypeChoose(e.target.value);
    }
    function seachValueChange() {

    }
    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 FILE</div>
                        </div>
                        <div style={{ display: 'flex', marginRight: 20 }}>
                            <div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
                                onClick={() => {
                                    setPersonnelModal(true);
                                }}>
                                新增档案
                            </div>
                            <div onClick={() => setExportModalVs(true)} style={{ padding: '6px 20px', background: '#00BA85', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginLeft: 20 }}>
                                导入员工信息
                            </div>
                        </div>
                    </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: 9 }}>
                    <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 FILE DETAILS</div>
                        </div>
                    </div>
                    <div style={{ display: 'flex', marginTop: 16, marginBottom: 17 }}>
                        <div>
                            <Select value={departmentValue} onChange={setDepartmentValue} placeholder='部门' style={{ width: 200 }} showClear>
                                <Select.Option value='abc'>抖音</Select.Option>
                                <Select.Option value='ulikecam'>轻颜相机</Select.Option>
                                <Select.Option value='xigua'>西瓜视频</Select.Option>
                            </Select>
                        </div>
                        <div style={{ marginLeft: 12, marginRight: 18 }}>
                            <Input suffix={<IconSearch />}
                                showClear
                                placeholder='请输入或选择关键词'
                                value={seachValue}
                                style={{ width: 346 }}
                                onChange={seachValueChange}>
                            </Input>
                        </div>
                        <Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}>查询</Button>
                    </div>
                    <div style={{ borderBottom: '1px solid #F2F3F5', marginLeft: '-20px', marginBottom: 16 }}></div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 22 }}>
                        <div style={{ display: 'flex', }}>
                            <div style={{ color: '#646566', fontSize: 14 }}>
                                当前显示
                            </div>
                            <div style={{ color: '#005ABD', fontSize: 14, margin: '0px 10px' }}>
                                11条
                            </div>
                            <div style={{ color: '#646566', fontSize: 14 }}>
                                结果
                            </div>
                        </div>
                        <div style={{ display: 'flex', marginRight: 30, alignItems: 'center' }}>
                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                人员状态：
                            </div>
                            <div>
                                <CheckboxGroup options={options} onChange={typeOnChange} value={typeChoose} direction='horizontal' aria-label="CheckboxGroup 示例" />
                            </div>
                            <div style={{ display: 'flex', marginLeft: 30, alignItems: 'center' }}>
                                <div style={{ width: 20, height: 20 }}>
                                    <img src="/assets/images/hrImg/export.png" alt="" style={{ width: '100%', height: '100%' }} />
                                </div>
                                <div style={{ marginLeft: 4, color: '#005ABD', fontSize: 13 }}>
                                    导出
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', marginLeft: 30 }}>
                        {
                            archivesList.map((item, index) => {
                                return (
                                    <div key={index} style={{ display: 'flex', width: 368, border: '1px solid #F9F9F9', boxShadow: '0px 0px 4px 1px rgba(0,0,0,0.08)', padding: 10, marginRight: 40, marginBottom: 20 }}>
                                        <div style={{ width: 128, height: 192 }}>
                                            <img src="/assets/images/hrImg/mc.png" alt="" style={{ width: '100%', height: '100%' }} />
                                        </div>
                                        <div style={{ marginLeft: 4 }}>
                                            <div style={{ display: 'flex' }}>
                                                <div style={{ color: '#005ABD', fontSize: 14, marginRight: 6 }}>
                                                    0012
                                                </div>
                                                <div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2 }}>
                                                    行业服务部
                                                </div>
                                                {/* <div>

                                                </div> */}
                                            </div>
                                            <div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
                                                <div style={{ display: 'flex', width: 159 }}>
                                                    <div style={{ width: 20, height: 20 }}>
                                                        <img src="/assets/images/hrImg/mc.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                    </div>
                                                    <div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
                                                        刘昊然
                                                    </div>
                                                    <div style={{ background: '#FFFBE3', padding: '2px 6px 1px', color: '#D3A000', fontSize: 12, borderRadius: '8px 0px 8px 0px' }}>
                                                        请假中
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    23岁
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
                                                <div style={{ display: 'flex', width: 159 }}>
                                                    <div style={{ width: 20, height: 20 }}>
                                                        <img src="/assets/images/hrImg/man.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                    </div>
                                                    <div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
                                                        男
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    未婚
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
                                                <div style={{ display: 'flex', width: 159 }}>
                                                    <div style={{ width: 20, height: 20 }}>
                                                        <img src="/assets/images/hrImg/post.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                    </div>
                                                    <div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
                                                        人力资源部副部长
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    9年经验
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
                                                <div style={{ display: 'flex', width: 159 }}>
                                                    <div style={{ width: 20, height: 20 }}>
                                                        <img src="/assets/images/hrImg/year.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                    </div>
                                                    <div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
                                                        入职3年
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    本科
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, marginLeft: 4 }}>
                                                <Button theme='solid' type='primary' style={{ width: 212, borderRadius: 17, height: 28 }}
                                                    onClick={() => {
                                                        history.push(`/personnelFilesDetail`);
                                                    }}>详情</Button>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
            {//成员弹框
                personnelModal ?
                    <PersonnelModal
                        visible={true}
                        // pepList={pepList}
                        // memberEdit={memberEdit}
                        // editObj={editObj}
                        // pomsList={pomsList}
                        // anxinDelete={anxinDelete}
                        // anxincloudArr={anxincloudArr}
                        cancel={() => {
                            setPersonnelModal(false);
                        }}
                        close={() => {
                            setPersonnelModal(false);
                            // getUserList()
                        }} >
                    </PersonnelModal> : ''
            }
            {
                exportModalVs ? <ImportMembersModal user={user}
                    onCancel={() => setExportModalVs(false)} xqMembers={xqMembers} /> : ''
            }
        </>
    )
}

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)(Rest);