import React, { useEffect, useState, useMemo } from 'react';
import { connect } from 'react-redux';
import { Table, Pagination, Skeleton, DatePicker, Button } from '@douyinfe/semi-ui';
import { SkeletonScreen } from "$components";
import moment from 'moment'
import '../style.less'
import { isAuthorized } from '$utils'

const RegularKPI = (props) => {
    const [year, setYear] = useState(null)
    const [month, setMonth] = useState(null)
    const { dispatch, actions, employeeAssessmentList } = props
    const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
    const { getemployeeAssessmentList } = actions.humanAffairs;
    const [downloadUrl, setDownloadUrl] = useState(null);
    const [downloadKey, setDownloadKey] = useState(null);
    useEffect(() => {
        getList()
    }, [query])
    function getList() {
        dispatch(getemployeeAssessmentList(query, 1))
    }
    function exportReport(url) {
        setDownloadUrl(`/_file-server${url}`);
        setDownloadKey(Math.random());
    }
    function handleRow(record, index) {// 给偶数行设置斑马纹
        if (index % 2 === 0) {
            return {
                style: {
                    background: '#FAFCFF',
                }
            };
        } else {
            return {};
        }
    }

    const columns = [{
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        width: 60,
        render: (text, record, index) => index + 1
    }, {
        title: '月份',
        dataIndex: 'yearMonth',
        key: 'yearMonth',
        width: 80,
        render: (text, record, index) => `${record.year}-${record.month}`
    },
    {
        title: '报表',
        dataIndex: 'name',
        key: 'name',
        width: 200,
        // render: (text, r, index) => {

        // }
    }, {
        title: '操作',
        dataIndex: 'action',
        width: 120,
        render: (text, record) => {
            return <div>

                {isAuthorized('DOWNLOADOFFICIALEMPLOYEEASSESSMENT') ? <span onClick={() => exportReport(record.path)} style={{ color: '#1890FF', cursor: 'pointer' }}>下载</span>:''}
            </div>
        }
    }];
    function getTime(date, dateString) {
        if (date) {
            setYear(moment(date).format('YYYY'))
            setMonth(moment(date).format('MM'))
        } else {
            setYear(null)
            setMonth(null)
        }

    }
    function search() {
        let query = { limit: 10, page: 0, year: year, month: month }
        setQuery(query)
    }
    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", }}>FORMAL EMPLOYEE ASSESSMENT</div>
                        </div>
                    </div>
                    <div style={{ width: '100%', height: '35px', lineHeight: '35px', marginTop: '20px' }}>
                        查询时间：<DatePicker type="month" style={{ width: 200 }} onChange={getTime} />
                        <Button onClick={search} theme='solid' type='primary' style={{ marginLeft: 15 }}>查询</Button>
                    </div>
                    <div style={{ marginTop: 20 }}>
                        <Skeleton
                            // loading={loading}
                            loading={false}
                            active={true}
                            placeholder={SkeletonScreen()}
                        >
                            <Table
                                columns={columns}
                                dataSource={employeeAssessmentList.rows}
                                bordered={false}
                                empty="暂无数据"
                                pagination={false}
                                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)' }}>
                                    共{employeeAssessmentList.count}条信息
                                </span>
                                <Pagination
                                    total={employeeAssessmentList.count}
                                    showSizeChanger
                                    currentPage={query.page + 1}
                                    pageSizeOpts={[10, 20, 30, 40]}
                                    onChange={(currentPage, pageSize) => {
                                        setQuery({ limit: pageSize, page: currentPage - 1, year: year, month: month });
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                </div>
                {
                    downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
                }
            </div>
        </>
    )
}

function mapStateToProps(state) {
    const { auth, global, employeeAssessmentList } = state;
    return {
        user: auth.user,
        actions: global.actions,
        employeeAssessmentList: employeeAssessmentList.data || {}
    };
}

export default connect(mapStateToProps)(RegularKPI);