import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { addStyle } from 'dt2react';
import Icon from 'amos-icon';
import DevicePropertyPanel from './DevicePropertyPanel';
import DeviceCapacityPanel from './DeviceCapacityPanel';
import CapacityInterfacePanel from './CapacityInterfacePanel';

/**
 * 配置界面
 *
 * @class ConfigPanel
 * @extends {Component}
 */
class ConfigPanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      capacityBasicInfo: {},
      interfaceBasicInfo: {},
      expandStyle: 'empty-property-root'
    };
  }

  componentDidMount() {}

  componentWillReceiveProps(nextProps) {
    // this.showDeviceCapacityPanel();
    // this.showCapacityInterfacePanel();
  }

  // 关闭设备能力面板
  closeDeviceCapacityPanel = () => {
    addStyle(this.deviceCapacityPanel, 'display', 'none');
    addStyle(this.capacityInterfacePanel, 'display', 'none');
  };

  // 关闭设备接口面板
  closeCapacityInterfacePanel = () => {
    addStyle(this.capacityInterfacePanel, 'display', 'none');
  };

  // 显示设备能力面板
  showDeviceCapacityPanel = (item, getCurrentEquipment) => {
    addStyle(this.deviceCapacityPanel, 'display', 'inline');
    if (item !== undefined) {
      this.setState({ capacityBasicInfo: item, getCurrentEquipment });
    }
  };

  // 显示设备接口面板
  showCapacityInterfacePanel = (item, getCurrentEquipment) => {
    addStyle(this.capacityInterfacePanel, 'display', 'inline');
    if (item !== undefined) {
      this.setState({ interfaceBasicInfo: item, getCurrentEquipment });
    }
  };

  clickPanel = () => {
    let { expandStyle } = this.state;
    if (expandStyle === 'empty-property-root-hide') {
      expandStyle = 'empty-property-root';
    } else {
      expandStyle = 'empty-property-root-hide';
    }
    this.setState({ expandStyle });
  };

  render() {
    let { capacityBasicInfo, interfaceBasicInfo, getCurrentEquipment, expandStyle } = this.state;
    return (
      <div className={expandStyle}>
        <div className="empty-property-btn" onClick={this.clickPanel}>
          <Icon icon={expandStyle === 'empty-property-root-hide' ? 'left' : 'right'} />
        </div>
        <div className="empty-property-panel">
          <div className="config-panel">
            <div className="capacity-interface-panel" ref={node => (this.capacityInterfacePanel = node)}>
              <CapacityInterfacePanel
                closeCapacityInterfacePanel={this.closeCapacityInterfacePanel}
                interfaceBasicInfo={interfaceBasicInfo}
                getCurrentEquipment={getCurrentEquipment}
                capacityBasicInfo={capacityBasicInfo}
                {...this.props}
              />
            </div>
            <div className="device-capacity-panel" ref={node => (this.deviceCapacityPanel = node)}>
              <DeviceCapacityPanel
                capacityBasicInfo={capacityBasicInfo}
                closeDeviceCapacityPanel={this.closeDeviceCapacityPanel}
                showCapacityInterfacePanel={this.showCapacityInterfacePanel}
                getCurrentEquipment={getCurrentEquipment}
                {...this.props}
              />
            </div>
            <DevicePropertyPanel showDeviceCapacityPanel={this.showDeviceCapacityPanel} {...this.props} />
          </div>
        </div>
      </div>
    );
  }
}

ConfigPanel.propTypes = {
  config: PropTypes.object,
  getSubgraphData: PropTypes,
  subviewId: PropTypes.string,
  nodeId: PropTypes.string,
  equipmentId: PropTypes.number,
  updateNodeConfig: PropTypes.func,
  cfgParamJson: PropTypes.object,
  updateNodeName: PropTypes.func,
  deviceLabel: PropTypes.string
};

export default ConfigPanel;
