import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQml 2.12

Item {

    property alias playList: imgRepeater.model

    Grid{
        id:gridHot
        anchors.fill: parent
        columns: 5
        spacing: 0
        Repeater{
            id:imgRepeater

            Frame{

                background: Rectangle{
                    id:imgBackground
                    color:"#00000000"
                }

                padding: 3
                clip: true
                width: parent.width*0.333
                height: parent.width*0.1
                MusicRoundImage{
                    id:playImg
                    width: parent.height
                    height: parent.height
                    imgSrc: modelData.album.picUrl
                }

                Text{
                    id:songNameText
                    anchors{
                        left: playImg.right
                        right: parent.right
                        bottom: parent.verticalCenter
                        bottomMargin: 2
                        leftMargin: 5
                    }
                    text: modelData.name
                    font.pixelSize: 14
                    elide: Text.ElideMiddle
                }
                Text{
                    anchors{
                        left: playImg.right
                        right: parent.right
                        top: parent.verticalCenter
                        topMargin: 2
                        leftMargin: 5
                    }
                    text: modelData.artists[0].name
                    font.pixelSize: 10
                    elide: Text.ElideMiddle
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onEntered: {
                        imgBackground.color = "#50000000"
                    }
                    onExited: {
                        imgBackground.color="#00000000"
                    }
                    onClicked: {
                        pageBottomView.musicPlayList = genMusicList()
                        pageBottomView.playMusic(index)
                    }
                }
            }

        }

    }

    function genMusicList()
    {
        return playList.map(item=>{
                         return {
                             id: item.id,
                             name: item.name,
                             artist: item.artists[0].name,
                             album: item.album.name,
                             lyrics:"",
                             mp3Url:item.mp3Url,
                             coverUrl:item.album.picUrl
                         }
                     })
    }

}