import React, { useState } from 'react';
import moment from 'moment';
import * as echarts from 'echarts';
import { VtxDatePicker, VtxSelect } from '@vtx/components';
import VMChart from '../vm-chart';
import useSettings from '../vm-hooks/useSettings';
import PropTypes from 'prop-types';
import { BaseData, toFixd2 } from './api';
import './style';

import roadPlanMileImg from '../../image/road-plan-mile.png';
import roadWorkMileImg from '../../image/road-work-mile.png';

const { VtxRangePicker } = VtxDatePicker;
const { Option } = VtxSelect;

const Title = ({ title }) => {
    return <div className="road-title">{title}</div>;
};

// 作业汇总统计
const NumItem = ({ label, num, imgSrc }) => {
    return (
        <div className="statistics-item">
            <div>
                <img src={imgSrc} />
            </div>
            <div>
                <div style={{ color: 'rgba(0,0,0,0.85)' }}>{label}</div>
                <div>
                    <span>{toFixd2(num)}</span>
                    <span style={{ color: 'rgba(0,0,0,0.85)' }}>公里</span>
                </div>
            </div>
        </div>
    );
};

const WorkSummaryStatistics = ({ data = {} }) => {
    return (
        <div className="statistics-info">
            <div className="statistics-row">
                <NumItem label="计划作业里程" num={data.plan_mileage} imgSrc={roadPlanMileImg} />
                <NumItem label="实际作业里程" num={data.work_mileage} imgSrc={roadWorkMileImg} />
            </div>
            <div style={{ marginTop: 32 }}>
                <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                    <span>整体完成率</span>
                    <span>{data.rate}%</span>
                </div>
                <div className="progress">
                    <div className="active_progress" style={{ width: `${data.rate}%` }} />
                </div>
            </div>
        </div>
    );
};

// 作业汇总
const WorkSummary = ({ data = [] }) => {
    return (
        <div className="statistics-work-summary">
            <div>
                <span style={{ fontSize: 20 }}>{data.a}</span>
                <span style={{ fontSize: 12 }}>天</span>
                <span style={{ marginLeft: 16 }}>{'完成率<50%'}</span>
            </div>
            <div>
                <span style={{ fontSize: 20 }}>{data.b}</span>
                <span style={{ fontSize: 12 }}>天</span>
                <span style={{ marginLeft: 16 }}>{'50%<=完成率<80%'}</span>
            </div>
            <div>
                <span style={{ fontSize: 20 }}>{data.c}</span>
                <span style={{ fontSize: 12 }}>天</span>
                <span style={{ marginLeft: 16 }}>{'80<=完成率<100%'}</span>
            </div>
            <div>
                <span style={{ fontSize: 20 }}>{data.d}</span>
                <span style={{ fontSize: 12 }}>天</span>
                <span style={{ marginLeft: 16 }}>{'完成率=100%'}</span>
            </div>
        </div>
    );
};

const defaultRange = [
    moment()
        .subtract(7, 'd')
        .format('YYYY-MM-DD'),
    moment().format('YYYY-MM-DD'),
];
const Statistics = props => {
    const { id } = props;
    const { isDark } = useSettings();
    const [range, setRange] = useState(defaultRange);
    const [workType, setWorkType] = useState('全部');
    const {
        workTotal,
        workTypeData,
        workSummary,
        workMile,
        workCompleteRate,
    } = BaseData.useStatistics(id, range[0], range[1], workType);

    // 作业里程分析
    const mileOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        color: ['#04A9F5', '#1DE9B6'],
        xAxis: {
            type: 'category',
            data: workMile.xAxis,
        },
        yAxis: {
            name: '公里',
            type: 'value',
        },
        series: [
            {
                name: '计划里程',
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#16B2FB',
                        },
                        {
                            offset: 1,
                            color: '#8BB9FF',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: workMile.planMiles,
            },
            {
                name: '作业里程',
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#42FFD0',
                        },
                        {
                            offset: 1,
                            color: '#CFEECF',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: workMile.workMiles,
            },
        ],
    };
    // 作业完成率
    const rateOption = {
        tooltip: {
            type: 'axis',
        },
        xAxis: {
            type: 'category',
            data: workCompleteRate.xAxis,
        },
        yAxis: {
            name: '%',
            type: 'value',
        },
        series: [
            {
                data: workCompleteRate.rates,
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: '#0091FF',
                    },
                },
            },
        ],
    };
    return (
        <div className="road-statistics-content" style={{ width: '100%', height: '100%' }}>
            <div className="road-statistics-search">
                <VtxSelect
                    value={workType}
                    onChange={value => setWorkType(value)}
                    style={{ width: 200, marginRight: 16 }}
                >
                    {workTypeData.map(item => (
                        <Option key={item.parmName}>{item.parmName}</Option>
                    ))}
                </VtxSelect>
                <VtxRangePicker
                    value={range}
                    onChange={(_, dateString) => {
                        setRange(dateString);
                    }}
                ></VtxRangePicker>
            </div>
            <div className="road-statistics-data">
                <div className="road-statistics-info">
                    <Title title="作业汇总统计" />
                    <WorkSummaryStatistics data={workTotal} />
                </div>
                <div className="road-statistics-info">
                    <Title title="作业汇总" />
                    <WorkSummary data={workSummary} />
                </div>
                <div className="road-statistics-info">
                    <Title title="作业里程分析" />
                    <VMChart option={mileOption} height="100%" width="100%" />
                </div>
                <div className="road-statistics-info">
                    <Title title="作业完成率" />
                    <VMChart option={rateOption} height="100%" width="100%" />
                </div>
            </div>
        </div>
    );
};

Statistics.propTypes = {
    id: PropTypes.string,
    seed: PropTypes.string,
};
WorkSummaryStatistics.propTypes = {
    data: PropTypes.object,
};

export default Statistics;