/**
 * 公厕-报警信息-报警信息汇总
 */
import React from 'react';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../../../vm-sub-title';
import { AlarmService } from '../../api';

const MonthTrend = ({ id }: { id: string }) => {
    const { alarmMonthTrend } = AlarmService.useAlarmMonthTrend(
        id,
        moment()
            .subtract(6, 'M')
            .format('YYYY-MM-DD'),
        moment().format('YYYY-MM-DD'),
    );
    const { legends, names, values } = alarmMonthTrend;

    const option = {
        color: ['#4195FF', '#FFE25D'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            show: true,
            itemWith: 6,
            itemHeight: 6,
            top: 20,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            data: legends || [],
        },
        grid: {
            top: 58,
            left: 24,
            bottom: 12,
            right: 24,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            data: names || [],
        },
        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: [
            {
                name: '次数',
                type: 'line',
                data: values || [],
            },
        ],
    };
    return (
        <div className="alarm-trend">
            <SubTitle title="月度趋势分析" />
            <ReactEcharts
                option={option}
                notMerge
                lazyUpdate
                style={{ height: '300px', width: '100%' }}
            />
        </div>
    );
};

export default MonthTrend;
