import React, { Component } from 'react';

import './index.css';

class App extends Component {

  state = {
    isCarChecked: false,
    isRoomChecked: false,
    isCommercialRefChecked: false,
    isFoamChecked: false,
    isHfcChecked: false,
  };

  handleCarCheckboxChange = () => {
    this.setState(prevState => ({
      isCarChecked: !prevState.isCarChecked
    }));
  };

  handleRoomCheckboxChange = () => {
    this.setState(prevState => ({
      isRoomChecked: !prevState.isRoomChecked,
    }));
  };

  handleCommercialRefCheckboxchange = () => {
    this.setState(prevState => ({
      isCommercialRefChecked: !prevState.isCommercialRefChecked,
    }));
  };

  handleFoamCheckboxchange = () => {
    this.setState(prevState => ({
      isFoamChecked: !prevState.isFoamChecked,
    }));
  };

  handleHfcCheckboxchange = () => {
    this.setState(prevState => ({
      isHfcChecked: !prevState.isHfcChecked,
    }));
  };
  render() {
    const { isCarChecked, isRoomChecked, isCommercialRefChecked, isFoamChecked, isHfcChecked } = this.state;

    return (
        <Form.Item
          name={['hangye_id']}
          label={
            <span>
             请选择行业
              <Tooltip title="...">
                <QuestionCircleOutlined />
              </Tooltip>
            </span>
          }
          rules={[
            {
              required: false,
              message: '请选择行业',
            },
          ]}
        >
          <input
            type="checkbox"
            checked={isCarChecked}
            onChange={this.handleCarCheckboxChange}
          />
          &nbsp;<label>汽车空调</label>&nbsp;
         <input
            type="checkbox"
            checked={isRoomChecked}
            onChange={this.handleRoomCheckboxChange}
          />
          &nbsp;<label>房间空调</label>&nbsp;
         <input
            type="checkbox"
            checked={isCommercialRefChecked}
            onChange={this.handleCommercialRefCheckboxchange}
          />
          &nbsp;<label>工商制冷</label>&nbsp;
         <input
            type="checkbox"
            checked={isFoamChecked}
            onChange={this.handleFoamCheckboxchange}
          />
          &nbsp;<label>泡沫</label>&nbsp;
         <input
            type="checkbox"
            checked={isHfcChecked}
            onChange={this.handleHfcCheckboxchange}
          />
          &nbsp;<label>消防</label>&nbsp;<br/>
          {isCarChecked && (
            <>
              <label>请选择算法：</label>
              <select className="select">
                <option>汽车空调（基于保有量）</option>
                <option>汽车空调（基于消费量）</option>
              </select><br/>
            </>
          )}
          {isRoomChecked && (
            <>
              <label>请选择算法：</label>
              <select className="select">
                <option>房间空调（基于保有量）</option>
                <option>房间空调（基于消费量）</option>
              </select><br/>
            </>
          )}
          {isCommercialRefChecked && (
            <>
              <label>请选择算法：</label>
              <select className="select">
                <option>工商制冷（基于单因素分配法）</option>
                <option>工商制冷（基于消费量）</option>
              </select><br/>
            </>
          )}
          {isFoamChecked && (
            <>
              <label>请选择算法：</label>
              <select className="select">
                <option>泡沫（基于单因素分配法）</option>
                <option>泡沫（基于消费量）</option>
              </select><br/>
            </>
          )}
          {isHfcChecked && (
            <>
              <label>请选择算法：</label>
              <select className="select">
                <option>消防（基于单因素分配法）</option>
                <option>消防（基于消费量）</option>
              </select>
            </>
          )}
        </Form.Item>

    );
  }
}

export default App;

.select {
  font-size: 14px;
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  margin-top: 10px;
}