import * as React from 'react';
import { Button, } from 'kts-xui';
import { useHistory } from 'react-router-dom';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Space, Modal, } from 'kts-components-antd-x4';
/** Props接口 */
interface IProps {
    record?: any;
}
/**
 * 没有提交规则配置弹窗面板
 */
export default function Component(props) {
    const history = useHistory();
    const [errorModal, setModal] = React.useState(false);

    const onClose = () => {
        setModal(false)
    }
    const gotoDID = () => {
        history.push('/task/list/setting');
    }
    const showModal = () => {
        setModal(true)
    }
    return (
        <>
            {/* <Button style={{ padding: 0 }} type='link' onClick={showModal}>提交</Button> */}
            <div style={{ width:'100%' }} key='1' onClick={showModal}>{props.children}</div>
            <Modal
                className='specail'
                title={' '}
                width={396}
                footer={null}
                maskClosable={false}
                visible={errorModal}
                onCancel={onClose}
            >
                <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, textAlign: 'center', marginBottom: 15, fontWeight: 500, color: '#212223' }}>
                    <CloseCircleOutlined style={{ color: '#FF5F58', fontSize: 30 }} />
                    <span style={{ paddingLeft: 5 }}>提交失败</span>
                </p>
                <p>请先配置提交规则，再进行发票提交。</p>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '35px 0 0' }}>
                    <div>
                        <a onClick={gotoDID}>配置提交规则</a>
                    </div>
                    <div>
                        <Space size={20}>
                            <a onClick={onClose}>取消</a>
                        </Space>
                    </div>
                </div>
            </Modal>
        </>
    );
}