import React from 'react';
import { Button, Col, Icon, Row } from 'antd';
import styled from 'styled-components';
import ItemModal from './modal';

class GroupPicker extends React.PureComponent {
  componentWillReceiveProps = (nextProps) => {
    // console.log('1111111111111111111', this.state);
    // if (nextProps.text === undefined) {
    const value = nextProps.value;
    this.setState({
      id: value ? (value.id || null) : null,
      code: value ? (value.code || null) : null,
      text: value ? (value.name || null) : null,
    });
    // }
  };

  openModal = () => {
    this.setState({
      modalVisible: true,
    });
  };

  handleOk = (id, code, text) => {
    this.props.onChange({ id: id, code: code, name: text });
    this.setState({
      id,
      code,
      text,
      modalVisible: false,
    });
  };

  handleClose = () => {
    this.setState({
      modalVisible: false,
    });
  };


  clear = () => {
    this.props.onChange({ id: null, code: null, name: null });
    this._modal.clearSelection();
    this.setState({
      id: null,
      code: null,
      text: null,
    });
  };

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      cardModalVisible: false,
      id: props.value ? (props.value.id || null) : null,
      code: props.value ? (props.value.code || null) : null,
      text: props.value ? (props.value.name || null) : null,
    };
  }

  render() {
    const { modalVisible, id, code, text } = this.state;
    const { disabled, filter, value, apiName } = this.props;

    const modalProps = {
      value,
      onOk: this.handleOk,
      onCancel: this.handleClose,
      onClose: this.handleClose,
      visible: modalVisible,
      filter,
      apiName,
    };

    const suffix = text ? <Icon type="close-circle" onClick={this.clear} /> : null;

    const HoverText = styled.span`
      color: #cccccc;

      &:hover{
        cursor: pointer;
        text-decoration:underline;
      }
    `;

    return (
      <Row>
        <ItemModal {...modalProps} ref={(ref) => this._modal = ref} />
        {/*<span>{<HoverText style={{ color: '#63B8FF' }}>{text}</HoverText>} {!disabled && suffix} </span>*/}
        <Col span={20}>
          {!disabled ? text || <HoverText onClick={this.openModal}>{'选择小组'}</HoverText> : text} {!disabled && suffix}
        </Col>

        <Col span={4} style={{ textAlign: 'right' }}>
          {!disabled &&
          <Button size="small" shape="circle" icon="search" style={{ border: 'none' }} onClick={this.openModal} />}
        </Col>
        {/*<Input*/}
        {/*hidden={true}*/}
        {/*disabled={true}*/}
        {/*value={value}*/}
        {/*style={{ width: '100%' }}*/}
        {/*ref={node => this.mainInput = node}*/}
        {/*/>*/}
      </Row>
    );
  }
}

export default GroupPicker;
