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

const Rest = (props) => {
    const { dispatch, actions, history, user, loading, socket } = 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.getMemberList()).then((res) => {//搜索项企用户
            if (res.success) {
                console.log('res.success', res.payload.data);
                setArchivesList(res.payload.data)
                // 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={item.idPhoto ? '/_file-server/' + item.idPhoto : '/assets/images/hrImg/defaultAvatar.png'} alt="" style={{ width: '100%', height: '100%' }} />
                                        </div>
                                        <div style={{ marginLeft: 4 }}>
                                            <div style={{ display: 'flex' }}>
                                                <div style={{ color: '#005ABD', fontSize: 14, marginRight: 6 }}>
                                                    {item.pepUserId}
                                                </div>
                                                {
                                                    item.departmrnt.map((ite, idx) => {
                                                        let departmentsArr = []
                                                        for (let i = 0; i < item.departmrnt.length; i++) {
                                                            departmentsArr.push(item.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>) : ('')

                                                                }
                                                                {
                                                                    item.departmrnt.length > 1 && idx == 1 ? (
                                                                        <Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
                                                                            <div style={{ padding: '0px 4px 1px 4px ', color: '#FFFFFF', fontSize: 12, background: 'rgba(0,90,189,0.8)', borderRadius: 2, marginRight: 4, cursor: "pointer", }}>
                                                                                ...
                                                                            </div>
                                                                        </Tooltip>
                                                                    ) : ('')
                                                                }
                                                            </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 }}>
                                                        {item.userName}
                                                    </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 }}>
                                                    {item.birthday ? moment(new Date()).diff(item.birthday, 'years') + '岁' : '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, display: 'flex', marginLeft: 4 }}>
                                                <div style={{ display: 'flex', width: 159 }}>
                                                    <div style={{ width: 20, height: 20 }}>
                                                        <img src={item.gender == '女' ? "/assets/images/hrImg/woman.png" : "/assets/images/hrImg/man.png"} alt="" style={{ width: '100%', height: '100%' }} />
                                                    </div>
                                                    <div style={{ fontSize: 14, color: '#282828', marginLeft: 12, marginRight: 9 }}>
                                                        {item.gender || '暂无'}
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    {item.marital || '暂无'}
                                                </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 }}>
                                                        {item.roleName || '暂无'}
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    {item.experienceYear ? item.experienceYear + '年经验' : '暂无'}
                                                </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 }}>
                                                        {item.hiredate ? '入职' + moment(new Date()).diff(item.hiredate, 'years') + '年' : '暂无'}
                                                    </div>
                                                </div>
                                                <div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 12 }}>
                                                    {item.educationBackground || '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ marginTop: 16, marginLeft: 4 }}>
                                                <Button theme='solid' type='primary' style={{ width: 212, borderRadius: 17, height: 28 }}
                                                    onClick={() => {
                                                        history.push(`/personnelFilesDetail?${item.pepUserId}`);
                                                    }}>详情</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);
                            getMemberSearchList()
                        }}
                        close={() => {
                            setPersonnelModal(false);
                            // getUserList()
                        }} >
                    </PersonnelModal> : ''
            }
            {
                exportModalVs ? <ExportMembersModal user={user}
                    onCancel={() => setExportModalVs(false)} /> : ''
            }
        </>
    )
}

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

export default connect(mapStateToProps)(Rest);