import React from 'react';
import moment from 'moment';
import useSettings from '../../../vm-hooks/useSettings';
import SubTitle from '../../../vm-sub-title';
import Base from '../../../vm-info-collection';
import Rules from './Rules';
import TodayWork from './TodayWork';
import CarWork from './CarWork';
import { BaseService } from '../../api';
import './index.less';

interface BaseInfoProps {
    id: string;
}

const BaseInfo = (props: BaseInfoProps) => {
    const { id } = props;
    const { theme } = useSettings();
    const nowDate = moment().format('YYYY-MM-DD');

    const {
        baseInfo,
        rules,
        todayWorkRes,
        dataSource,
    } = BaseService.useBaseInfo(id, '2022-01-01', nowDate);

    return (
        <div className={`cp-baseContent ${theme}`}>
            <div className="base-top">
                <div className="base-top-base">
                    <SubTitle title="基本信息" />
                    <Base data={baseInfo} horizontal={true} gap={24} />
                </div>
                <div className="base-top-twork">
                    <SubTitle title="今日作业" />
                    <TodayWork data={todayWorkRes} />
                </div>
            </div>
            <div className="base-bottom">
                <div className="base-bottom-syrules">
                    <SubTitle title="收运规则" />
                    <Rules rules={rules} />
                </div>
                <div className="base-bottom-table">
                    <CarWork carId={id} dataSource={dataSource} />
                </div>
            </div>
        </div>
    );
};

export default BaseInfo;
