import React from 'react';
import { useSetState } from 'ahooks';
import useSettings from '../../../vm-hooks/useSettings';
import SubTitle from '../../../vm-sub-title';
import SubTabs, { SubTabPane } from '../../../vm-sub-tabs';
import Base from '../../../vm-info-collection';
import Charts from './Charts';
import TodayRun from './TodayRun';
import TodayRunJXH from './TodayRunJXH';
import TodayRunLJSY from './TodayRunLJSY';
import Wgfx from './Wgfx';
import WgfxJXH from './WgfxJXH';
import WgfxLJSY from './WgfxLJSY';
import { BaseService } from '../../api';
import './index.less';

import refresh from '../../imgs/refresh.png';
import position from '../../imgs/position.png';

interface BaseInfoProps {
    id: string;
}

const BaseInfo = (props: BaseInfoProps) => {
    const { id } = props;
    const { theme } = useSettings();
    const [state, setState] = useSetState({
        baseActiveKey: '1', // 基本信息key
        activeKey: '1', // 今日运行key
    });
    const { baseActiveKey, activeKey } = state;
    const { baseInfo, info } = BaseService.useBaseInfo(id);
    const baseTabContent = <Base data={baseInfo} gap={18} />;

    let todayRun = <TodayRun />;
    let wgfx = <Wgfx />;
    if (info?.actionType === 'ACTION_JXH') {
        todayRun = <TodayRunJXH />;
        wgfx = <WgfxJXH data={[]} />;
    }
    if (info?.actionType === 'ACTION_LJSY') {
        todayRun = <TodayRunLJSY />;
        wgfx = <WgfxLJSY data={[]} />;
    }

    return (
        <div className={`car-base ${theme}`}>
            <div className="car-base-left">
                <div className="car-base-left--text">
                    <img src={refresh} />
                    {info?.equipmentTime}
                </div>
                <div className="car-base-left--text">
                    <img src={position} />
                    {info?.address}
                </div>
                <div className="car-base-left--online">在线</div>
                <div className="car-base-left--gif"></div>
                <Charts {...info} />
            </div>
            <div className="car-base-right">
                <div className="car-base-right-base">
                    <SubTabs
                        onChange={(key: string) => {
                            setState({
                                baseActiveKey: key,
                            });
                        }}
                        activeKey={baseActiveKey}
                    >
                        {[
                            {
                                name: '基本信息',
                                key: '1',
                                content: baseTabContent,
                            },
                        ].map((ele: any) => (
                            <SubTabPane
                                subKey={ele.key}
                                key={ele.key}
                                tab={ele.name}
                            >
                                {ele.content}
                            </SubTabPane>
                        ))}
                    </SubTabs>
                </div>
                <div className="car-base-right-right">
                    <SubTabs
                        onChange={(key: string) => {
                            setState({
                                activeKey: key,
                            });
                        }}
                        activeKey={activeKey}
                    >
                        {[
                            {
                                name: '今日运行',
                                key: '1',
                                content: todayRun,
                            },
                            {
                                name: '作业统计',
                                key: '2',
                                content: (
                                    <div>
                                        违规次数、累计违规天数、累计违规时长（只有机械化需要）
                                    </div>
                                ),
                            },
                        ].map((ele: any) => (
                            <SubTabPane key={ele.key} subKey={ele.key} tab={ele.name}>
                                {ele.content}
                            </SubTabPane>
                        ))}
                    </SubTabs>
                </div>
                <div className="car-wgfx">
                    <SubTitle title="违规分析" />
                    <div className="car-wgfx-content">{wgfx}</div>
                </div>
            </div>
        </div>
    );
};

export default BaseInfo;
