import { useState,useEffect } from 'react';
import navIconSrc from '@/assets/icon/analysis-navigation-icon.png';
import sectionSrc1 from '@/assets/icon/analysis-catalogue-1.png';
import sectionSrc2 from '@/assets/icon/analysis-catalogue-2.png';
import sectionSrc3 from '@/assets/icon/analysis-catalogue-3.png';
import sectionSrc4 from '@/assets/icon/analysis-catalogue-4.png';
import sectionSrc5 from '@/assets/icon/analysis-catalogue-5.png';
import sectionSrc6 from '@/assets/icon/analysis-catalogue-6.png';
import sectionSrc7 from '@/assets/icon/analysis-catalogue-7.png';
import sectionSrc8 from '@/assets/icon/analysis-catalogue-8.png';
import styles from './index.less';

const Catalogue = (props) => {

    const { idx = '',modelList = [] } = props;
    const [list,setList] = useState([]);

    useEffect(()=>{
        const arr = [];
        modelList?.forEach(element => {
            if(element?.reportItemModel?.id === 3){
                arr.push({
                    title: '上线情况分析',
                    // text1: '考试排名分析',
                    // text2: '考试排名百分比分析',
                    icon: sectionSrc1,
                    left: 0
                });
            }
            if([4,5,6].includes(element?.reportItemModel?.id)){
                arr.push({
                    title: '学校对比分析',
                    // text1: '教师群体分析',
                    // text2: '教师绩效Z值分析',
                    icon: sectionSrc2,
                    left: 0
                })
            }
            if([15,16,20].includes(element?.reportItemModel?.id)){
                arr.push({
                    title: '教师群体分析',
                    // text1: '整体分析',
                    // text2: '后续措施',
                    icon: sectionSrc3,
                    left: 0
                })
            }
            if([7,45].includes(element?.reportItemModel?.id)){
                arr.push( {
                    title: '学生群体分析',
                    // text1: '尖子生分析',
                    // text2: '临界生/冒进生分析',
                    icon: sectionSrc4,
                    left: 0
                })
            }
            if([22,23,24,25].includes(element?.reportItemModel?.id)){
                arr.push({
                    title: '选考分布分析',
                    // text1: '尖子生分析',
                    // text2: '临界生/冒进生分析',
                    icon: sectionSrc5,
                    left: 0
                })
            }
            if([28].includes(element?.reportItemModel?.id)){
                arr.push({
                    title: '试卷质量分析',
                    // text1: '尖子生分析',
                    // text2: '临界生/冒进生分析',
                    icon: sectionSrc8,
                    left: 0
                })
            }
            if([26,27].includes(element?.reportItemModel?.id)){
                arr.push(  {
                    title: '学科小题分析',
                    // text1: '尖子生分析',
                    // text2: '临界生/冒进生分析',
                    icon: sectionSrc6,
                    left: 0
                })
            }
            if([47].includes(element?.reportItemModel?.id)){
                arr.push({
                    title: '学科知识点分析',
                    // text1: '尖子生分析',
                    // text2: '临界生/冒进生分析',
                    icon: sectionSrc7,
                    left: 0
                },)
            }
            
        });
        const uniqueArray = arr.filter((item, index, self) => 
            index === self.findIndex((t) => t.title === item.title)
        );
        
        setList(uniqueArray);
        
    },[modelList])
    const catalogueList = [
        {
            title: '上线情况分析',
            // text1: '考试排名分析',
            // text2: '考试排名百分比分析',
            icon: sectionSrc1,
            left: 0
        },
        {
            title: '学校对比分析',
            // text1: '教师群体分析',
            // text2: '教师绩效Z值分析',
            icon: sectionSrc2,
            left: 0
        },
        {
            title: '教师群体分析',
            // text1: '整体分析',
            // text2: '后续措施',
            icon: sectionSrc3,
            left: 0
        },
        {
            title: '学生群体分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc4,
            left: 0
        },
        {
            title: '选考分布分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc5,
            left: 0
        },
        {
            title: '学科小题分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc6,
            left: 0
        },

        {
            title: '学科知识点分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc7,
            left: 0
        },
    ];

    return (
        <section className={styles.analysis_content_catalogue} id={`operationExport${idx}`}>
                            <section className={styles.analysis_content_catalogue_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_catalogue_content}>

                                {list?.map((item, index) => {
                                    return (<section className={styles.analysis_content_catalogue_section} key={index} style={{ marginLeft: item?.left }}>
                                        <img src={item.icon} className={styles.analysis_content_catalogue_section_img} />
                                        <section className={styles.analysis_content_catalogue_section_description}>
                                            <span className={styles.analysis_content_catalogue_section_title}>{item?.title}</span>
                                            {/* <span className={styles.analysis_content_catalogue_section_text}>{item?.text1}&nbsp;&nbsp;&nbsp;&nbsp;{item?.text2}</span> */}
                                        </section>
                                    </section>)
                                })}
                            </section>
        </section>
    )
};

export default Catalogue;