/*
 * Creator: ML
 * CreatDate: 2019-12-05
 * descripts：提示弹窗   
 * */
import React from 'react';
import {Modal, Table, message, Divider } from 'antd';
let timer = undefined;
/**
 * 注释：
 * type 当前弹框的类型 接收  警告 warning  失败 error 成功 success  
 * title：标题头  默认" xx S自动关闭"  传入显示在前
 * content：内容  <dom>结构
 * time：显示时间
 * onTitRef  子组件标识
 * titVisible：  弹窗显隐 调用开启弹窗
 * initOther----this.props.initOther  针对关闭弹窗后当前页面数据需要初始化的场景 
 * 
 * 注：该组件适用于消息类提示
 */
  class TitleModal extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        titVisible:false,
        time:3,//默认三秒
        isFlag:0
      }
    }
    
    componentDidMount() {
        this.props.onTitRef(this)
    }
    componentWillUnmount() {
    }
    titVisible=(type,title,content,time)=>{
        this.setState({
            titVisible:true,
            time:3
        },()=>{
            this.timerStart()
        })
    }
    //2s后自动关闭提示
    timerStart = () => {
        timer = setInterval(() => {
            if (this.state.time > 0) {
                this.setState({
                    time: this.state.time - 1
                })
            } else {
                this.setState({ titVisible: false });
                clearInterval(timer);
                // this.props.initOther()
            }
        }, 1000);
    }
   //卡操作成功后----关闭弹窗
   closeTit = () => {
    this.setState({ titVisible: false });
    clearInterval(timer);
    // this.props.initOther()
}
    render() {
      const { titVisible,type, title, time, content, } = this.state
      return (
        <div className="tit-dom">
          <Modal
            width='600px'
            visible={titVisible}
            title={[
                <div>
                    <p style={{ textAlign: 'center', height: '26px', fontSize: '18px' }}>
                     <span>{this.props.title}</span>
                        <span style={{ color: 'red' }}>{time}S</span>
                        <span>自动关闭</span>
                    </p>
                </div>
            ]}
            onCancel={this.closeTit}
            centered={true}
            footer={null}>
           {this.props.content}
        </Modal>
        </div>
      )
    }
  }
export default TitleModal    