import React, { Component } from "react";
import Drawer from '../../themeComponents/Drawer';
import { inject, observer } from "mobx-react";
import SelectDevices from '../SelectDevices'
import { treeHelper, isEqual } from '@zenview/micro-utils';

import "./index.less";

@inject("org", "place")
@observer
class ListSelectDevices extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectDevices: props.selectDevices || []
    };
  }

  UNSAFE_componentWillReceiveProps(props) {
    if (isEqual(props.selectDevices, this.props.selectDevices)) {
      this.setState({
        selectDevices: props.selectDevices || []
      });
    }
  }

  onChange = selectDevices => {
    this.setState({ selectDevices }); // 修改当前组件的数据
  };

  onSubmit = () => {
    const { onChange, onClose } = this.props;
    onChange && onChange(this.state.selectDevices); // 改变数据
    onClose && onClose();
  };
  render() {
    const { onClose, orgTreeData, placeTreeData, deviceList, onChange, org, place, selectDevices, ...props } = this.props;
    return (
      <Drawer {...props} onClose={onClose} onOk={this.onSubmit}>
        <SelectDevices
          selectDevices={this.state.selectDevices}
          deviceList={deviceList}
          placeTreeData={placeTreeData || treeHelper.computPlaceTree(place.placeListWithCameraCount)}
          orgTreeData={orgTreeData || treeHelper.computTreeList(org.orgListWithCameraCount)}
          onChange={this.onChange}
        />
      </Drawer>
    );
  }
}

export default ListSelectDevices;
