/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 10:53:25
 */
import React, { useState, useEffect } from 'react';
import {
    Modal,
} from 'antd';
import { Line } from '@ant-design/charts';


import services from '@/services/admin';

const { reportkw } = services.DeviceLogsController;


export default ({ values, type, modalOpenState, onModalOpenState }) => {

    const [report, setReport] = useState(null);

    const deviceConfig = {
        data: report,
        xField: 'name',
        yField: 'value',
        seriesField: 'category',
        xAxis: {

        },
        yAxis: {
            label: {
                // 数值格式化为千分位
                formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            },
        },
    };

    useEffect(() => {
        reportkw({
            device_id: values?.device_id,
            order_id: type == 1 ? values?.id : ''
        }).then(({ data, success }) => {
            if (success) {
                setReport(data || []);
            }
        }).catch(() => {

        });
    }, [values]);

    return (
        <>
            <Modal width="800px" title="功率图" open={modalOpenState} onOk={() => {
                onModalOpenState(false);
            }} onCancel={() => {
                onModalOpenState(false)
            }}>
                <>
                    <Line {...deviceConfig} />
                </>
            </Modal>
        </>
    );
};