import React, { Component } from "react";
// import cx from "classnames";
import style from "./../index.less";
import selectSex from '../../../common/images/selectSex.png'
import { CLEARMENSTRUATIONTEXTDATA, } from '@store/types/menstruationHistory';
import store from '@store';
import { embedPush } from '../../../store/async-actions/pushMessage'
export default class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      value: "",
      options: [
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 1,
          title: '性别',
          maxlength: 11
        },
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 2,
          title: '性别',
          maxlength: 11
        },
      ],
      isEnter: false
    };
    this.toggleContainer = React.createRef();
    this.onClickHandler = this.onClickHandler.bind(this)
    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this)
    this.onChange = this.onChange.bind(this)
    this.handleMouseEnter = this.handleMouseEnter.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
  }
  componentDidMount() {
    window.addEventListener("click", this.onClickOutsideHandler);
    this.setState({
      value: this.props.default,
    });
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.onClickOutsideHandler);
  }

  componentWillReceiveProps(nextProps) {
    // console.log(nextProps, '================nextProps');
    if (nextProps.default.value !== this.state.value.value) {
      this.setState({
        value: nextProps.default
      })
    }
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  };

  onClickOutsideHandler(event) {
    if (
      this.state.isOpen &&
      !this.toggleContainer.current.contains(event.target)
    ) {
      this.setState({ isOpen: false });
    }
  };

  onChange(e, val) {
    const sex = e.target.innerHTML
    let obj = {
      label: 'patientSex',
      id: 'patientSex',
      value: sex=='男'?1:2,
      title: '性别',
      maxlength: 11
    }
    e.stopPropagation()
    this.setState({
      value: obj,
      isOpen: false
    });
    this.props.onChange(obj);
    store.dispatch({
      type: CLEARMENSTRUATIONTEXTDATA,
    });

    store.dispatch(embedPush({
      action: "info",
      mode: 1
    }))
  };
  handleMouseEnter() {
    // console.log('鼠标进入');
    this.setState({
      isEnter: true
    })
  }
  handleMouseLeave() {
    // console.log('鼠标进入');
    this.setState({
      isEnter: false
    })
  }
  render() {
    const { isOpen, value, options } = this.state;
    const { label, placeholder } = this.props;
    // console.log(options, '===============options');
    return (
      <div className={style.selectBox}>
        {label && <label className={style.label}>{label}:</label>}

        <div className={style.select} ref={this.toggleContainer}>
          <input
            className={[style.selfInput, isOpen ? style.selfInput : ''].join('')}
            readonly=""
            value={value.value == 2 ? '女' : '男'}
            onClick={this.onClickHandler}
            placeholder={placeholder}
          />
          <div className={this.state.isEnter ? style.downActive : style.down} onClick={this.onClickHandler} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
            <img src={selectSex} alt="" />
          </div>
          <div className={[isOpen ? '' : style.optionsHidden, isOpen ? style.options : ''].join('')}>
            {/* {options &&
              options.map((item) => {
                return (
                  <div
                    key={item.id}
                    className={style.item}
                    onClick={(e)=>this.onChange( e, item)}
                  >
                    {+item.value == 2 ? '女' : '男'}
                  </div>
                );
              })} */}
            <div className={style.item} onClick={(e) => this.onChange(e, options[0])}>男</div>
            <div className={style.item} onClick={(e) => this.onChange(e, options[1])}>女</div>
          </div>
        </div>
      </div>
    );
  }
}