import React, { Fragment, useState } from 'react';
import CommonHeader from '../CommonHeader';
import { Mask } from 'cbkfe-ui';
import { isArray } from 'cbkfe-utils';
import classNames from 'classnames';
import './style/index';
const ConfirmInfoModal = ({
    pageTitle,
    sourceData,
    show,
    onClose
}) => {
    const [showMask, setShowMask] = useState(false);
    if (!isArray(sourceData, true)) {
        return null;
    }
    return (
        <Mask
            isShow={show}
            needScrollId={'modal-panel-body'}
            maskClick={() => { typeof onClose === 'function' ? onClose() : setShowMask(!showMask) }}
            useFadeInOut={true}
        >
            <div className="modal-panel" id="modal-panel" >
                <div className="modal-panel-title" role="button" onClick={() => { typeof onClose === 'function' ? onClose() : setShowMask(!showMask) }}>
                    <label >{pageTitle}</label>
                    <img className="modal-close" src={'https://static.caibeike.com/i/8f0cb0db503fa55351cdd6effa7d03ff-RZFnGM-fgwfghp1'} />
                </div>
                <div className="modal-panel-body" id="modal-panel-body">
                    {sourceData.map((item, index) => (
                        <div key={index} >
                            <CommonHeader
                                classname={classNames('g-appoint-header', { 'g-appoint-header-shrink': index === 0 })}
                                title={item.textTitle}
                            />
                            {item.subText && <span className="item-title">{item.subText}</span>}

                            {item.tableList && <div style={{ marginBottom: '0.8rem' }}>
                                {item.tableList.map((item, index) => (
                                    <div
                                        key={index}
                                        className={classNames({
                                            'item-item-body': index,
                                            'item-item-title': !index
                                        })}
                                        style={{ borderRadius: index ? ' 0rem 0rem 0rem 0rem' : '0.4rem 0.4rem 0rem 0rem' }}
                                    >
                                        {
                                            item.map((pro, index) =>
                                                <div key={index}
                                                    className={classNames({
                                                        'item-table-right': index,
                                                        'item-table-left': !index
                                                    })}>{pro}</div>
                                            )
                                        }
                                    </div>
                                ))}
                            </div>}

                            {item.subTipList && <div style={{ marginBottom: '0.8rem' }}>
                                {item.subTipList.map((item, index) => (
                                    <div key={index} className="tips">
                                        <div>{item}</div>
                                    </div>
                                )
                                )}
                            </div>}

                            {item.textList && item.textList.map((item, index) => (
                                <div key={index} className="textlist">
                                    <div>{item}</div>
                                </div>
                            )
                            )}
                        </div>
                    ))}
                </div>
            </div>

        </Mask >
    );
};
export default ConfirmInfoModal;