import React from 'react';
import { Modal, Tag } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import './riskStyle.less'

interface RiskPreventionSoftProps {
    modalVisible: boolean;
    onCancel: () => void;
    onSubmit: () => void;
    data: Array<any>;
}

const modalHeight = window.innerHeight * 96 / 100;

/**
 * 风险防控通用(软控)
 * @param props 
 * @returns 
 */
const RiskPreventionSoft: React.FC<RiskPreventionSoftProps> = (props) => {
    const { modalVisible, onCancel, onSubmit, data } = props;

    const columns: ProColumns<any[]>[] = [
        {
            dataIndex: 'regulationStrategy',
            title: '规则响应策略',
            width: '13%',
            valueEnum: {
                hard: { text: '强控', status: 'Error' },
                soft: { text: '软控', status: 'Warning' },
                alarm: { text: '预警', status: 'Processing' }
            },
        },
        {
            dataIndex: 'regulationName',
            title: '规则模型名称',
            width: '13%',
        },
        {
            dataIndex: 'regulationRank',
            title: '风险响应等级',
            width: '13%',
            valueEnum: {
                first: { text: '风险一级' },
                second: { text: '风险二级' },
                third: { text: '风险三级' }
            },
        },
        {
            dataIndex: 'message',
            title: '规则相应内容',
        },
    ];

    return (
        <Modal
            destroyOnClose
            title="风控中心校验结果"
            visible={modalVisible}
            width={'60%'}
            style={{ maxHeight: modalHeight }}
            bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto', padding: '8px 24px 16px' }}
            centered
            onCancel={() => onCancel()}
            onOk={() => {
                onSubmit();
                onCancel();
            }}
        >
            <div>
                <Tag icon={<ExclamationCircleOutlined />} color="warning" className="risk-top-tag">
                    当前业务操作受以下风控规则限制
                </Tag>
                {data.map(ite => ite?.result.map((item: any) => (
                    <div>
                        <div className="risk-table-title">
                            <span className="table-scene-name">场景名称：<span>{item.sceneName}</span></span>
                            <span>{item.publishDepartName}</span>
                        </div>
                        <ProTable<any>
                            columns={columns}
                            dataSource={item.regulationData}
                            rowKey="regulationId"
                            size='small'
                            pagination={false}
                            toolBarRender={false}
                            search={false}
                        />
                    </div>
                )
                ))}
            </div>
        </Modal>
    );
};

export default RiskPreventionSoft;