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 TodayRun from './TodayRun';
import Lcfx from './Lcfx';
import { BaseService } from '../../api';
import './index.less';

import refresh from '../../imgs/refresh.png';
import position from '../../imgs/position.png';
import todayOnline from '../../imgs/todayOnline.png';
interface BaseProps {
    id: string;
}

const BaseInfo = (props: BaseProps) => {
    const { id } = props;
    const { theme } = useSettings();
    const [state, setState] = useSetState({
        baseActiveKey: '1',
        activeKey: '1',
    });
    const { baseActiveKey, activeKey } = state;
    const { baseInfo, info } = BaseService.useBaseInfo(id);
    window.console.log(info);
    const baseTabContent = <Base data={baseInfo} gap={18} />;
    let todayRun = <TodayRun />;

    return (
        <div className={`staff-base ${theme}`}>
            <div className="staff-base-left">
                <div className="staff-base-left--text">
                    <img src={refresh} />
                    {info?.equipmentTime || '--'}
                </div>
                <div className="staff-base-left--text">
                    <img src={position} />
                    {info?.address || '--'}
                </div>
                <div className="staff-base-left--online">在线</div>
                <div className="staff-base-left--gif"></div>
                <div className="staff-base-left--pngs">
                    <div className="staff-base-left--pngs-item">
                        <img src={todayOnline} />
                        <div className="staff-base-left--pngs-item-name">
                            今日在线
                        </div>
                        <div className="staff-base-left--pngs-item-value">
                            <span>{5.11}</span>km
                        </div>
                    </div>
                    <div className="staff-base-left--pngs-item">
                        <img src={todayOnline} />
                        <div className="staff-base-left--pngs-item-name">
                            今日在线
                        </div>
                        <div className="staff-base-left--pngs-item-value">
                            <span>{5.11}</span>km
                        </div>
                    </div>
                </div>
            </div>
            <div className="staff-base-right">
                <div className="staff-base-right-base">
                    <SubTabs
                        onChange={(key: string) => {
                            setState({
                                baseActiveKey: key,
                            });
                        }}
                        activeKey={baseActiveKey}
                    >
                        {[
                            {
                                name: '基本信息',
                                key: '1',
                                content: baseTabContent,
                            },
                            {
                                name: '路线信息',
                                key: '2',
                                content: <div>--</div>,
                            },
                        ].map((ele: any) => (
                            <SubTabPane
                                subKey={ele.key}
                                key={ele.key}
                                tab={ele.name}
                            >
                                {ele.content}
                            </SubTabPane>
                        ))}
                    </SubTabs>
                </div>
                <div className="staff-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="staff-wgfx">
                    <SubTitle title="里程分析" />
                    <div className="staff-wgfx-content">
                        <Lcfx data={[]} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default BaseInfo;
