import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SidePane } from 'amos-framework';
import { Store } from 'amos-tool';
import BizControlPane from './BizControlPane';
// import InnateControlPane from './InnateControlPane';
// import { viewController, bizControls } from '../conf';

const loginUserName = Store.lsTool.read('userName');
const filterUser = ['tianbo', 'opera1', 'opera2'];

const dataPanes = [
  { key: 'dangerMsg', icon: 'dangerMsg', type: 'back', singleClick: true, label: '告警' },
  { key: 'patrolMsg', icon: 'patrolMsg', type: 'fitview', singleClick: true, label: '巡检' },
  { key: 'applyMsg', icon: 'applyMsg', type: 'fitview', singleClick: true, label: '支付' }
];

/**
 * 侧边控制区
 *
 * @class SideControl
 * @extends {Component}
 */
class IndexSidePane extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeControl: []
    };
  }

  componentWillReceiveProps(nextProps) {
    // console.log(nextProps);
    this.setState({
      activeControl: nextProps.nowKey
    });

  }

  /**
   * control 点击，第二次点击则取消
   */
  onBizItemClick = (item, e) => {
    // debugger;
    const alreadyActive = this.isActive(item.key);
    const newKeys = this.getActiveControl(item.key, alreadyActive);
    this.props.chartsView(newKeys);
    this.setState({
      activeControl: newKeys
    });
    this.props.onItemClick && this.props.onItemClick(item, alreadyActive);
  };

  /**
   * control 选中
   *
   * @memberof SideControl
   */
  getActiveControl = (key, alreadyActive) => {
    const { multiple } = this.props;
    const { activeControl } = this.state;
    let newKeys = [];
    if (multiple) {
      newKeys = alreadyActive ? activeControl.filter(ac => ac !== key) : [...activeControl, key];
    } else {
      newKeys = alreadyActive ? [] : [key];
    }
    return newKeys;
  };

  /**
   * 是否选中
   *
   * @memberof SideControl
   */
  isActive = key => {
    const { activeControl } = this.state;
    return activeControl && activeControl.includes(key);
  };

  render() {
    const { animationProps } = this.props;
    let _bizControls = dataPanes;
    if (filterUser.includes(loginUserName)) {
      let target = _bizControls.find(item => item.key === 'fireResource-point');
      let subControls = target.subs;
      subControls = subControls.filter(item => item.key !== 'fireDetection');
      _bizControls.map(item => {
        if (item.key === 'fireResource-point') {
          item.subs = subControls;
        }
      });
    }
    return (
      <div className='rightPanelBox'>
        <SidePane className="side-control-pane indexRightPanel" {...animationProps}>
          <BizControlPane controls={_bizControls} isActive={this.isActive} onItemClick={this.onBizItemClick} dotTipNum={this.props.dotTipNum} />
          {/**<InnateControlPane controls={viewController} layerConfig={layerConfig} />*/}
        </SidePane>
      </div>

    );
  }
}

IndexSidePane.propTypes = {
  layerConfig: PropTypes.object,
  multiple: PropTypes.bool,
  onItemClick: PropTypes.func,
  write: PropTypes.func,
  toStr: PropTypes.func,
  animationProps: PropTypes.object
};

export default IndexSidePane;
