import React, { useEffect, useState, useRef, useMemo } from 'react';
import { connect } from 'react-redux';
import { Table, Button, Pagination, Skeleton, Popconfirm, Tooltip } from '@douyinfe/semi-ui';
import { SkeletonScreen, Setup } from "$components";
import ImportPositionRatingModal from '../components/importPositionRating';
import '../style.less';

const PositionRating = (props) => {
    const { dispatch, actions, memberList } = props
    const { getMemberList, getPositionRating, postPositionRating, delPositionRating } = actions.humanAffairs;

    const form = useRef();//表单
    let [archivesList, setArchivesList] = useState([]);//人员列表
    const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
    const [order, setOrder] = useState({ orderBy: 'hiredate', orderDirection: 'DESC' }); //页码信息
    const [importModal, setImportModal] = useState(false);
    const [limits, setLimits] = useState()//每页实际条数
    const page = useRef(query.page);//哪一页

    useEffect(() => {
        getMainList()
    }, [query])

    function getMainList(queryObj) {
        dispatch(getPositionRating(queryObj || query)).then((res) => {
            if (res.success) {
                setArchivesList(res.payload?.data?.rows)
                setLimits(res.payload?.data?.count)
            }
        })
    }
    //获取表格属性设置
    const columns = [{
        title: '序号',
        width: 70,
        dataIndex: "number",
        key: "number",
        render: (_, r, index) => <span>{index + 1}</span>,
    }, {
        title: (
            <div>
                <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 部门名称
            </div>
        ),
        width: 160,
        dataIndex: "department",
        key: "department",
        render: (_, r, index) => {
            return (
                <div style={{ display: 'flex' }}>
                    {
                        r.department.map((ite, idx) => {
                            let departmentsArr = []
                            for (let i = 0; i < r.department.length; i++) {
                                departmentsArr.push(r.department[i].depName)
                            }
                            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.depName}
                                        </div>) : ('')

                                    }
                                    {
                                        r.department.length > 1 && idx == 1 ? (
                                            <Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
                                                <div style={{ padding: '0px 4px 1px 4px ', color: 'rgba(0,90,189,0.8)', fontSize: 12, marginRight: 4, cursor: "pointer", }}>
                                                    +{r.department.length - 1}
                                                </div>
                                            </Tooltip>
                                        ) : ('')
                                    }
                                </div>
                            )
                        })
                    }
                </div>
            )
        },
    }, {
        title: (
            <div>
                <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 姓名
            </div>
        ),
        width: 100,
        dataIndex: "userName",
        key: "userName",
        render: (_, r, index) => {
            return (r.userName ? r.userName : '-');
        },
    }, {
        title: (
            <div>
                <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} /> 岗位
            </div>
        ),
        width: 120,
        dataIndex: "userPost",
        key: "userPost",
    }, {
        title: '评级时间',
        width: 120,
        dataIndex: "ratingTime",
        key: "ratingTime",
    }, {
        title: '理论基础测评成绩',
        width: 150,
        dataIndex: "theoryBasicScore",
        key: "theoryBasicScore",
    }, {
        title: '理论基础测评是否通过（≥60）',
        width: 130,
        dataIndex: "theoryPassed",
        key: "theoryPassed",
    }, {
        title: '评级总成绩',
        width: 100,
        dataIndex: "totalScore",
        key: "totalScore",
    }, {
        title: '评级总成绩是否通过（K≥60）',
        width: 130,
        dataIndex: "totalRatingPassed",
        key: "totalRatingPassed",
    }, {
        title: '技术职级等级',
        width: 150,
        dataIndex: "technicalGrade",
        key: "technicalGrade",
    }, {
        title: '操作',
        width: 100,
        dataIndex: "action",
        key: "action",
        render: (text, record) => <div style={{ color: "#1890FF" }}><Popconfirm
            style={{ minWidth: "max-content" }}
            title="提示"
            content="确认删除条信息？"
            onConfirm={() => { handleDel(record.id) }}
            position={"leftBottom"}
        >
            <a style={{ cursor: 'pointer' }}>删除</a>
        </Popconfirm></div>
    }];

    function handleRow(record, index) {//斑马条纹
        // 给偶数行设置斑马纹
        if (index % 2 === 0) {
            return {
                style: {
                    background: '#FAFCFF',
                }
            };
        } else {
            return {};
        }
    }
    const handleImportModal = () => {
        if (!memberList.length) {
            dispatch(getMemberList())//查询人员列表
        }
        setImportModal(true);
    }

    const handleImportOk = (dataToSave) => {
        dispatch(postPositionRating(dataToSave)).then(res => {
            setImportModal(false);
            setQuery({ limit: 10, page: 0 });
            getMainList({ limit: 10, page: 0 });
        })
    }
    const handleDel = (id) => {
        dispatch(delPositionRating(id)).then(res => {
            setQuery({ limit: 10, page: 0 });
            getMainList({ limit: 10, page: 0 });
        })
    }
    const scroll = useMemo(() => ({}), []);
    return (
        <>
            <div style={{ padding: '0px 12px' }}>
                <div style={{ display: 'flex' }}>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>档案中心</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>人员档案</div>
                    <div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: '#033C9A', fontSize: 14 }}>岗位评级</div>
                </div>
                <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'baseline' }}>
                            <div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                            <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>岗位评级</div>
                            <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>POSITION RATING</div>
                        </div>
                    </div>
                    <div style={{ marginRight: 20, marginTop: 18 }}>
                        <div style={{ display: 'flex', margin: '16px 0px', justifyContent: 'flex-end' }}>
                            <div style={{ display: 'flex', marginRight: 20 }}>
                                <div style={{ padding: '6px 20px', background: '#0F7EFB', color: '#FFFFFF', fontSize: 14, cursor: "pointer" }}
                                    onClick={() => { handleImportModal(); }}
                                >
                                    导入
                                </div>
                            </div>
                        </div>
                        <div style={{ border: '1px solid #C7E1FF', background: '#F4F8FF', borderRadius: 2, height: 32, width: 669, padding: '8px 0px 7px 12px', display: 'flex', alignItems: 'center', color: '#0F7EFB', fontSize: 12 }}>
                            <img src="/assets/images/hrImg/!.png" alt="" style={{ width: 14, height: 14, marginRight: 8 }} />
                            表格中带有认证标识"
                            <img src="/assets/images/hrImg/V.png" alt="" style={{ width: 14, height: 14 }} />
                            "信息的为系统基础数据，来源于项企PEP、钉钉等系统，其他数据均为导入或自定义数据
                        </div>
                        <div style={{ marginTop: 20 }}>
                            <Skeleton
                                // loading={loading}
                                loading={false}
                                active={true}
                                placeholder={SkeletonScreen()}
                            >
                                <Table
                                    columns={columns}
                                    dataSource={archivesList}
                                    bordered={false}
                                    empty="暂无数据"
                                    pagination={false}
                                    // onChange={({ sorter }) => {
                                    //     if (sorter.key == 'userCode') {
                                    //         if (sorter.sortOrder == 'descend') {
                                    //             setOrder({ orderBy: 'code', orderDirection: 'DESC' })
                                    //         } else {
                                    //             setOrder({ orderBy: 'code', orderDirection: 'ASC' })
                                    //         }
                                    //     } else if (sorter.key == 'age') {
                                    //         if (sorter.sortOrder == 'descend') {
                                    //             setOrder({ orderBy: 'age', orderDirection: 'DESC' })
                                    //         } else {
                                    //             setOrder({ orderBy: 'age', orderDirection: 'ASC' })
                                    //         }
                                    //     } else {
                                    //         if (sorter.sortOrder == 'descend') {
                                    //             setOrder({ orderBy: 'hiredate', orderDirection: 'DESC' })
                                    //         } else {
                                    //             setOrder({ orderBy: 'hiredate', orderDirection: 'ASC' })
                                    //         }
                                    //     }
                                    // }}
                                    onRow={handleRow}
                                    scroll={scroll}
                                />
                            </Skeleton>
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    padding: "20px 20px",
                                }}
                            >
                                <div>
                                </div>
                                <div style={{ display: 'flex', }}>
                                    <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
                                        共{limits}条信息
                                    </span>
                                    <Pagination
                                        className="22"
                                        total={limits}
                                        showSizeChanger
                                        currentPage={query.page + 1}
                                        pageSizeOpts={[10, 20, 30, 40]}
                                        onChange={(currentPage, pageSize) => {
                                            setQuery({ limit: pageSize, page: currentPage - 1 });
                                            page.current = currentPage - 1
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    {importModal ?
                        <ImportPositionRatingModal
                            memberList={memberList}
                            onOk={handleImportOk}
                            onCancel={() => { setImportModal(false) }}
                        /> : ''}
                </div>
            </div>
        </>
    )
}

function mapStateToProps(state) {
    const { auth, global, MemberSearch, MemberList } = state;
    return {
        user: auth.user,
        actions: global.actions,
        xqMembers: MemberSearch.data,
        memberList: MemberList.data && MemberList.data.rows || []
    };
}

export default connect(mapStateToProps)(PositionRating);