import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux';
import { Select, Input, Button, Tooltip, DatePicker, Table } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import DeleteModal from '../components/deleteModal';
import PersonnelModal from '../components/personnelModal';
import moment from 'moment'
import { UserAttribute } from '$utils'
import { isAuthorized } from '$utils'


import '../style.less'

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

    const { humanAffairs } = actions;
    const [option, setOption] = useState({});
    const [leaveoption, setLeaveOption] = useState({});
    const [tableData, setTableData] = useState([])  //表格数据
    const [leaveData, setLeaveData] = useState([])  //表格数据
    const [tableStatistic, setTableStatistic] = useState({})  //加班总数据
    const [leaveStatistic, setLeaveStatistic] = useState({})  //请假总数据

    const [deleteModal, setDeleteModal] = useState(false)  //删除弹框
    const [personnelModal, setPersonnelModal] = useState(false);//档案弹框
    const [columns, setColumns] = useState([//表格属性
        {
            title: "实例号",
            dataIndex: "storyId",
            key: 'storyId',
            render: (text, r, index) => {
                return <span style={{ color: '#1890FF' }}>{text}</span>;
            },
        }, {
            title: "事由",
            dataIndex: "reason",
            key: 'reason',
            render: (text, r, index) => {
                return text;
            },
        }, {
            title: "类型",
            dataIndex: "compensate",
            key: 'compensate',
            render: (text, r, index) => {
                return text;
            },
        }, {
            title: "发起时间",
            dataIndex: "createTime",
            key: 'createTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "开始时间",
            dataIndex: "startTime",
            key: 'startTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "结束时间",
            dataIndex: "endTime",
            key: 'endTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "核定时间",
            dataIndex: "duration",
            key: 'duration',
            render: (text, r, index) => {
                return (text / 60 / 60 + '小时');
            },
        },
    ])
    const [leaveColumns, setLeaveColumns] = useState([//表格属性
        {
            title: "实例号",
            dataIndex: "storyId",
            key: 'storyId',
            render: (text, r, index) => {
                return <span style={{ color: '#1890FF' }}>{text}</span>;
            },
        }, {
            title: "事由",
            dataIndex: "reason",
            key: 'reason',
            render: (text, r, index) => {
                return text;
            },
        }, {
            title: "类型",
            dataIndex: "type",
            key: 'type',
            render: (text, r, index) => {
                return text;
            },
        }, {
            title: "发起时间",
            dataIndex: "createTime",
            key: 'createTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "开始时间",
            dataIndex: "startTime",
            key: 'startTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "结束时间",
            dataIndex: "endTime",
            key: 'endTime',
            render: (text, r, index) => {
                return moment(text).format('YYYY-MM-DD HH:mm');
            },
        }, {
            title: "核定时间",
            dataIndex: "duration",
            key: 'duration',
            render: (text, r, index) => {
                return (text / 60 / 60 + '小时');
            },
        },
    ])

    const [pepUserCode, setPepUserCode] = useState('');
    const [pepUserId, setPepUserId] = useState('');
    const [pepObj, setPepObj] = useState({});
    const scroll = useMemo(() => ({ y: 248 }), []);

    const [startDate, setStartDate] = useState('');//开始时间
    const [endDate, setEndDate] = useState('');//结束时间

    useEffect(() => {
        setPepUserCode(history?.location?.search.slice(1).split('-')[0])
        setPepUserId(history?.location?.search.slice(1).split('-')[1])
        peopleDetail()
    }, [])
    useEffect(() => {
        getWorkOption()//加班信息
        getLeaveOption()//请假信息
    }, [startDate, endDate])
    function peopleDetail() {
        dispatch(humanAffairs.getMemberList({ keywordTarget: 'number', keyword: history?.location?.search.slice(1).split('-')[0] })).then((res) => {//搜索项企用户
            if (res.success) {
                setPepObj(res.payload?.data?.rows[0])
            }
        })
    }
    function getWorkOption() {//加班折线图
        let date = [];
        let showdate = []
        let showdate1 = []
        dispatch(humanAffairs.getMemberOvertime({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户
            if (res.success) {
                setTableData(res.payload?.data?.data)
                setTableStatistic(res.payload?.data)
                let textdate = [];
                for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) {
                    if (textdate.findIndex((ev) => {
                        return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
                    }) !== -1) {
                        textdate[textdate.findIndex((ev) => {
                            return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
                        })].num
                            =
                            textdate[textdate.findIndex((ev) => {
                                return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM') && ev.compensate == res.payload.data.dayStatisticData[i].compensate
                            })].num + res.payload.data.dayStatisticData[i].duration / 3600
                    }
                    else {
                        textdate.push({
                            time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'),
                            num: res.payload.data.dayStatisticData[i].duration / 3600,
                            compensate: res.payload.data.dayStatisticData[i].compensate
                        })
                    }

                }
                for (let l = 0; l < textdate.length; l++) {
                    if (textdate[l].compensate == '调休') {
                        showdate.push([textdate[l].time, textdate[l].num])
                    }
                    else {
                        showdate1.push([textdate[l].time, textdate[l].num])
                    }

                }

                if (!startDate && !endDate) {
                    for (let i = 0; i < 12; i++) {
                        date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM'));
                    }
                }
                else {
                    let nowdate = moment(startDate).format('YYYY/MM')
                    date.push(nowdate)
                    for (let o = 0; o < 10000; o++) {
                        if (nowdate !== moment(endDate).format('YYYY/MM')) {
                            nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM')
                            date.push(nowdate)
                        }
                        else {
                            break
                        }
                    }
                }
                let data = {
                    legend: {
                        data: ["调休", "折算"],
                        left: 'right',
                        icon: 'roundRect',
                        itemHeight: 3, // 粗细
                    },
                    color: ['#0F7EFB', '#FE9812'], //两条折线的颜色
                    xAxis: [
                        {
                            boundaryGap: false,
                            data: date,
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: '小时'
                        },
                    ],
                    dataZoom: [
                        {
                            id: "dataZoomX",
                            type: "slider",
                            start: 0,
                            end: 100,
                            handleIcon:
                                "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                            handleSize: "80%",
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    series: [
                        {
                            name: "调休",
                            type: "line",
                            areaStyle: {
                                color: 'rgba(14,156,255,0.5)',
                                opacity: 0.1
                            },
                            smooth: true,
                            data: showdate,
                        },
                        {
                            name: "折算",
                            type: "line",
                            areaStyle: {
                                color: 'rgba(254,152,18,0.2)',
                            },
                            smooth: true,
                            data: showdate1,
                        },
                    ],
                }
                setOption(data)
            }
        })
    }
    function getLeaveOption() {//请假折线图
        let date = [];
        let showdate = []
        dispatch(humanAffairs.getMemberVacate({ pepUserId: history?.location?.search.slice(1).split('-')[1], startDate: startDate, endDate: endDate })).then((res) => {//搜索项企用户
            if (res.success) {
                setLeaveData(res.payload?.data?.data)
                let year = 0;
                let compassionate = 0;
                let sick = 0;
                let other = 0;
                let all = 0;
                for (let i = 0; i < res.payload?.data?.statistic.length; i++) {
                    if (res.payload?.data?.statistic[i].type == '事假') {
                        compassionate = compassionate + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
                    }
                    else if (res.payload?.data?.statistic[i].type == '病假') {
                        sick = sick + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
                    }
                    else if (res.payload?.data?.statistic[i].type == '年休假') {
                        year = year + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
                    }
                    else {
                        other = other + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
                    }
                    all = all + (res.payload?.data?.statistic[i].sumDuration / 60 / 60)
                }
                setLeaveStatistic({
                    compassionate, sick, year, other, all
                })
                let textdate = [];
                for (let i = 0; i < res.payload?.data?.dayStatisticData?.length; i++) {
                    if (textdate.findIndex((ev) => {
                        return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
                    }) !== -1) {
                        textdate[textdate.findIndex((ev) => {
                            return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
                        })].num
                            =
                            textdate[textdate.findIndex((ev) => {
                                return ev.time == moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM')
                            })].num + res.payload.data.dayStatisticData[i].duration / 3600
                    }
                    else {
                        textdate.push({
                            time: moment(res.payload.data.dayStatisticData[i].day).format('YYYY/MM'),
                            num: res.payload.data.dayStatisticData[i].duration / 3600
                        })
                    }

                }
                for (let l = 0; l < textdate.length; l++) {
                    showdate.push([textdate[l].time, textdate[l].num])
                }

                if (!startDate && !endDate) {
                    for (let i = 0; i < 12; i++) {
                        date.unshift(moment(new Date()).subtract(i, 'months').format('YYYY/MM'));
                    }
                }
                else {
                    let nowdate = moment(startDate).format('YYYY/MM')
                    date.push(nowdate)
                    for (let o = 0; o < 10000; o++) {
                        if (nowdate !== moment(endDate).format('YYYY/MM')) {
                            nowdate = moment(nowdate).add(1, 'months').format('YYYY/MM')
                            date.push(nowdate)
                        }
                        else {
                            break
                        }
                    }
                }
                let data = {
                    legend: {
                        data: ["请假"],
                        left: 'right',
                        icon: 'roundRect',
                        itemHeight: 3, // 粗细
                    },
                    color: ['#0F7EFB', '#FE9812'], //两条折线的颜色
                    xAxis: [
                        {
                            boundaryGap: false,
                            data: date,
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: '小时'
                        },
                    ],
                    dataZoom: [
                        {
                            id: "dataZoomX",
                            type: "slider",
                            start: 0,
                            end: 100,
                            handleIcon:
                                "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                            handleSize: "80%",
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    series: [
                        {
                            name: "请假",
                            type: "line",
                            areaStyle: {
                                color: 'rgba(14,156,255,0.5)',
                                opacity: 0.1
                            },
                            smooth: true,
                            data: showdate,
                        },
                    ],
                }
                setLeaveOption(data)
            }
        })
    }
    function handleChange(date) {
        if (date.length > 1) {
            setStartDate(moment(date[0]).format('YYYY-MM-DD'))
            setEndDate(moment(date[1]).format('YYYY-MM-DD'))
        }
        else {
            setStartDate('')
            setEndDate('')
        }
    }
    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: '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: 20, height: 20, marginRight: 10, cursor: "pointer" }} onClick={() => {
                                history.goBack();
                            }}>
                                <img src="/assets/images/hrImg/back.png" alt="" style={{ width: '100%', height: '100%' }} />
                            </div>
                            <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 }}>{pepObj?.userName}的个人档案</div>
                        </div>
                        <div style={{ display: 'flex', marginRight: 20 }}>
                            {
                                isAuthorized('EDITPROFILE') ? <div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
                                    onClick={() => {
                                        setPersonnelModal(true);
                                    }}
                                >
                                    编辑档案
                                </div> : ''
                            }
                            {
                                isAuthorized('DELETEFILES') ? <div style={{ padding: '6px 20px', background: '#FF5254', color: '#FFFFFF', fontSize: 14, cursor: "pointer", marginLeft: 20 }}
                                    onClick={() => { setDeleteModal(true) }}
                                >
                                    删除档案
                                </div> : ''
                            }

                        </div>
                    </div>
                    <div style={{ borderBottom: '1px solid #DCDEE0', margin: '16px 0px 16px -20px' }}></div>
                    <div style={{ display: 'flex', width: '100%' }}>
                        <div style={{ width: 160, height: 240, marginLeft: 17 }}>
                            <img src={pepObj.idPhoto ? '/_file-server/' + pepObj.idPhoto : '/assets/images/hrImg/defaultAvatar.png'} alt="" style={{ width: '100%', height: '100%' }} />
                        </div>
                        <div style={{ marginLeft: 40, marginTop: 8, width: '61.452%' }}>
                            <div style={{ display: 'flex' }}>
                                {/* 基本信息 */}
                                <div style={{ width: '60%' }}>
                                    <div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
                                        基本信息
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 13 }}>
                                        <div style={{ display: 'flex', width: '40.82%' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48 }}>
                                                证件号：
                                            </div>
                                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                {pepObj.idNumber || '暂无'}
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', width: '59.18%' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                联系方式：
                                            </div>
                                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                {pepObj.phoneNumber || '暂无'}
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 8 }}>
                                        <div style={{ display: 'flex', width: '40.82%' }}>
                                            <div style={{ display: 'flex', width: '45.57%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
                                                    姓名：
                                                </div>
                                                <div style={{ color: '#005ABD', fontSize: 13 }}>
                                                    {pepObj.userName || '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ display: 'flex', width: '54.43%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
                                                    性别：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.gender || '暂无'}
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', width: '59.18%' }}>
                                            <div style={{ display: 'flex', width: '53.166%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                    出生日期：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.birthday || '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ display: 'flex', width: '46.834%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                    政治面貌：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.politicsStatus || '暂无'}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 8 }}>
                                        <div style={{ display: 'flex', width: '40.82%' }}>
                                            <div style={{ display: 'flex', width: '45.57%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
                                                    年龄：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.birthday ? moment(new Date()).diff(pepObj.birthday, 'years') + '岁' : '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ display: 'flex', width: '54.43%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 48, textAlign: 'end' }}>
                                                    籍贯：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.nativePlace || '暂无'}
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', width: '59.18%' }}>
                                            <div style={{ display: 'flex', width: '53.166%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                    婚育状态：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.marital || '暂无'}
                                                </div>
                                            </div>
                                            <div style={{ display: 'flex', width: '46.834%' }}>
                                                <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                    工作地点：
                                                </div>
                                                <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                    {pepObj.workPlace || '暂无'}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/* 学历信息 */}
                                <div style={{ width: '40%' }}>
                                    <div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
                                        学历信息
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 13 }}>
                                        <div style={{ display: 'flex', width: '43.05%' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                毕业院校：
                                            </div>
                                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                {pepObj.graduatedFrom || '暂无'}
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', width: '56.95' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                                毕业时间：
                                            </div>
                                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                {pepObj.graduationDate || '暂无'}
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 9 }}>
                                        <div style={{ display: 'flex', width: '43.05%' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60, textAlign: 'end' }}>
                                                学历：
                                            </div>
                                            <div style={{ color: '#005ABD', fontSize: 13 }}>
                                                {pepObj.educationBackground || '暂无'}
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', width: '56.95' }}>
                                            <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60, textAlign: 'end' }}>
                                                专业：
                                            </div>
                                            <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                                {pepObj.specialty || '暂无'}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* 职务信息 */}
                            <div style={{ marginTop: 20 }}>
                                <div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 'bold' }}>
                                    职务信息
                                </div>
                                <div style={{ marginTop: 13, display: 'flex' }}>
                                    <div style={{ display: 'flex', width: '15.715%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            员工编号：
                                        </div>
                                        <div style={{ color: '#005ABD', fontSize: 13 }}>
                                            {pepObj.userCode || '暂无'}
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '17.072%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            入职时间：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {pepObj.hiredate || '暂无'}
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '32.395%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84 }}>
                                            转试用期时间：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {pepObj.turnProbationPeriod || '暂无'}
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            转正时间：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {pepObj.regularDate || '暂无'}
                                        </div>
                                    </div>
                                </div>
                                <div style={{ marginTop: 9, display: 'flex' }}>
                                    <div style={{ display: 'flex', width: '15.715%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            员工职位：
                                        </div>
                                        <div style={{ color: '#005ABD', fontSize: 13 }}>
                                            {
                                                pepObj.userJob ? UserAttribute.jobDataSource[pepObj.userJob - 1] : '暂无'
                                            }
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '17.072%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            员工岗位：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {
                                                pepObj.userPost || '暂无'
                                            }
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '32.395%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84, textAlign: 'end' }}>
                                            所属机构：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {
                                                pepObj.userOrganization ? UserAttribute.organizationDataSource[pepObj.userOrganization - 1] : '暂无'
                                            }
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', width: '' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            所属部门：
                                        </div>
                                        {
                                            pepObj.departmrnt?.map((ite, idx) => {
                                                let departmentsArr = []
                                                for (let i = 0; i < pepObj.departmrnt.length; i++) {
                                                    departmentsArr.push(pepObj.departmrnt[i].name)
                                                }
                                                return (
                                                    <div key={idx}>
                                                        {idx < 3 ?
                                                            (<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>) : ('')
                                                        }
                                                        {
                                                            pepObj.departmrnt.length > 3 && idx == 3 ? (
                                                                <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", }}>
                                                                        +{pepObj.departmrnt.length - 3}
                                                                    </div>
                                                                </Tooltip>
                                                            ) : ('')
                                                        }
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                <div style={{ display: 'flex' }}>
                                    <div style={{ marginTop: 9, display: 'flex', width: '15.715%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            工作经验：
                                        </div>
                                        <div style={{ color: '#005ABD', fontSize: 13 }}>
                                            {pepObj.experienceYear ? pepObj.experienceYear + '年' : '暂无'}
                                        </div>
                                    </div>
                                    <div style={{ marginTop: 9, display: 'flex', width: '17.072%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 60 }}>
                                            入职年限：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {pepObj.hiredate ? String(moment(new Date()).diff(pepObj.hiredate, 'years', true)).substring(0, 3) + '年' : '暂无'}
                                        </div>
                                    </div>
                                    <div style={{ marginTop: 9, display: 'flex', width: '32.395%' }}>
                                        <div style={{ color: 'rgba(0, 0, 0,0.6)', fontSize: 12, width: 84, textAlign: 'end' }}>
                                            试用期：
                                        </div>
                                        <div style={{ color: '#4A4A4A', fontSize: 13 }}>
                                            {pepObj.regularDate ? moment(pepObj.regularDate).diff(pepObj.hiredate, 'months', true).toFixed(1) + '个月' : '暂无'}
                                        </div>
                                    </div>
                                    {
                                        pepObj.vitae ? (
                                            <a href={`/_file-server/${pepObj.vitae}`}
                                                style={{ display: 'flex', width: 139, height: 27, background: '#E5F2FF', borderRadius: 14, cursor: "pointer", alignItems: 'center', justifyContent: 'center' }}>
                                                <div style={{ width: 18, height: 18 }}>
                                                    <img src="/assets/images/hrImg/resume.png" alt="" style={{ width: '100%', height: '100%' }} />
                                                </div>
                                                <div style={{ marginLeft: 10, fontSize: 13, color: '#4A4A4A' }}>
                                                    他/她的简历
                                                </div>
                                            </a>) : ''
                                    }
                                </div>
                            </div>
                        </div>
                        <div style={{ borderRight: '1px solid #DCDEE0', margin: '-16px 0px -20px 0px' }}></div>
                        <div style={{ marginLeft: 30, marginTop: 8, paddingRight: 30, width: '38%' }}>
                            <div style={{ color: '#4A4A4A', fontSize: 14 }}>
                                他/她的历史工作经历与职务
                            </div>
                            <div style={{ marginTop: 12, fontSize: 13, display: 'flex', alignItems: 'center' }}>
                                <div style={{ width: 4, height: 4, borderRadius: '50%', marginRight: 6, background: '#005ABD' }}></div>{pepObj.occupationalHistory || '暂无'}
                            </div>
                        </div>
                    </div>
                    <div style={{ borderBottom: '1px solid #DCDEE0', margin: '24px 0px 24px -20px' }}></div>
                    <div style={{ paddingLeft: 17 }}>
                        <div style={{ color: '#4A4A4A', fontSize: 14, marginBottom: 10, fontWeight: 'bold' }}>
                            基本动作
                        </div>
                        <div style={{ color: '#4A4A4A', fontSize: 14, display: 'flex', alignItems: 'center' }}>
                            时间筛选：<DatePicker onChange={handleChange} type="dateRange" density="compact" style={{ width: 242 }} />
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', margin: '5px 0px 12px' }}>
                            <div style={{ width: 18, height: 18 }}>
                                <img src="/assets/images/hrImg/information.png" alt="" style={{ width: '100%', height: '100%' }} />
                            </div>
                            <div style={{ marginLeft: 12, color: '#4A4A4A', fontSize: 14 }}>
                                加班信息
                            </div>
                        </div>
                        <div style={{ display: 'flex', width: '100%' }}>
                            <div style={{ width: 540, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', padding: 13 }}>
                                <ReactECharts
                                    option={option}
                                    notMerge={true}
                                    lazyUpdate={true}
                                    theme={"theme_name"}
                                />
                            </div>
                            <div style={{ marginLeft: 17, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', width: '64.424%' }}>
                                <div style={{ display: 'flex', background: '#F4F5FC', height: 40, alignItems: 'center', width: '100%' }}>
                                    <div style={{ width: 6, height: 40, background: '#005ABD' }}></div>
                                    <div style={{ display: 'flex', alignItems: 'center', marginLeft: 24, width: '19.964%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            加班次数：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {tableData.length}次
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '19.124%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            工作日：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 || 0}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '19.87%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            普通假日：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff / 3600 || 0}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '19.03%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            法定假日：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600 || 0}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '19.217%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            累计加班时长：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {(tableStatistic.sumPayWorkday / 3600 + tableStatistic.sumTakeRestWorkday / 3600 + tableStatistic.sumTakeRestDayoff / 3600 + tableStatistic.sumPayDayoff / 3600 + tableStatistic.sumPayFestivals / 3600 + tableStatistic.sumTakeRestFestivals / 3600) || 0}小时
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <Table
                                        columns={columns}
                                        dataSource={tableData}
                                        bordered={false}
                                        empty="暂无数据"
                                        pagination={false}
                                        scroll={scroll}
                                    />
                                </div>
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', margin: '19px 0px 12px' }}>
                            <div style={{ width: 18, height: 18 }}>
                                <img src="/assets/images/hrImg/information.png" alt="" style={{ width: '100%', height: '100%' }} />
                            </div>
                            <div style={{ marginLeft: 12, color: '#4A4A4A', fontSize: 14 }}>
                                请假信息
                            </div>
                        </div>
                        <div style={{ display: 'flex', width: '100%' }}>
                            <div style={{ width: 540, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', padding: 13 }}>
                                <ReactECharts
                                    option={leaveoption}
                                    notMerge={true}
                                    lazyUpdate={true}
                                    theme={"theme_name2"}
                                />
                            </div>
                            <div style={{ marginLeft: 17, boxShadow: '0px 0px 8px 1px rgba(0,0,0,0.1)', width: '64.424%' }}>
                                <div style={{ display: 'flex', background: '#F4F5FC', height: 40, alignItems: 'center', width: '100%' }}>
                                    <div style={{ width: 6, height: 40, background: '#005ABD' }}></div>
                                    <div style={{ display: 'flex', alignItems: 'center', marginLeft: 24, width: '16.964%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            请假次数：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveData.length}次
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '15.124%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            年休假：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveStatistic.year}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '15.87%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            事假：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveStatistic.compassionate}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '15.03%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            病假：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveStatistic.sick}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '18%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            其他类型请假：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveStatistic.other}小时
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center', width: '16.217%' }}>
                                        <div style={{ fontSize: 13, color: '#4A4A4A' }}>
                                            合计请假时长：
                                        </div>
                                        <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 5 }}>
                                            {leaveStatistic.all}小时
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <Table
                                        columns={leaveColumns}
                                        dataSource={leaveData}
                                        bordered={false}
                                        empty="暂无数据"
                                        pagination={false}
                                        scroll={scroll}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {//新增档案弹框
                personnelModal ?
                    <PersonnelModal
                        visible={true}
                        editObj={pepObj}
                        adminEdit={true}
                        cancel={() => {
                            setPersonnelModal(false);
                        }}
                        close={() => {
                            setPersonnelModal(false);
                            peopleDetail()
                        }} >
                    </PersonnelModal> : ''
            }
            {//删除弹框
                deleteModal ?
                    <DeleteModal
                        visible={true}
                        pepUserId={pepUserId}
                        cancel={() => {
                            setDeleteModal(false);
                        }}
                        close={() => {
                            setDeleteModal(false);
                            history.goBack()
                        }} >
                    </DeleteModal> : ''
            }
        </>
    )
}

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