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

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

    const { humanAffairs } = actions;

    let [archivesList, setArchivesList] = useState([]);
    const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
    const [exportModalVs, setExportModalVs] = useState(false);
    const [keyword, setKeyword] = useState('');//搜索内容
    const [keywordTarget, setKeywordTarget] = useState('');//搜索类型
    const [downloadUrl, setDownloadUrl] = useState('')
    const optionsList = {
        dimission: '离职',
        onJob: '在职',
        vacate: '请假',
        inOffice: '在岗',
        dayoff: '放假',
    }
    let [typeChoose, setTypeChoose] = useState('');
    useEffect(() => {
        getMemberSearchList()
    }, [typeChoose])

    function getMemberSearchList () {//搜索项企用户
        dispatch(humanAffairs.getMemberSearch())
        dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户
            if (res.success) {
                setArchivesList(res.payload?.data?.rows)
            }
        })
    }

    function typeOnChange (e) {//角色选择
        setTypeChoose(e.target.value);
    }
    function seachValueChange (value) {
        setKeyword(value)
    }
    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={keywordTarget} onChange={setKeywordTarget} placeholder='请选择搜索类型' style={{ width: 200 }} showClear>
                                <Select.Option value='role'>职位</Select.Option>
                                <Select.Option value='dep'>部门</Select.Option>
                                <Select.Option value='number'>编号</Select.Option>
                                <Select.Option value='name'>姓名</Select.Option>
                            </Select>
                        </div>
                        <div style={{ marginLeft: 12, marginRight: 18 }}>
                            <Input suffix={<IconSearch />}
                                showClear
                                placeholder='请输入或选择关键词'
                                value={keyword}
                                style={{ width: 346 }}
                                onChange={seachValueChange}>
                            </Input>
                        </div>
                        <Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
                            onClick={() => {
                                dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户
                                    if (res.success) {
                                        setArchivesList(res.payload.data.rows)
                                    }
                                })
                            }}>查询</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' }}>
                                {archivesList.length || 0}条
                            </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>
                                <RadioGroup onChange={typeOnChange} value={typeChoose} aria-label="单选组合示例" name="demo-radio-group">
                                    <Radio value=''>全部</Radio>
                                    <Radio value='dimission'>离职</Radio>
                                    <Radio value='onJob'>在职</Radio>
                                </RadioGroup>
                            </div>
                            <div style={{ display: 'flex', marginLeft: 30, alignItems: 'center', cursor: 'pointer' }} onClick={() => {
                                setDownloadUrl(`members/export?token=${user.token}&timestamp=${moment().valueOf()}`)

                            }}>
                                <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>
                                {
                                    downloadUrl ? <iframe src={`/_api/${downloadUrl}`} style={{ display: 'none' }} /> : ''
                                }
                            </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.userCode}
                                                </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: item.state == 'dimission' ? '#FFDDDE' : item.state == 'onJob' ? '#EAF4FF' : item.state == 'vacate' ? '#FFFBE3' : item.state == 'inOffice' ? '#F0FFEA' : '#E4FEFF',
                                                        color: item.state == 'dimission' ? '#F62D30' : item.state == 'onJob' ? '#0F7EFB' : item.state == 'vacate' ? '#D3A000' : item.state == 'inOffice' ? '#58A61F' : '#00B6B9',
                                                        padding: '2px 6px 1px', fontSize: 12, borderRadius: '8px 0px 8px 0px'
                                                    }}>
                                                        {
                                                            optionsList[item.state]
                                                        }
                                                    </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}
                        cancel={() => {
                            setPersonnelModal(false);
                        }}
                        close={() => {
                            setPersonnelModal(false);
                            getMemberSearchList()
                        }} >
                    </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);