import React , { useEffect , useState } from 'react';
import { Input } from 'antd';

function menusRename({ name , edit , id , renameFunc }){
  const [ n , setN ] = useState(undefined);
  const [ show , setShow ] = useState(false);
  const [ref, setRef ] = useState(undefined);
  const [put, setPut ] = useState(false);

  useEffect(() => {
    if (edit && ref) {
      ref.focus();
    }
  })

  useEffect(()=>{
    if(name){
      setN(name)
    }
  },[name])

  // 显示input框编辑
  function changeShow(e){
    e.stopPropagation();
    setShow(true);
    setPut(true);
  }

  function blurInput(e){
    renameFunc(e.target.value,id);
    setPut(false);
    setShow(false);
  }
  return(
    <div className="aboutEdit">
      <span className="operateName">
        { !show && n }
        <Input 
          ref={(el) => setRef(el)} 
          value={n} 
          size="small" 
          maxLength={8} 
          onClick={(e)=>e.stopPropagation()} 
          onBlur={blurInput} 
          style={{width:"75px",display : `${show?"block":'none'}`}} 
          onChange={(e)=>setN(e.target.value)}
        />
        { !show && edit && <i className="iconfont icon-editUnder font-16 color-grey-9" onClick={changeShow}></i> }
      </span>
    </div>
  )
}
export default menusRename