import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtQml 2.12
RowLayout{
    property int defaultMenuIndex: 0
    property int loaderIndex: 0
    property var qmllist: [
        {icon:"recommend-white.png",value:"推荐内容",qml:"DetailRecommendPageView.qml"},
        {icon:"cloud-white.png",value:"搜索音乐",qml:"DetailSearchPageView.qml"},
        {icon:"local-white.png",value:"本地音乐",qml:"DetailLocalPageView.qml"},
        {icon:"history-white.png",value:"播放历史",qml:"DetailHistoryPageView.qml"},
        {icon:"favorite-big-white.png",value:"我喜欢的",qml:"DetailFavoritePageView.qml"},
        {icon:"",value:"",qml:"DetailAblumSongsView.qml"}
    ]
    spacing: 0
    Frame {

        Layout.preferredWidth: 200
        Layout.fillHeight: true
        background: Rectangle{
            color: "#aa00aaaa"
        }
        padding: 0
        leftPadding: 0
        ColumnLayout{
            anchors.fill: parent
            Item{
                Layout.preferredHeight: 150
                Layout.fillWidth: true

                MusicRoundImage{
                    width: 100
                    height: 100
                    anchors.centerIn: parent
                    borderRadius: 50
                    outerFrameWidth: 10
                    enableAnimation: false
                }
            }

            ListView{
                Layout.leftMargin: 0
                id:menuView
                Layout.fillHeight: true
                Layout.fillWidth: true
                height:parent.height
                model: ListModel{
                    id:menuViewModel
                }
                delegate: menuViewDelegate
                highlight: Rectangle{
                    color:"#aa73FFaa"
                }
            }

        }
        Component{
            id:menuViewDelegate
            Rectangle{
                height: 50
                width: 200
                color: "#aa00aaaa"
                RowLayout{
                    id:menuViewDelegateItem
                    anchors.fill: parent
                    anchors.centerIn: parent
                    spacing: 15
                    Image {
                        source: "qrc:/images/"+icon
                        Layout.preferredHeight: 20
                        Layout.preferredWidth: 20
                        Layout.leftMargin: 30
                    }
                    Text {

                        text: value
                        Layout.fillWidth: true
                        font.pointSize: 12
                        height: 50
                        color: "#ffffff"
                    }
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled : true
                    onEntered: {
                        color = "#aa73a7ab"


                    }
                    onExited: {
                        color = "#aa00aaaa"
                    }
                    onClicked: {
                        menuView.currentIndex = index
                        showQmlPage(index)
                    }
                }
            }
        }
        Component.onCompleted:  {
            menuViewModel.append(qmllist.filter(i=>i.icon.length>1))
            menuView.currentIndex = defaultMenuIndex
            showQmlPage(loaderIndex)
        }

    }

    function showQmlPage(index)
    {
        repeater.itemAt(loaderIndex).visible = false
        loaderIndex = index

        var loader = repeater.itemAt(index)
        loader.visible = true
        //loader.source = qmllist[index].qml+".qml"
    }

    Repeater{
        id:repeater
        model: qmllist
        Loader{
            visible: false
            Layout.fillHeight: true
            Layout.fillWidth: true
            source: modelData.qml
        }
    }

    signal showAlbumListDetails(string targetId, int targetType)
    onShowAlbumListDetails:function(id,type)
    {
        console.log("PageHomeView id=",id);
        showQmlPage(5)
    }

}