import React, { useEffect, useRef, useState } from 'react';
import moment from 'moment';
import { VtxDatagrid, VtxDatePicker } from '@vtx/components';
import useSettings from '../vm-hooks/useSettings';
import PropTypes from 'prop-types';
import { BaseData, toFixd2 } from './api';
import './style';

import roadRuleTimeImg from '../../image/road-rule-time.png';
import roadRuleNumImg from '../../image/road-rule-num.png';
import { Empty } from 'antd';

const Title = ({ title }) => {
    const { theme } = useSettings();
    return <div className={`road-title ${theme}`}>{title}</div>;
};

// 基本信息
const BaseInfo = ({ data = [] }) => {
    return (
        <div className="info-collection">
            {data.map(item => {
                return (
                    <div className="info-line" key={item.key}>
                        <div className="label">{item.label}：</div>
                        <div className="value">{item.value || '--'}</div>
                    </div>
                );
            })}
        </div>
    );
};

// 总览
const AllView = ({ dataSource = [] }) => {
    const columns = [
        {
            dataIndex: 'work_type_name',
            title: '作业类型',
        },
        {
            dataIndex: 'work_mileage',
            title: '作业公里(km)',
            render: text => {
                return toFixd2(text);
            },
        },
        {
            dataIndex: 'work_times',
            title: '作业趟数(趟)',
            render: text => {
                return toFixd2(text);
            },
        },
        {
            dataIndex: 'rate',
            title: '完成率(%)',
            render: text => {
                return toFixd2(text);
            },
        },
    ];
    return (
        <VtxDatagrid
            dataSource={dataSource}
            columns={columns}
            pagination={false}
            toolbar={false}
            size="small"
        />
    );
};

// 单条规则
const Rule = ({ name, time, num }) => {
    return (
        <div className="work-rule">
            <div className="work-rule-name">
                <div className="dot" />
                {name}
            </div>
            <div className="work-rule-time">
                <img src={roadRuleTimeImg} />
                {time}
            </div>
            <div className="work-rule-num">
                <img src={roadRuleNumImg} />
                {num}趟
            </div>
        </div>
    );
};
Rule.propTypes = {
    name: PropTypes.string,
    time: PropTypes.string,
    num: PropTypes.string | PropTypes.number,
};
// 作业规则
const WorkRules = ({ data = [] }) => {
    return data?.length ? (
        data.map(item => {
            return (
                <Rule
                    key={item.work_type_name}
                    name={item.work_type_name}
                    time={`${item.work_start_time}~${item.work_end_time}`}
                    num={item.work_count}
                />
            );
        })
    ) : (
        <Empty description="暂无数据" />
    );
};

// 作业车辆
const WorkCars = ({ dataSource = [] }) => {
    const columns = [
        {
            dataIndex: 'car_code',
            title: '车牌号',
            width: 80,
        },
        {
            dataIndex: 'car_type_name',
            title: '车辆类型',
        },
        {
            dataIndex: '3',
            title: '作业时间',
            width: 150,
            render: (text, record) => {
                return record.work_start_time && record.work_end_time
                    ? `${moment(record.work_start_time).format('HH:mm:ss')}~${moment(
                          record.work_end_time,
                      ).format('HH:mm:ss')}`
                    : '';
            },
        },
        {
            dataIndex: 'work_mileage',
            title: '作业里程(km)',
            render: text => {
                return toFixd2(text);
            },
        },
        {
            dataIndex: 'work_times',
            title: '作业趟数(趟)',
            render: text => {
                return toFixd2(text);
            },
        },
    ];

    return (
        <VtxDatagrid
            dataSource={dataSource}
            columns={columns}
            pagination={false}
            toolbar={false}
            size="small"
        />
    );
};

const BaseContent = props => {
    const { id, date: defaultDate } = props;
    const { isDark } = useSettings();
    const [date, setDate] = useState(moment().format('YYYY-MM-DD'));
    const { info, workRule, workCar, roadSummary } = BaseData.useBaseInfo(id, date);
    useEffect(() => {
        defaultDate && setDate(defaultDate);
    }, [defaultDate]);
    return (
        <div className="road-base-content" style={{ width: '100%', height: '100%' }}>
            <div className="road-base-search">
                <VtxDatePicker
                    value={date}
                    onChange={(_, dateString) => {
                        setDate(dateString);
                    }}
                />
            </div>
            <div className="road-base-data">
                <div className="road-base-info">
                    <Title title="基本信息" />
                    <BaseInfo data={info} />
                </div>
                <div className="road-base-info">
                    <Title title="总览" />
                    <AllView dataSource={roadSummary} />
                </div>
                <div className="road-base-info">
                    <Title title="作业规则" />
                    <WorkRules data={workRule} />
                </div>
                <div className="road-base-info">
                    <Title title="作业车辆" />
                    <WorkCars dataSource={workCar} />
                </div>
            </div>
        </div>
    );
};

BaseContent.propTypes = {
    id: PropTypes.string,
    seed: PropTypes.string,
    date: PropTypes.string,
};
WorkCars.propTypes = {
    dataSource: PropTypes.array,
};
AllView.propTypes = {
    dataSource: PropTypes.array,
};
BaseInfo.propTypes = {
    data: PropTypes.array,
};
Title.propTypes = {
    title: PropTypes.string,
};
export default BaseContent;