FS-IOT/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoOperationHistroyTime.jsx

import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import { DatePicker, Toast, ToastFactory, Space } from '@douyinfe/semi-ui';
import './videoPlay.less';
import moment from "moment";

const timeFormat = 'YYYY-MM-DD HH:mm:ss'

const VideoOperationHistroyTime = ({ close, histroyTime, setHistroyTime, setProcessDisX }) => {
    const [selectedTimeRange, setSelectedTimeRange] = useState(histroyTime)

    useEffect(() => {
        if (!selectedTimeRange.length) {
            setSelectedTimeRange([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
        }
    }, [])

    const ToastInCustomContainer = ToastFactory.create({
        getPopupContainer: () => document.getElementById('vcmp_videoplay'),
    });

    return (
        <div style={{
            position: 'absolute', top: 'calc(50% - 90px)', left: 'calc(50% - 260px)',
            width: 520, height: 180, backgroundColor: '#000000A5', padding: '40px 30px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
        }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <DatePicker
                    density='compact'
                    type="dateTimeRange"
                    value={selectedTimeRange}
                    onChange={(t, timeRange) => {
                        setSelectedTimeRange(timeRange)
                    }}
                    style={{ width: '100%' }}
                // disabledDate={(date, options) => {
                //    const { rangeStart, rangeEnd } = options;
                //    // console.log(date, options);
                //    if (!rangeStart && !rangeEnd) {
                //       return false
                //    }
                //    if (rangeStart) {
                //       return Math.abs(moment(date).diff(moment(rangeStart), 'days')) > 3
                //    }
                //    if (rangeEnd) {
                //       return Math.abs(moment(date).diff(moment(rangeEnd), 'days')) > 3
                //    }
                // }}
                // disabledTime={(date, type) => {
                //    console.log(date, type);
                // }}
                />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}>
                <span style={{ color: '#FF7100' }}>
                    <img src={`/assets/images/background/warning.png`} height={14} style={{ position: 'relative', top: 2, marginRight: 2 }} />
                    最长时间跨度不超过72小时
                </span>
                <span>
                    <Space>
                        <div
                            onClick={() => {
                                close()
                            }}
                            style={{
                                cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
                                textAlign: 'center', background: '#fff', color: 'rgba(0, 0, 0, 0.65)'
                            }}
                        >取消</div>
                        <div
                            onClick={() => {
                                if (selectedTimeRange.length == 2 && selectedTimeRange.every(t => t)) {
                                    if (Math.abs(moment(selectedTimeRange[0]).diff(moment(selectedTimeRange[1]), 'hours')) > 72) {
                                        ToastInCustomContainer.destroyAll()
                                        return ToastInCustomContainer.error('所选时间超过 72 小时')
                                    }
                                    setHistroyTime(selectedTimeRange)
                                    playBackTime.current = selectedTimeRange
                                    setProcessDisX(0)
                                    close()
                                }
                            }}
                            style={{
                                cursor: 'pointer', height: 32, width: 56, lineHeight: '32px', borderRadius: 2,
                                textAlign: 'center', background: '#1859C1', color: '#fff'
                            }}
                        >播放</div>
                    </Space>
                </span>
            </div>
        </div>
    )
}

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

export default connect(mapStateToProps)(VideoOperationHistroyTime);