import React from 'react';
import { VtxImage } from '@vtx/components';
import { useSetState } from 'ahooks';
import { Carousel } from 'antd';
import moment from 'moment';
import { VMRangePicker } from '../../../vm-filter';
import Base from '../../../vm-info-collection';
import NoData from '../../../vm-nodata';
import SubTitle from '../../../vm-sub-title';
import Jcqsfx from './Jcqsfx';
import Situation from './Situation';
// import AlarmDetail from './AlarmDetail';
import { BaseService } from '../../api';
import RealtimeMonitor from './RealtimeMonitor';
import './index.less';

interface BaseInfoProps {
    id: string;
}

const BaseInfo = (props: BaseInfoProps) => {
    const { id } = props;
    const nowDate = moment().format('YYYY-MM-DD');
    const [state, setState] = useSetState({
        startDate: nowDate,
        endDate: nowDate,
        alarmTabs: [{ key: '', name: '全部', value: 0 }],
        alarmTabsValue: [{}],
    });
    const { startDate, endDate } = state;

    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    const { baseInfo, photos } = BaseService.useBaseInfo(id, nowDate, nowDate);

    return (
        <div className="df-baseContent">
            <div className="base-top">
                <div className="base-top-img">
                    {photos.length ? (
                        <VtxImage.PreviewGroup>
                            <Carousel style={{ width: '315px', height: '240px' }}>
                                {photos.map((item: any) => {
                                    return (
                                        <VtxImage
                                            key={item.id}
                                            src={`/cloudFile/common/downloadFile?id=${item.id}`}
                                            alt={item.name}
                                        />
                                    );
                                })}
                            </Carousel>
                        </VtxImage.PreviewGroup>
                    ) : (
                        <NoData />
                    )}
                </div>
                <div className="base-top--base">
                    <SubTitle title="基本信息" />
                    <Base data={baseInfo} />
                </div>
                <div className="base-top--jcqsfx">
                    <div className="base-top--jcqsfx-head">
                        <SubTitle title="进场趋势分析" />
                        <VMRangePicker
                            value={[moment(startDate), moment(endDate)]}
                            onChange={(dates: any) =>
                                dates &&
                                handleDateChange(
                                    moment(dates[0]).format('YYYY-MM-DD'),
                                    moment(dates[1]).format('YYYY-MM-DD'),
                                )
                            }
                            // style={{ position: 'absolute', top: 24, right: 32 }}
                        />
                    </div>
                    <div className="base-top--chart">
                        <Jcqsfx />
                    </div>
                </div>
            </div>
            <div className="base-bottom">
                <div className="base-bottom--left">
                    <SubTitle title="实时运行情况" />
                    <Situation />
                </div>
                {/* <div className="base-bottom--right">
                    <SubTitle title="报警明细" />
                    <div className="base-bottom--right-desc">
                        进场高峰集中在<span>4-6点、18-20点</span>
                        ，进场车次分别为
                        <span>62车、50车</span>注意合理调度，缓解厂区排队情况
                    </div>
                    <div className="base-bottom--right-content">
                        <AlarmDetail />
                    </div>
                </div> */}
                <div className="base-bottom--right">
                    <SubTitle title="指标实时监测" />
                    <div className="base-bottom--right-content">
                        <RealtimeMonitor />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default BaseInfo;
