import React , { useState , useEffect , useCallback } from 'react' ; import './SongListHeader.scss' ; import { Link } from 'react-router-dom' ; import { PlaylistCatlist , TopPlaylist } from '../../../../../utils/Http/SongList/SongList' ; import { GetListCategory , SubType , Props } from './SongListType/SongListType' ; import eventBus from 'src/components/EventBus/EventBus' ; const SongListHeader = ( props ) => { const [ getShowList , setShowList ] = useState < boolean > ( false ) ; const [ getChoicState , setChoicState ] = useState < string > ( "全部" ) ; const [ getListCategory , setListCategory ] = useState < GetListCategory > ( { } ) ; const [ getSub , setSub ] = useState < SubType [ ] > ( [ ] ) ; useEffect ( ( ) => { getPlaylistCatlist ( ) ; } , [ ] ) ; param name const choicName = useCallback ( ( name ) => { setChoicState ( name ) ; props . choicName ( name ) ; setShowList ( false ) ; eventBus . Emit ( "type" , name ) ; } , [ getChoicState ] ) ; const getPlaylistCatlist = async ( ) => { const data = await PlaylistCatlist ( ) ; setListCategory ( data . categories ) ; setSub ( data . sub ) ; console . log ( getSub , '[[[' ) ; } ; const showChoicList = useCallback ( ( ) => { setShowList ( ! getShowList ) ; } , [ getShowList ] ) ; const hotMusicList = useCallback ( async ( ) => { props . choicName ( "全部" , "hot" ) ; } , [ ] ) ; const listType = ( < div className = "listType" > < div className = "triangle" / > < div className = "triangleHeader" > < h3 > < Link to = "/" className = "allStyle" > 全部风格 < /Link> < /h3> < /div> < div className = "triangleBody" > < ul className = "listCateGoryUl" > { Object . values ( getListCategory ) . map ( ( item , index ) => { return < li key = { index } className = "listCateGory" > < span > { item } < /span>  < ul className = "getSub" > { getSub . map ( ( data , i ) => { return data . category === index ? < li key = { i } onClick = { ( ) => choicName ( data . name ) } > { data . name } < /li> : null; } ) } < /ul> < /li>; } ) } < /ul> < /div> < div className = "triangleFoot" / > < /div>); const SongListHeaderPageLeft = ( < div className = "SongListHeaderPageLeft" > < h3 > < span className = "allType" > { getChoicState } < /span> < span className = "choicType" onClick = { showChoicList } > < em > 选择分类 < /em> < em className = " iconfont icon-xiangxia" / > < /span> < /h3> < /div>); const SongListHeaderPageRight = ( < div className = "SongListHeaderPageRight" onClick = { hotMusicList } > 热门 < /div>); return ( < div className = "SongListHeaderPage" > { SongListHeaderPageLeft } { SongListHeaderPageRight } { getShowList ? listType : null } < /div>); } ; export default SongListHeader ;