import React,{Component} from 'react'
import './index.less'
import {Icon,Modal,Popconfirm} from 'antd'
export default class  Bars extends Component{
    render()
    {
        return <div className="comBarContainer">
                <ul className="barlist">
                    <li className="barlist_item">
                    <Star />
                    </li>
                    <li className="barlist_item">
                    <Entry />
                    </li>
                </ul>
                
                
        </div>
    }
}


class Star extends Component{
    state = { visible: false };

    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
  
    handleCancel = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
    render(){
        return (
        <React.Fragment>
        <Icon type="star" theme="filled" onClick={this.showModal}/>
        <Modal
          title="快捷收藏"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          
          <p>添加汇入汇款至快捷菜单？</p>
        </Modal>
        </React.Fragment>
        )
    }
}

class Entry extends Component{
    
    state={over:false}
    onOver=()=>{
        if(this.closeItv)
            clearTimeout(this.closeItv)
        
        if(this.state.over)
        {
            return 
        }    
        
        this.setState({over:true})
    }
    onOut=()=>{
        //return 
        if(!this.state.over)
            return 
        this.closeItv = setTimeout(()=>{
            this.setState({over:false})
            this.closeItv = undefined
        },100)
        
    }
    render(){
        
        return (<React.Fragment>
            <div className="bars_entry" onMouseEnter={this.onOver} onMouseLeave={this.onOut}>
                <Icon type="compass" theme="filled" />
                {
                this.state.over?
                <React.Fragment>
                
                <ul className="bars_entry_list">
                    <li className="bars_entry_list_item">
                        <span>信用证开立</span>
                        <Popconfirm
                            title="确定删除？"
                        >   
                        <Icon type="delete" theme="filled" className="entry_del_btn"  />
                        </Popconfirm>
                    </li>
                    <li className="bars_entry_list_item">
                        <span>汇入汇款</span>
                        <Popconfirm
                            title="确定删除？"
                        >   
                        <Icon type="delete" theme="filled" className="entry_del_btn"/>
                        </Popconfirm>
                    </li>
                </ul>
                <Icon className="bars_entry_corn" type="caret-right" />
                </React.Fragment>
                :null
                }
            </div>
            </React.Fragment>
            )
    }
}