import React from 'react';
import {Button,Modal} from 'antd';


export  class ConfirmButton extends React.Component{
    
    state={popup:false}
    
    // 弹出框的button样式（有没有取消按钮，有没有确认按钮，确然按钮放左边等等）
    hasButton(){
        
       
            return (<div>
                    <Button onClick={()=>this.handleOk()}>确认</Button>
                    <Button onClick={()=>this.handleCancel()}>取消</Button>
                </div>)
    }
    hasButton1(){
        
       
        return (<div>
                <Button onClick={()=>this.handleOk1()}>暂存并退出</Button>
                <Button onClick={()=>this.handleOk()}>直接退出</Button>
                <Button onClick={()=>this.handleCancel()}>放弃退出</Button>
            </div>)
}
    // 弹出框显示的message信息
    handleClick(){
        this.setState({popup:true})
    }
    // 点击确认后的逻辑
    handleOk(){
        
        this.props.onOK && this.props.onOK()
        this.setState({popup:false})
        
    }
    handleOk1(){
        
        this.props.onOK1 && this.props.onOK1()
        this.setState({popup:false})
        
    }
    // 点击取消后的逻辑
    handleCancel(){
        this.setState({popup:false})
        this.props.onCancel && this.props.onCancel()
    }
    
    render(){
       const props = this.props;
       let {title,message,onOK,onCancel,isped,...rest} = this.props
       title = title || ""
       message = message|| "确定提交？"
       console.log(isped);
        return (
		<div>
            <Button size="small" {...rest} onClick={()=>this.handleClick()}>
                {this.props.children}
            </Button>
            <Modal
                    visible={this.state.popup}
                    title={title}
                    onCancel={() => this.handleCancel()}
                    //   footer={this.hasButton()}
                    footer={isped !== true ? this.hasButton() : this.hasButton1()}
                    //    width={500}
                    width={isped !== true ? 300 : 500}
                >
                <p>{message}</p>
             </Modal>
                
        </div> )
    }
}


export  class OKButton extends React.Component{
    
    state={popup:false}
    
    // 弹出框的button样式（有没有取消按钮，有没有确认按钮，确然按钮放左边等等）
    hasButton(){
        
       
            return (<div>
                    <Button onClick={()=>this.handleOk()}>确认</Button>
                    
                </div>)
    }
    // 弹出框显示的message信息
    handleClick(){
        this.setState({popup:true})
    }
    // 点击确认后的逻辑
    handleOk(){
        
        this.props.onOK && this.props.onOK()
        this.setState({popup:false})
        
    }
    // 点击取消后的逻辑
    handleCancel(){
        this.setState({popup:false})
        this.props.onCancel && this.props.onCancel()
    }
    
    render(){
       const props = this.props;
       let {title,message,onOK,onCancel,...rest} = this.props
       title = title || ""
       message = message|| "确定提交？"
        return (
		<div>
            <Button size="small" {...rest} onClick={()=>this.handleClick()}>
                {this.props.children}
            </Button>
            <Modal
             visible={this.state.popup}
             title={title}
             onCancel={()=>this.handleCancel()}
             footer={this.hasButton()}
             width={300}
            >
                <p>{message}</p>
             </Modal>
                
        </div>)
    }
}
