import React, { PureComponent } from 'react';
import DocLists from '../doc/doc_lists'
import { Icon,Tooltip } from 'antd';
import docCss from '../doc/doc.less';


export default class Custom extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        show:false
    };
  }

  showInfo = () => {
    let { show } = this.state;
    let toggleShow = !show
    this.setState({show:toggleShow})

  }

  render() {
    const { show } = this.state;

    return (
      <div className={docCss.docFixed}>
        <div className={docCss.fixbtb} onClick={this.showInfo} >
          <Tooltip placement="left" title="帮助文档">
            {show  &&
            <div className={"wrapIcon"}>  <Icon type="cross" /><span>帮助</span></div>
            }
            {!show  &&
            <div className={`wrapIcon`}>  <Icon type="file-text" /><span>帮助</span></div>
            }

          </Tooltip>
        </div>

        <div className={`wrap ${this.state.show ? 'show' : ''}`} >
          <DocLists />
        </div>

      </div>
    );
  }
}
