import React, { useState } from 'react';
import { getUrlParam } from '@vtx/utils';
import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
import './index.less';

interface WGGSProps {
    classPrefix?: string;
}

const SPJK = ({ classPrefix = '' }: WGGSProps) => {
    const prefix = `${classPrefix}-spjk`;
    const [tab, setTab] = useState('real');
    const onTabChange = (tab: string) => {
        setTab(tab);
    };
    return (
        <div className={prefix}>
            <SubTabsLine activeKey={tab} onChange={onTabChange}>
                <SubTabPane subKey="real" key="real" tab="实时视频">
                    <iframe
                        width="100%"
                        height="650px"
                        src={`${
                            window.location.origin
                        }/vis-reborn/#/realTimeVideo?tenantId=${getUrlParam(
                            'tenantId',
                        )}&userId=${getUrlParam('userId')}&token=${getUrlParam(
                            'token',
                        )}&access_token=${getUrlParam('token')}&systemCode=product_vis&theme=dark`}
                    />
                </SubTabPane>
                <SubTabPane subKey="history" key="history" tab="历史视频">
                    <iframe
                        width="100%"
                        height="650px"
                        src={`${
                            window.location.origin
                        }/vis-reborn/#/historyVideo?tenantId=${getUrlParam(
                            'tenantId',
                        )}&userId=${getUrlParam('userId')}&token=${getUrlParam(
                            'token',
                        )}&access_token=${getUrlParam('token')}&systemCode=product_vis&theme=dark`}
                    />
                </SubTabPane>
            </SubTabsLine>
        </div>
    );
};
export default SPJK;
