/**
 * @title: 视频
 */

import React, { useEffect } from 'react';
import { useSetState, useEventEmitter } from 'ahooks';
import { request, getUrlParam } from '@vtx/utils';
import Monitor from './components/Monitor';
import { VtxDatePicker, VtxTimePicker } from '@vtx/components';
import { Button, message } from 'antd';
import dayjs from 'dayjs';
import History from './components/History';
import PropTypes from 'prop-types';
import useSettings from '../../vm-hooks/useSettings';
import one from '../../../image/1.png';
import four from '../../../image/4.png';
import nine from '../../../image/9.png';

const imgList = {
    1: one,
    4: four,
    9: nine,
};

function getVideoList(params = {}) {
    return new Promise(resolve => {
        request
            .get('/cloud/vis/base/np/videoDevice/loadVideoChannelByBillId.smvc', {
                body: params,
            })
            .then(res => {
                if (res?.result == 0) {
                    resolve(res);
                }
            });
    });
}
function Video(props) {
    const [state, setState] = useSetState({
        mode: 'monitor',
        current: '1',
        videoList: [],
        currentVideo: {},
        day: dayjs().format('YYYY-MM-DD'),
        startTime: '00:00:00',
        endTime: '23:59:59',
    });
    const monitorVideoPlay$ = useEventEmitter();
    const monitorWindowChange$ = useEventEmitter();
    const historyVideoPlay$ = useEventEmitter();
    const { theme } = useSettings();
    useEffect(() => {
        getVideoList({
            billId: props.billId,
            tenantId: getUrlParam('tenantId'),
        }).then(res => {
            if (res && res.result == 0 && res.data) {
                let list = JSON.parse(res.data);
                setState({ videoList: list });
            }
        });
    }, [props.billId]);
    return (
        <div className="video">
            <div className="btnGroup">
                {[
                    { code: 'monitor', name: '实时视频' },
                    { code: 'history', name: '历史视频' },
                ].map(item => {
                    return (
                        <span
                            key={item.code}
                            className={`btn ${state.mode == item.code ? 'checked' : {}}`}
                            onClick={() => {
                                setState({ mode: item.code });
                            }}
                        >
                            {item.name}
                        </span>
                    );
                })}
            </div>

            <div className="left">
                <div className="list" style={state.mode == 'history' ? {} : { height: '100%' }}>
                    {state.videoList.map(item => {
                        return (
                            <div
                                key={item.channelNum}
                                className={`item ${
                                    item.channelNum == state.currentVideo.channelNum
                                        ? 'checked'
                                        : {}
                                }`}
                                onClick={() => {
                                    let obj = {
                                        channelNum: item.channelNum,
                                        deviceId: item.videoDeviceId,
                                    };
                                    setState({ currentVideo: obj });
                                    state.mode == 'monitor' && monitorVideoPlay$.emit(obj);
                                }}
                            >
                                {item.channelName}
                            </div>
                        );
                    })}
                </div>

                {state.mode == 'history' && (
                    <div
                        style={{
                            height: '220px',
                            width: '400px',
                            marginTop: '10px',
                            borderTop: '1px solid rgba(255,255,255,0.5)',
                        }}
                    >
                        <div className="searBox">
                            <div className="line">
                                <span className="label">选择日期：</span>
                                <VtxDatePicker
                                    value={state.day}
                                    dropdownClassName={theme}
                                    onChange={(date, dateStr) => {
                                        setState({ day: dateStr });
                                    }}
                                />
                            </div>
                            <div className="line">
                                <span className="label">起始时间：</span>
                                <VtxTimePicker
                                    dropdownClassName={theme}
                                    style={{ width: '183px' }}
                                    value={state.startTime}
                                    onChange={(date, dateStr) => {
                                        setState({ startTime: dateStr });
                                    }}
                                />
                            </div>
                            <div className="line">
                                <span className="label">结束时间：</span>
                                <VtxTimePicker
                                    style={{ width: '183px' }}
                                    value={state.endTime}
                                    onChange={(date, dateStr) => {
                                        setState({ endTime: dateStr });
                                    }}
                                />
                            </div>
                            <Button
                                style={{
                                    background: '#5FD9B1',
                                    color: '#FFFFFF',
                                    display: 'block',
                                    margin: 'auto',
                                    marginTop: '15px',
                                }}
                                onClick={() => {
                                    if (state.currentVideo.deviceId) {
                                        historyVideoPlay$.emit({
                                            ...state.currentVideo,
                                            startTime: `${state.day} ${state.startTime}`,
                                            endTime: `${state.day} ${state.endTime}`,
                                        });
                                    } else {
                                        message.warn('请选择要查询的视频');
                                    }
                                }}
                            >
                                查询
                            </Button>
                        </div>
                    </div>
                )}
            </div>
            {state.mode == 'monitor' && (
                <div className="right">
                    <div className="grid">
                        {['1', '4', '9'].map(item => {
                            return (
                                <span
                                    key={`round${item}`}
                                    className={`bg ${item === state.current ? 'checked' : {}}`}
                                    onClick={() => {
                                        setState({ current: item });
                                        monitorWindowChange$.emit({
                                            winNum: Number(item),
                                        });
                                    }}
                                >
                                    <img src={imgList[item]} />
                                </span>
                            );
                        })}
                    </div>
                    <Monitor
                        winNum={Number(state.current)}
                        monitorVideoPlay$={monitorVideoPlay$}
                        monitorWindowChange$={monitorWindowChange$}
                    />
                </div>
            )}
            {state.mode == 'history' && (
                <div className="right">
                    <History historyVideoPlay$={historyVideoPlay$} />
                </div>
            )}
        </div>
    );
}

Video.propTypes = {
    billId: PropTypes.string,
};

export default Video;
