import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select, Input, Table, Spin, Button } from '@douyinfe/semi-ui';
import { RESERVEITEM_TYPE } from '../constants';
import '../style.less'

const ReserveItemsDepSummary = (props) => {
    const { dispatch, actions, isRequesting, reserveItemReport } = props;
    const [downloadUrl, setDownloadUrl] = useState(null);
    const [downloadKey, setDownloadKey] = useState(null);
    useEffect(() => {
        dispatch(actions.businessManagement.getReserveItemReport(RESERVEITEM_TYPE.depSummary));
    }, []);

    const exportReport = (url) => {
        setDownloadUrl(`/_file-server${url}`);
        setDownloadKey(Math.random());
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'name',
            render: (text, record, index) => index + 1
        },
        {
            title: '时间',
            dataIndex: 'date',
        },
        {
            title: '名称',
            dataIndex: 'path',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record, indexe) => (<Button theme='solid' type='secondary' onClick={() => exportReport(record.path)} > 导出</Button >)
        },
    ];


    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: 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", }}>SUMMARY OF DEPARTMENTAL RESERVE ITEMS</div>
                        </div>
                    </div>
                    <div style={{ borderBottom: '1px solid #F2F3F5', marginLeft: '-20px', marginBottom: 16 }}></div>
                    {
                        downloadUrl ? <iframe key={downloadKey} src={downloadUrl} style={{ display: 'none' }} /> : ''
                    }
                    <div style={{ marginBottom: 22 }}>
                        <Spin spinning={isRequesting}>
                            <Table
                                rowKey={"id"}
                                columns={columns}
                                dataSource={reserveItemReport}
                            />
                        </Spin>
                    </div>
                </div>
            </div>
        </>
    )
}


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

export default connect(mapStateToProps)(ReserveItemsDepSummary);