import React from 'react';
import { useSetState } from 'ahooks';
import { Space, Calendar, Timeline } from 'antd';
import moment from 'moment';
import { VMSelect } from '../vm-filter';
import { DeviceData } from './api';
import PropTypes from 'prop-types';
import BaseInfo from '../vm-info-collection';
import './style';

const DeviceContent = () => {
    const [state, setState] = useSetState({
        start: moment().subtract(1, 'y'),
        end: moment(),
        ids: [],
        deviceId: '',
        missDate: [],
        normalDate: [],
    });
    const { info } = DeviceData.deviceData(state.deviceId);
    const handleDateChange = deviceId => {
        setState({ deviceId });
    };

    return (
        <div className="community-throw-content">
            <div className="top-bar">
                {/* <StatCollection items={statData} /> */}
                <Space className="right">
                    <VMSelect
                        value={state.deviceId}
                        style={{ width: '200px' }}
                        onChange={value => value && handleDateChange(value)}
                    >
                        {/* <VMSelect.Option></VMSelect.Option> */}
                    </VMSelect>
                    {/* <ExportBtn onClick={handleExport} /> */}
                </Space>
            </div>
            <div className="table-container">
                <div className="half">
                    <div className="base-title">基本信息</div>

                    <div className="half">
                        <BaseInfo data={info.slice(0, 4)} />
                    </div>
                    {/* <div></div> */}
                    <div className="half">
                        <BaseInfo data={info.slice(5, 9)} />
                    </div>
                    <div className="base-title">满溢信息</div>

                    <Timeline style={{ marginTop: '10px' }}>
                        {/* <Timeline.Item color="red">
                            <div className="timeline-text">Solve initial network problems 1</div>
                            <div>Solve initial network problems 2</div>
                            <div>Solve initial network problems 3 2015-09-01</div>
                        </Timeline.Item> */}
                    </Timeline>
                </div>

                <div className="half">
                    <div className="base-title">运行信息</div>

                    <div className="calendar">
                        <Calendar
                            fullscreen={false}
                            headerRender={() => {
                                return (
                                    <div className="dateheader">
                                        <div className="date">{moment().format('YYYY年MM月')}</div>
                                        <div
                                            className="point"
                                            style={{
                                                position: 'absolute',
                                                right: '100px',
                                                top: '12px',
                                            }}
                                        ></div>
                                        <div className="missText">迟到/早退</div>
                                    </div>
                                );
                            }}
                            dateCellRender={date => {
                                if (
                                    state.missDate.indexOf(moment(date).format('YYYY-MM-DD')) > -1
                                ) {
                                    return (
                                        <div
                                            className="point"
                                            style={{
                                                position: 'absolute',
                                                bottom: '10px',
                                                left: 'calc(50% - 3px)',
                                            }}
                                        ></div>
                                    );
                                }
                                if (
                                    state.normalDate.indexOf(moment(date).format('YYYY-MM-DD')) > -1
                                ) {
                                    return (
                                        <div
                                            className="point"
                                            style={{
                                                position: 'absolute',
                                                bottom: '10px',
                                                left: 'calc(50% - 3px)',
                                                background: '#51E9CE',
                                            }}
                                        ></div>
                                    );
                                }
                            }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};
DeviceContent.propTypes = {
    id: PropTypes.string,
};

export default DeviceContent;