/**
 * 监测信息-折线图
 */
import React from 'react';
import { useSetState } from 'ahooks';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import { VMRangePicker } from '../../../vm-filter';
import { SubTabsLine } from '../../../vm-sub-tabs';
import { MoniotrService } from '../../api';

interface TypeProps {
    id: string;
}

const MonitorInfo = (props: TypeProps) => {
    const { id } = props;
    const [state, setState] = useSetState({
        filterKey: 'PersonNum',
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
    });
    const { filterKey, startDate, endDate } = state;
    const { monitorType } = MoniotrService.useMonitorType(id);
    const { monitorChart } = MoniotrService.useMonitorChart(
        id,
        `${startDate} 00:00:00`,
        `${endDate} 23:59:59`,
        filterKey,
    );
    const { xAxis, legend, series } = monitorChart;
    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    const option = {
        color: ['#4DFFD9', '#4195FF', '#FF7979', '#FFE25D'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            show: true,
            itemWith: 6,
            itemHeight: 6,
            top: 20,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            data: legend || [],
        },
        grid: {
            top: 58,
            left: 24,
            bottom: 12,
            right: 24,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            data: xAxis || [],
        },
        yAxis: [
            {
                name: '单位（人次）',
                type: 'value',
                nameTextStyle: {
                    color: '#fff',
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
                axisLine: {
                    show: true,
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(151,151,151,0.28)',
                    },
                },
            },
        ],
        series: series || [],
    };
    return (
        <div className="wr-monitor-trend">
            <div className="wr-monitor-trend-head">
                <SubTabsLine
                    items={monitorType}
                    activeKey={filterKey}
                    onChange={key => {
                        setState({
                            filterKey: key,
                        });
                    }}
                />
                <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>
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '300px', width: '100%' }}
                />
            </div>
        </div>
    );
};

export default MonitorInfo;
