import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ColumnLayout {
    spacing: 2
    Rectangle
    {
        Layout.preferredHeight: 40
        Layout.fillWidth: true
        Layout.leftMargin: 10
        color: "transparent"
        Text {
            id:titleText
            text: ""
            font.pointSize: 16
        }
    }

    Rectangle{
        Layout.preferredHeight: 160
        Layout.fillWidth: true
        Layout.leftMargin: 10
        color: "transparent"

        MusicRoundImage{
            id:ablumImg
            width: 150
            height: 150
            anchors{
                left: parent.left
                verticalCenter: parent.verticalCenter
            }

            imgSrc: ""
        }


        Text {
            id:albumDescText
            width: parent.width-180
            height: parent.height
            anchors{
                left: ablumImg.right
                verticalCenter: ablumImg.verticalCenter
                topMargin: 5
                bottomMargin: 5
                leftMargin: 10
            }
            verticalAlignment: Text.AlignVCenter

            text: ""
            wrapMode: Text.WrapAnywhere
            font.pixelSize: 15
            elide: Text.ElideRight
        }

    }
    MusicSongListView {
        Layout.fillHeight: true
        Layout.fillWidth: true
        id:detailSongListView

        Layout.leftMargin: 10
        Layout.rightMargin: 10
    }
    Component.onCompleted: {
        console.log("DetailAblum loaded")
    }
    Connections{
        target: pageHomeView
        onShowAlbumListDetails:function(targetId,targetType)
        {
            console.log("DetailAlbum id=",targetId,targetType);
            if(targetType === 10)
            {

                getAlbumSongsList(targetId)
            }
            else if(targetType === 1000)
            {
                getPlayListSongsList(targetId)
            }

        }
    }

    function getAlbumSongsList(targetId)
    {
        function onReply(reply)
        {
            http.onReplyRecievedSignal.disconnect(onReply)
            var result = JSON.parse(reply)

            detailSongListView.rowsData = result.songs.map(item=>{
                                                               return {
                                                                   id: item.id,
                                                                   name: item.name,
                                                                   artist: item.ar[0].name,
                                                                   album: item.al.name,
                                                                   lyrics:"",
                                                                   mp3Url:"",
                                                                   coverUrl:result.album.blurPicUrl
                                                               }
                                                           })

            detailSongListView.totalCount = 0
            detailSongListView.currentPage = 0
            ablumImg.imgSrc = result.album.blurPicUrl
            albumDescText.text = result.album.description
            titleText.text = "专辑 - " + result.album.name;

        }

        http.onReplyRecievedSignal.connect(onReply)
        http.sendAPIRequset("album?id="+targetId);
    }


    function getPlayListSongsList(targetId)
    {
        function onReply(reply)
        {
            http.onReplyRecievedSignal.disconnect(onReply)
            var playlist = JSON.parse(reply).playlist
            var ids = playlist.trackIds.map(i=>i.id).slice(0,40).join(',')
            ablumImg.imgSrc = playlist.coverImgUrl
            albumDescText.text = playlist.description
            titleText.text = "歌单 - " + playlist.name;
            getDetailSongsList(ids)
        }

        http.onReplyRecievedSignal.connect(onReply)
        http.sendAPIRequset("playlist/detail?id="+targetId);
    }
    function getDetailSongsList(ids)
    {
        function onReply(reply)
        {
            http.onReplyRecievedSignal.disconnect(onReply)
            var result = JSON.parse(reply)

            detailSongListView.rowsData = result.songs.map(item=>{
                                                               return {
                                                                   id: item.id,
                                                                   name: item.name,
                                                                   artist: item.ar[0].name,
                                                                   album: item.al.name,
                                                                   lyrics:"",
                                                                   mp3Url:"",
                                                                   coverUrl:item.al.picUrl
                                                               }
                                                           })

            detailSongListView.totalCount = 0
            detailSongListView.currentPage = 0
        }

        http.onReplyRecievedSignal.connect(onReply)
        http.sendAPIRequset("/song/detail?ids="+ids);
    }
}