import { useState,useEffect } from 'react';
import { getDataExplain } from '@/apis/common';
import navIconSrc from '@/assets/icon/analysis-navigation-icon.png';
import styles from './index.less';


const DataExplain = (props) => {

    const { examId = '',idx=''} = props;
    

    const [dataExplanation, setDataExplanation] = useState([]);


    useEffect(() => {
        if (examId) {
            getDataExplainInit();
        }
    }, [examId])

    const getDataExplainInit = async () => {
        try {
            const res = await getDataExplain({
                id:examId
            });
            if (res?.code === 200) {
                if (!res?.data) {
                    return;
                }
                setDataExplanation(() => {
                    return res?.data?.split('\n');
                });
            }

        } catch (error) {
            console.log(error, 'get-data-explain-init-error');

        }
    };

    return (
        <section className={styles.analysis_content_explain} id={`operationExport${idx}`}>
            <section className={styles.analysis_content_explain_title}>
                <section className={styles.page_title}>
                    <img src={navIconSrc} className={styles.page_title_img} />
                    <span className={styles.page_title_text}>数据说明</span>
                </section>
            </section>
            <section className={styles.analysis_content_explain_content}>
                {dataExplanation?.map((item, index) => {
                    return (<p key={index} className={styles.analysis_content_explain_content_text}>{item}</p>)
                })}
            </section>
        </section>
    )
};

export default DataExplain;