import React from 'react';
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
import {getRequest} from '../../../actions';

class ModbusCmdPage extends React.Component {

    state = {
        res: ''
    }

    handleSubmit = (data) => {
        let {i18n} = this.props;
        if(data.ip == '' || data.node == '' || data.func == '' || data.addr == '' || data.value == '') return this.props.showDialog(i18n&&i18n.t?i18n.t('tip.input_empty'):'');
        this.props.toggleLoading(1);
        this.setState({res:''})
        fetch('/api/modbus/modbuscmd', getRequest(data))
            .then(response=>response.json())
            .then(json=>{
                this.props.toggleLoading(0);
                if(json.status != 1) return this.props.showDialog(json.message);
                this.setState({
                    res: json.data.record[0].msg || ''
                })
            });
    }

    render() {
        return (
            <Container>
                <Segment>
                    <Form onSubmit={(e,d)=>{
                            e.preventDefault();
                            this.handleSubmit(d.formData);
                        }} serializer={e=>{
                            let json = {
                                ip: '',
                                node: '',
                                func: '',
                                addr: '',
                                value: ''
                            };

                            let ip = e.querySelector('input[name="ip"]');
                            if(ip && 'value' in ip) json.ip = ip.value;
                            let node = e.querySelector('input[name="node"]');
                            if(node && 'value' in node) json.node = node.value;
                            let func = e.querySelector('input[name="func"]');
                            if(func && 'value' in func) json.func = func.value;
                            let addr = e.querySelector('input[name="addr"]');
                            if(addr && 'value' in addr) json.addr = addr.value;
                            let val = e.querySelector('input[name="val"]');
                            if(val && 'value' in val) json.value = val.value;

                            return json;
                        }}>
                        <Form.Field>
                            <Input name="ip" label="請輸入IP" defaultValue="127.0.0.1" />
                        </Form.Field>
                        <Form.Field>
                            <Input name="node" label="請輸入節點" />
                        </Form.Field>
                        <Form.Field>
                            <Input name="func" label="請輸入FunctionCode" />
                        </Form.Field>
                        <Form.Field>
                            <Input name="addr" label="請輸入位址" />
                        </Form.Field>
                        <Form.Field>
                            <Input name="val" label="請輸入數值" />
                        </Form.Field>
                        <Button type="submit" content="送出" fluid />
                    </Form>
                </Segment>
                <Segment>
                    {
                        this.state.res.split(/\n/).map((t,idx) => (
                            <div key={idx}>{t}</div>
                        ))
                    }
                </Segment>
            </Container>
        )
    }
}

export default ModbusCmdPage;