import React, { Fragment } from 'react';
import { Input, Select } from 'antd';
const { Option } = Select;

export default class TableSelectClick extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      edit: false    //默认值，编辑
    };
  }

  //下拉框变化
  handleChange = (v) => {
    // console.log(event,"这个是输入框，回车/失焦事件") 
    const { rowID, relationTypeChange } = this.props;
    relationTypeChange(rowID, v);  //行的id,事件的值
    this.setState({
      edit: false,
      eventTxtValue: v

    });
  }
  //  改变输入框的状态，显/隐藏
  onSpanClick = () => {
    this.setState({ edit: true });
  }

  //鼠标移开的时候变成文本形态
  onm ouseLeaveHandler = e => {
    // this.setState({
    //     edit: false
    // });
  };

  componentDidUpdate() {

  }

  render() {
    const { txtValue } = this.props;
    const { edit, eventTxtValue } = this.state;
    let SelectStyle = edit ? { display: 'block', width: 120 } : { display: 'none' };
    let divStyle = edit ? { position: "relative", display: 'block', width: 120 } : { display: 'none' };
    let spanStyle = edit ? { display: 'none' } : { cursor: "pointer", display: "block", minWidth: "30px", minHeight: "20px" };
    return (

      <Fragment>
        <span
          style={spanStyle}
          onClick={this.onSpanClick} //双击事件
        >{txtValue}</span>
        <div onm ouseLeave={this.onMouseLeaveHandler} style={divStyle}>
          <Select
            style={SelectStyle}
            defaultValue={txtValue} onChange={this.handleChange}>
            <Option value="FF" key="ff" title="完成-完成(FF)">FF</Option>
            <Option value="FS" key="fs" title="完成-开始(FS)">FS</Option>
            <Option value="SS" key="ss" title="开始-完成(SF)">SS</Option>
            <Option value="SF" key="sf" title="开始-开始(SS)">SF</Option>
          </Select>
        </div>
      </Fragment>

    );

  }
}