/**
 * 路段-统计信息
 */
import React from 'react';
import { useSetState } from 'ahooks';
import { Progress } from 'antd';
import moment from 'moment';
import { VMRangePicker } from '../../../vm-filter';
import SubTitle from '../../../vm-sub-title';
import Zylc from './Zylc';
import Zywcl from './Zywcl';
import { StaticService } from '../../api';

import './index.less';

import plan from '../../imgs/plan.png';
import actual from '../../imgs/actual.png';

interface StatisticalProps {
    id: string;
}

function Statistical(props: StatisticalProps) {
    const { id } = props;
    const [state, setState] = useSetState({
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
    });
    const { startDate, endDate } = state;

    const { summaryInfo, completionRate, mileAnalysis } = StaticService.useSummaryInfo(
        id,
        startDate,
        endDate,
    );

    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    const overRate = summaryInfo?.planMileage
        ? ((summaryInfo.validMileage / summaryInfo?.planMileage) * 100).toFixed(2)
        : 0;

    return (
        <div className="road-statistic">
            <div className="road-statistic-summary">
                <div className="road-statistic-summary-title">
                    <SubTitle title="作业汇总统计" />
                    <div>
                        <VMRangePicker
                            value={[moment(startDate), moment(endDate)]}
                            onChange={(dates: any) =>
                                dates &&
                                handleDateChange(
                                    moment(dates[0]).format('YYYY-MM-DD'),
                                    moment(dates[1]).format('YYYY-MM-DD'),
                                )
                            }
                        />
                    </div>
                </div>
                <div className="road-statistic-summary-main">
                    <div className="road-statistic-summary-main-item">
                        <img src={plan} />
                        <div>
                            <div className="road-statistic-summary-main-item--name">
                                计划作业里程
                            </div>
                            <div className="road-statistic-summary-main-item--value">
                                <span>{summaryInfo?.planMileage || 0}</span>公里
                            </div>
                        </div>
                    </div>
                    <div className="road-statistic-summary-main-item">
                        <img src={actual} />
                        <div>
                            <div className="road-statistic-summary-main-item--name">
                                实际作业里程
                            </div>
                            <div className="road-statistic-summary-main-item--value">
                                <span>{summaryInfo?.validMileage || 0}</span>公里
                            </div>
                        </div>
                    </div>
                    <div className="road-statistic-summary-main-progress">
                        <Progress
                            type="circle"
                            percent={Number(overRate) || 0}
                            strokeWidth={10}
                            strokeColor="#4AFFE6"
                            trailColor="rgba(255,255,255,0.2)"
                            strokeLinecap="butt"
                            showInfo={false}
                        />
                        <div>
                            <div className="road-statistic-summary-main-progress--name">
                                整体完成率
                            </div>
                            <div className="road-statistic-summary-main-progress--value">
                                <span>{overRate}</span>%
                            </div>
                        </div>
                    </div>
                    <div className="road-statistic-summary-main-rate">
                        <div className="road-statistic-summary-main-rate--item">
                            <div
                                className="road-statistic-summary-main-rate--block"
                                style={{ background: '#FFD736' }}
                            ></div>
                            {'<50%'}
                            <div className="road-statistic-summary-main-rate--value">
                                <span>{completionRate?.dayNum1 || 0}</span>天
                            </div>
                        </div>
                        <div className="road-statistic-summary-main-rate--item">
                            <div
                                className="road-statistic-summary-main-rate--block"
                                style={{ background: '#3CA5FE' }}
                            ></div>
                            {'50%≤完成率<80%'}
                            <div className="road-statistic-summary-main-rate--value">
                                <span>{completionRate?.dayNum2 || 0}</span>天
                            </div>
                        </div>
                        <div className="road-statistic-summary-main-rate--item">
                            <div
                                className="road-statistic-summary-main-rate--block"
                                style={{ background: '#4AEDEB' }}
                            ></div>
                            {'80%≤完成率<100%'}
                            <div className="road-statistic-summary-main-rate--value">
                                <span>{completionRate?.dayNum3 || 0}</span>天
                            </div>
                        </div>
                        <div className="road-statistic-summary-main-rate--item">
                            <div
                                className="road-statistic-summary-main-rate--block"
                                style={{ background: '#4AED88' }}
                            ></div>
                            {'=100%'}

                            <div className="road-statistic-summary-main-rate--value">
                                <span>{completionRate?.dayNum4 || 0}</span>天
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="road-statistic-charts">
                <Zylc data={mileAnalysis} />
                <Zywcl data={mileAnalysis} />
            </div>
        </div>
    );
}

export default Statistical;
