import { Icon } from 'antd';
import { useState } from 'react';

export default (props) => {
    const [isEdit, setIsEdit] = useState(false)
    const [inputVal, setInputVal] = useState()
    const { onAdd, onDelete, isDelete, onChange, value } = props

    const handleClose = () => {
        setIsEdit(false)
        setInputVal(value)
    }

    const handleSave = () => {
        onChange(inputVal)
        setIsEdit(false)
        setInputVal()
    }

    if (isEdit) {
        return (

            <div>
                {/* 逻辑运算 OR  */}
                {/* item项目value根据状态切换 */}
                {/*onChange这个API是一个函数，并且需要返回值，API的返回值是onChange方法的返回值
                e就是api的形参，这个参数的生成需要onChange的API触发，同时将e传给方法并获取其返回值
                实参把值给形参，由形参保存。
                这个e会获取到最新的变化值并且传到onchange方法
                */}
                <input value={inputVal} onChange={(e) => setInputVal(e.target.value)} />

                <Icon
                    //取消保存
                    type="close-circle"
                    theme="filled"

                    style={{ marginLeft: 10 }}
                    onClick={handleClose}//恢复默认值 
                />
                <Icon
                    //保存节点
                    type="check-circle"
                    theme="filled"
                    style={{ marginLeft: 10 }}
                    onClick={handleSave}
                />
            </div>
        )
    }

    return (
        <div >
            <span>{value}</span>
            <span>
                {/* 编辑edit onclick 拿到项目的key */}
                <Icon
                    type="edit"
                    style={{ marginLeft: 10 }}
                    onClick={() => setIsEdit(true)}
                />
                {/* 编辑plus onclick 拿到项目的key */}
                <Icon
                    type="plus"
                    style={{ marginLeft: 10 }}
                    onClick={onAdd}
                />
                {/* 先确认父key是不是绝对等于"0" */}
                {isDelete && (
                    <Icon
                        type="delete"
                        style={{ marginLeft: 10 }}
                        onClick={onDelete}
                    />
                )}
            </span>
        </div>
    )
}