import React from 'react';
import { Modal, Input, Row, Col, message } from 'antd';
import styles from './index.css'
const { TextArea } = Input;

class ThresholdSettingModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            high: 20,
            low: 10,
            id: ""
        };
    };

    componentDidMount() {
        if (this.props.onRef) {
            this.props.onRef(this)
        }
    };

    showModal = () => {
        this.getThresholdValue()
        this.setState({
            visible: true,
        });
    }

    handleOk = e => {
        this.SettingSave();
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    getThresholdValue = () => {
        const json = {
            OrgId: this.props.login.OrgId,
            Parameter1: this.props.way,
        };
        this.props.dispatch({
            type: 'app/getDataByPost',
            url: 'ED/EDThresholdSet/GetThresholdValue',
            payload: json,
            onlyData: false,
            onComplete: (res) => {
                if (res && res.IsSuccessful && res.Data) {
                    const currState = {
                        high: res.Data.THRESHOLD_HIGH,
                        low: res.Data.THRESHOLD_LOW,
                        id: res.Data.ID,
                    }
                    this.setState(currState)
                }
            }
        })
    };

    SettingSave = () => {
        const json = {
            ORG_ID: this.props.login.OrgId,
            THRESHOLD_WAY: this.props.way,
            THRESHOLD_HIGH: this.state.high,
            THRESHOLD_LOW: this.state.low,
            ID: this.state.id
        };
        this.props.dispatch({
            type: 'app/getDataByPost',
            url: 'ED/EDThresholdSet/SettingSave',
            payload: json,
            onlyData: false,
            onComplete: (re) => {
                if (re.IsSuccessful && re.Data) {
                    if (re.Data.IsSucceed) {
                        message.success(re.Data.Msg);
                        this.setState({
                            visible: false,
                        });
                    }
                    else
                        message.error(re.Data.Msg);
                }
            }
        })
    };

    onChangeHigh = (e) => {
        this.setState({ high:e.target.value });
    };
    onChangeLow = (e) => {
        this.setState({ low:e.target.value });
    };

    render() {
        return (
            <Modal title="阀值配置" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
                <div>
                    <div style={{ marginBottom: 16 }}>
                        <Row gutter={24}>
                            <Col span={7} key={"ThresholdSettingModal_01"}>
                                <b className={styles.leftTag}>当阀值高于</b>
                            </Col>
                            <Col span={6} key={"ThresholdSettingModal_02"}>
                                <Input addonAfter="%" value={this.state.high} onChange={this.onChangeHigh} />
                            </Col>
                            <Col span={11} key={"ThresholdSettingModal_03"}>
                                <b className={styles.rightTag}>用红色显示预计数据</b>
                            </Col>
                        </Row>
                    </div>
                    <div style={{ marginBottom: 16 }}>
                        <Row gutter={24}>
                            <Col span={7} key={"ThresholdSettingModal_04"}>
                                <b className={styles.leftTag}>当阀值低于</b>
                            </Col>
                            <Col span={6} key={"ThresholdSettingModal_05"}>
                                <Input addonAfter="%" value={this.state.low} onChange={this.onChangeLow}/>
                            </Col>
                            <Col span={11} key={"ThresholdSettingModal_06"}>
                                <b className={styles.rightTag}>用绿色显示预计数据</b>
                            </Col>
                        </Row>
                    </div>
                    <TextArea rows={4} disabled={true} value={'阀值 =（智能预计能耗-定额预计能耗）/ 定额预计能耗 X 100%'} />
                </div>
            </Modal>
        )
    }
}
export default ThresholdSettingModal