import React, { useEffect, useState } from 'react';
import { withRouter } from "react-router-dom";
import RichText from '@/components/RichText'
import ExpiredCourseList from '../../train-task/components/ExpiredCourseList';
import ENUM from '../../enum';
import './course.less'

function CourseTable(props: any) {
    const IndexText = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
    const [list, setList] = useState<any[]>([]);
    useEffect(() => {
        console.log(props.info, 'rtyuio')
        setList(props.info.trainingStageList || [])
    }, [props.info.trainingStageList])



    return <div className="courseTabContent">
        <div className="tips">
            {`培训目的：`}
        
            <RichText url={props.info?.intro?.mediaUrl}   />

        </div>

        <div className="coursecontent">
            {
                list?.map((item: any, index: number) => {
                    return <div className="task">
                        <div className="title" onClick={() => {
                            const _list = [...list];
                            _list[index].open = !_list[index].open;
                            setList(_list)
                        }}>
                            {
                                item.open ? <span className="icon iconfont open">&#xe614;</span> : <span className="icon iconfont">&#xe614;</span>
                            }
                            {
                                `${IndexText[index]}、 `
                            }
                            {item.stageName}
                        </div>
                        {
                            item.open && <div className="taskItemList">
                                {
                                    item.contentVOList.map((_item: any, _index: number) => {
                                        return <div className={_index == item.contentVOList.length - 1 ? "item noBorder" : "item"}>
                                            <div className="name">
                                                <img className='type-option-icon' src={ENUM.LearningContentIcon[_item.courseType || _item.contentType]} />
                                                <span style={{ marginRight: 4 }}> {`${index + 1}.${_index + 1}`}</span>

                                                {
                                                    _item.contentName
                                                }
                                                {
                                                    (_item.courseType == 'LIVE') && <span className='desc'>{ENUM.courseStateShow[_item.courseState].title}</span>
                                                }
                                                {
                                                    _item.courseType == 'VOICE' && <span className='desc'>{`(共${_item.courseChapterNum}节)`}</span>
                                                }
                                            </div>

                                        </div>
                                    })
                                }

                            </div>
                        }
                    </div>

                })
            }

        </div>
        <div className="expired">
            <div className="title">失效课程</div>

            <div className="list">
                <ExpiredCourseList expiredCourseList={list} />
            </div>
        </div>


    </div>
}

export default withRouter(CourseTable)