import React from 'react';
import { Button } from 'antd';
import PandaMqttView from '../index';

class MqttDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: true,
    };
    this.mqttView = new PandaMqttView({
      mqttIP: 'emqttd10.panda-water.cn:443',
      mqttPath: '/mqtt',
      mqttSsl: true,
      siteCode: 'site_shsys656',
      devices: ['QSJZ00000001', 'SHBF00000001', 'SHJZ00000001'],
      callback: () => {
        this.setState({ flag: false });
      },
      controlback: () => {},
    });
  }
  saveMqtt() {
    this.mqttView.saveWaterMqtt();
  }
  destroyMqtt() {
    this.mqttView.disSaveWaconnect();
    this.setState({ flag: true });
  }
  render() {
    return (
      <>
        <Button
          type="primary"
          key={'Button1'}
          disabled={!this.state.flag}
          onClick={this.saveMqtt.bind(this)}
        >
          Mqtt连接
        </Button>
        <Button
          type="primary"
          key={'Button2'}
          disabled={this.state.flag}
          onClick={this.destroyMqtt.bind(this)}
          style={{ marginLeft: '10px' }}
        >
          Mqtt销毁
        </Button>
      </>
    );
  }
}
export default MqttDemo;
