import React from 'react';
import { inject, observer } from 'mobx-react';
import PlaceTree from '../PlaceTree';
import { Row, Col } from 'antd';
import IconFont from '../../themeComponents/IconFont';
import HightLevel from '../../components/HightLevel';
import SearchInput from '../../components/SearchInput';
import { thousand } from '@zenview/micro-utils';
import './index.less';

@inject('place')
@observer
class PlaceTreeWithPlaceFile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: null
    };
  }

  onChange = value => {
    this.setState({ keyword: value });
  };

  renderPrefix = node => {
    return (
      <React.Fragment>
        {node.level * 1 >= 5 ? (
          <span className="tree-node-prefix">
            <IconFont type={'icon-L_Place_Place'} />{' '}
          </span>
        ) : null}
      </React.Fragment>
    );
  };

  /**
   * 场所树-自定义title
   */
  renderHeader = () => {
    const { renderHeader } = this.props;
    return (
      <React.Fragment>
        <div className="lm-c-tree-title-serach">
          <SearchInput className="input-keword" placeholder={'请输入场所名称进行查找'} onChange={this.onChange} />
        </div>
        <Row
          className="place-file-tree-title"
          // type="flex" justify={"center"} align={"middle"} gutter={20}
        >
          {/* <Col className="place-info-item">场所列表</Col> */}
          <Col span={8} className="place-info-item">
            <IconFont type={'icon-S_Point_Camera'} /> 设备数量
          </Col>
          <Col span={8} className="place-info-item">
            <IconFont type={'icon-S_Edit_User'} /> 人员数量
          </Col>
          <Col span={8} className="place-info-item">
            <IconFont type={'icon-S_Place_Place'} /> 场所数量
          </Col>
          {renderHeader && renderHeader()}
        </Row>
      </React.Fragment>
    );
  };

  RenderTreeTitle = ({ node, nameKey, keyword }) => {
    return (
      <React.Fragment>
        <div className="place-tree-title" title={node[nameKey]}>
          <HightLevel keyword={keyword} name={node[nameKey]} />
        </div>
        <Row className="place-tree-title-info">
          <Col className="place-info-item">
            <IconFont type={'icon-S_Point_Camera'} /> {node.deviceCount ? thousand(node.deviceCount.count) : 0}
          </Col>
          <Col className="place-info-item">
            <IconFont type={'icon-S_Edit_User'} /> {node.personCount ? thousand(node.personCount) : 0}
          </Col>
          <Col className="place-info-item">
            <IconFont type={'icon-S_Place_Place'} /> {node.childrenPlaceCount ? thousand(node.childrenPlaceCount) : 0}
          </Col>
        </Row>
      </React.Fragment>
    );
  };

  render() {
    const { className, expandedKeys = null, ...props } = this.props;
    const { keyword } = this.state;
    return (
      <PlaceTree
        keyword={keyword}
        className={`${className} lm-c-place-file-tree`}
        title={false}
        inputPlaceholder={'请输入场所名称进行查找'}
        disableCheckbox={false}
        showIcon={true}
        expandedKeys={expandedKeys}
        renderHeader={this.renderHeader}
        RenderTreeTitle={this.RenderTreeTitle}
        {...props}
      ></PlaceTree>
    );
  }
}

export default PlaceTreeWithPlaceFile;
