import * as React from 'react' ; import "./RecommendBody.scss" ; import loadable from "@loadable/component" ; const MusicList = loadable ( ( ) => import ( "../../../../../components/MusicList/MusicList" ) ) ; const BodyChild = loadable ( ( ) => import ( "./BodyChild/BodyChild" ) ) ; const NewCdList = loadable ( ( ) => import ( './NewCdList/NewCdList' ) ) ; const RankList = loadable ( ( ) => import ( './RankList/RankList' ) ) ; import IndexHttp from '../../../../../utils/Http/HttpList/IndexHttp' ; import { Link } from 'react-router-dom' ; import { useDispatch , useStore } from 'react-redux' ; import actionsStore from 'src/redux/actions/actions' ; const RecommendBody = ( props ) : JSX . Element => { const [ musicList , setMusicList ] = React . useState < any [ ] > ( [ ] ) ; const [ leaderBorderData , setLeaderBorderData ] = React . useState < any [ ] > ( [ ] ) ; const [ newCdMargin , setNewCdMargin ] = React . useState < number > ( - 645 ) ; const [ newCdTransition , setNewCdTransition ] = React . useState < number > ( 2 ) ; const [ time , setTime ] = React . useState < any > ( null ) ; const [ rankListData , setRankListData ] = React . useState < any > ( [ ] ) ; const [ artistList , setArtilstList ] = React . useState < any [ ] > ( [ ] ) ; const dispatch = useDispatch ( ) ; const store = useStore ( ) ; React . useEffect ( ( ) => { const getTopArtists = async ( ) : Promise < void > => { const data = await IndexHttp . personalized ( 8 ) ; const leaderBorderList = await IndexHttp . albumNewest ( ) ; setLeaderBorderData ( leaderBorderList . albums ) ; const artistListData = await IndexHttp . artistList ( 5001 , 6 ) ; setArtilstList ( artistListData . artists ) ; await Promise . all ( [ IndexHttp . topList ( 3 ) , IndexHttp . topList ( 0 ) , IndexHttp . topList ( 2 ) ] ) . then ( ( res ) => { const topListData = res . map ( ( item ) => { return item . playlist ; } ) ; setRankListData ( topListData ) ; } ) ; setMusicList ( data . result ) ; } ; getTopArtists ( ) ; } , [ ] ) ; const musicTypeList = ( lists , ComponentsList ) : JSX . Element [ ] => { return lists . map ( ( item , index ) => { return ( < li key = { index } > < ComponentsList item = { item } index = { index } className = "musicLists" / > < /li>); } ) ; } ; param type const slideNewCd = ( type ) => React . useCallback ( ( ) => { const clientWidth = - 645 ; let newClientWidth = newCdMargin ; if ( type ) { newClientWidth < clientWidth * 3 ? ( newClientWidth = 0 , setNewCdTransition ( 0 ) ) : ( newClientWidth += clientWidth , setNewCdTransition ( 2 ) ) ; } else { newClientWidth > 0 ? ( newClientWidth = 3 * clientWidth , setNewCdTransition ( 0 ) ) : ( newClientWidth -= clientWidth , setNewCdTransition ( 2 ) ) ; } setNewCdMargin ( newClientWidth ) ; } , [ newCdMargin ] ) ; React . useEffect ( ( ) => { if ( newCdMargin <= - 1935 ) { const times = setTimeout ( ( ) => { setNewCdTransition ( 0 ) ; setNewCdMargin ( - 645 ) ; clearTimeout ( times ) ; } , 2000 ) ; setTime ( times ) ; } else if ( newCdMargin >= 0 ) { const times = setTimeout ( ( ) => { setNewCdTransition ( 0 ) ; setNewCdMargin ( - 1290 ) ; clearTimeout ( times ) ; } , 2000 ) ; debugger ; setTime ( times ) ; } return ( ) => clearTimeout ( time ) ; } , [ newCdMargin ] ) ; const rankListEle = ( ) : JSX . Element [ ] => { return rankListData . map ( ( item , index ) => { return ( < div key = { index } className = "rankListBox" > < div className = "rankListHeader" > < div className = "rankListImgBox" > < img src = { item . coverImgUrl } alt = "" className = "rankImg" / > < /div> < div className = "rankListTextBox" > < p className = "rankName" > { item . name } < /p> < p className = "rankPlay" > < Link to = "/" className = "rankListPlay" / > < Link to = "/" className = "rankListCollection" / > < /p> < /div> < /div> < ul className = "rankLists" > { musicTypeList ( item . tracks . slice ( 0 , 10 ) , RankList ) } < /ul> < /div>); } ) ; } ; const artistListEle = artistList . map ( ( item , index ) => { return ( < li key = { index } > < div className = "artistListBox" > < img src = { item . img1v1Url } alt = { item . name } / > < div className = "aliasBox" > < p > { item . alias . length > 0 ? ( item . name + item . alias [ 0 ] ) : item . name } < /p> < p > < /p> < /div> < /div> < /li>); } ) ; const showLoginPopove = React . useCallback ( ( ) => { dispatch ( actionsStore . setPopoveState ( { show : true , type : 'phone' } ) ) ; console . log ( store . getState ( ) ) ; } , [ dispatch ] ) ; return ( < div className = "recommemdBodyHeader" > < div className = "recommemdBody" > { } < div className = "recommemdBodyLeft" > { } < div className = "musicHeader" > < BodyChild tags = { props . tags } to = { '/' } name = { '热门推荐' } / > < /div> { } < div className = "musicBody" > < ul > { musicTypeList ( musicList , MusicList ) } < /ul> < /div> { } < div className = "newCd" > < div className = "newCdHeader musicHeader" > < BodyChild tags = { [ ] } to = { '/' } name = { '新碟上架' } / > < /div> < div className = "newCdBody" > < span className = "iconfont icon-youjiantou" onClick = { slideNewCd ( false ) } / > < div className = "viewBox" > < div className = "leaderBorderDataBox" style = { { marginLeft : newCdMargin + 'px' , transition : `margin ${ newCdTransition }s` } } > < ul > { musicTypeList ( leaderBorderData . slice ( 5 , 10 ) , NewCdList ) } < /ul> < ul > { musicTypeList ( leaderBorderData . slice ( 0 , 5 ) , NewCdList ) } < /ul> < ul > { musicTypeList ( leaderBorderData . slice ( 5 , 10 ) , NewCdList ) } < /ul> < ul > { musicTypeList ( leaderBorderData . slice ( 0 , 5 ) , NewCdList ) } < /ul> < /div> < /div> < span className = "iconfont icon-youjiantou" onClick = { slideNewCd ( true ) } / > < /div> < /div> { } < div className = "leaderBoardList" > < div className = "leaderBoardHeader musicHeader" > < BodyChild tags = { [ ] } to = { '/' } name = { '榜单' } / > < /div> < div className = "leaderBoardBody" > { rankListEle ( ) } < /div> < /div> < /div> { } < div className = "recommemBodyRight" > < div className = "recommemRightHeader" > < p > 登录网易云音乐 ， 可以享受无限收藏的乐趣 ， 并且无限同步到手机 < /p> < div className = "goLogin" onClick = { showLoginPopove } > 用户登录 < /div> < /div> { } < div className = "entering" > < div className = "enteringHeader" > < span > 入驻歌手 < /span> < span > < Link to = "/" > 查看全部 > < /Link>  </span > < /div> < ul className = "artistListEleBox" > { artistListEle } < /ul> < /div> { } < div className = "hotPeople entering" > < div className = "enteringHeader" > < span > 热门主播 < /span> < span / > < /div> < /div> < /div> < /div> < /div>); } ; export default RecommendBody ;