import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select, Input, Button, RadioGroup, Radio, Table } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import '../style.less'
import moment from 'moment'

const ReserveItemsPeriodicStatistics = (props) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'name',
            render: (text, record, index) => index + 1
        },
        {
            title: '时间',
            dataIndex: 'updateTime',
        },
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record, indexe) => (<Button theme='solid' type='secondary'>导出</Button>)
        },
    ];
    const data = [
        {
            key: '1',
            name: 'Semi Design 设计稿.fig',
            updateTime: '2020-02-02 05:13',
            avatarBg: 'grey',
        },
        {
            key: '2',
            name: 'Semi Design 分享演示文稿',
            updateTime: '2020-01-17 05:31',
        },
        {
            key: '3',
            name: '设计文档',
            updateTime: '2020-01-26 11:01',
        },
    ];

    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", }}>STATISTICAL TABLE OF RESERVE PROJECT CYCLE</div>
                        </div>
                    </div>
                    <div style={{ borderBottom: '1px solid #F2F3F5', marginLeft: '-20px', marginBottom: 16 }}></div>

                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 22 }}>
                        <Table columns={columns} dataSource={data} pagination={false} />
                    </div>
                </div>
            </div>
        </>
    )
}


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

export default connect(mapStateToProps)(ReserveItemsPeriodicStatistics);