import React, { useState } from 'react';
import { Button, Tag, message } from 'antd';
import { RedoOutlined } from '@ant-design/icons';
import { postTestDevice } from '@/services/alarm/Interfaces'
import moment from 'moment';
import { useIntl } from '@umijs/max';


interface ImageSinglePopoverProps {
    values: any;
    reload: any;
}

const CaptureButton: React.FC<ImageSinglePopoverProps> = (props) => {
    const intl = useIntl();
    const [loading, setLoading] = useState<boolean>(false);
    const connection = () => {
        setLoading(true);
        postTestDevice({
        device_ip: props.values.device_ip,
        id: props.values.id,
        })
        .then((res) => {
            if(res.success) {
                message.success(res.msg);
            }
            props.reload();
            setLoading(false);
        })
        .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
            setLoading(false);
        });
    };


    return (
        <div>
            <Tag bordered={false} color={props.values.test_result === 1? "success": ""} style={{
                // fontSize:14,
                color: props.values.test_result === 1? '#52C41A': "#999"
            }}>
                {props.values.test_result === 1 ? '在线' : '离线'}
            </Tag>
            <span>{moment(props.values.test_time).format('YYYY-MM-DD hh:mm:ss')}</span>
            <Button 
                type="link" 
                icon={<RedoOutlined />} 
                loading={loading}
                onClick={() => {
                connection()
                }}
            />
        </div>
    );
};

export default CaptureButton;