import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQml 2.12
import QtQuick.Layouts 1.12
import QtQuick.Shapes 1.12

Item {
    property alias rowsData: songListView.model
    property int pageSize: 60
    property int totalCount: 0

    property int currentPage: 0

    signal loadMore(int offset,int current)

    ListView{
        clip: true
        anchors.fill: parent
        id:songListView
        anchors.bottomMargin: 60
        ScrollBar.vertical: ScrollBar{
            anchors.right: parent.right
        }

        delegate: listviewDelegate
        header: songListHeader
        headerPositioning: ListView.OverlayHeader

        highlight: Rectangle{
            color:"#f0f0f0"
        }
        highlightMoveDuration: 0
        highlightResizeDuration: 0
    }

    Item{
        anchors.top: songListView.bottom
        anchors.topMargin: 5
        height: 40
        width: parent.width
        visible: totalCount>0 && rowsData.length>0
        ButtonGroup{
            buttons: loadButtonsLayout.children
        }
        RowLayout{
            id:loadButtonsLayout
            anchors.centerIn: parent
            Repeater{
                id:loadRepeater
                model: Math.ceil(totalCount/pageSize)>9?9:Math.ceil(totalCount/pageSize)
                Button{
                    Text {
                        anchors.centerIn: parent
                        text: modelData+1
                    }
                    background: Rectangle{
                        implicitHeight: 30
                        implicitWidth: 30
                        radius: 3
                        color: checked?"#e2f0ff":"#20e9f4ff"
                    }
                    checkable: true
                    checked: modelData === currentPage

                    onClicked: {
                        if(currentPage != index)
                        {
                            currentPage = index
                            loadMore(currentPage*pageSize,currentPage)
                        }
                    }

                }

            }
        }

    }

    Component{
        id:songListHeader
        Rectangle{
            width: songListView.width
            height: 48
            color: "#00aaaa"
            RowLayout{
                width: parent.width
                height: parent.height
                Text {
                    text: "序号"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.05
                    font.pixelSize: 18
                    font.bold: true
                    color: "white"
                }
                Text {
                    text: "歌名"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.3
                    font.pixelSize: 18
                    font.bold: true
                    color: "white"
                }
                Text {
                    text: "歌手"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.15
                    font.pixelSize: 18
                    font.bold: true
                    color: "white"
                }
                Text {
                    text: "专辑"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.25
                    font.pixelSize: 18
                    font.bold: true
                    color: "white"
                }
                Text {
                    text: "操作"
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.15
                    font.pixelSize: 18
                    font.bold: true
                    color: "white"
                }
            }
        }
    }

    Component{
        id:listviewDelegate

        Rectangle{
            width: songListView.width
            height: 45
            color: "#00000000"
            Shape{
                anchors.fill: parent
                ShapePath{
                    strokeColor: "#20000000"
                    strokeStyle: ShapePath.SolidLine
                    strokeWidth: 0
                    startX: 0
                    startY: 45
                    PathLine{
                        x:0
                        y:45
                    }
                    PathLine{
                        x:parent.width
                        y:45
                    }
                }
            }


            MouseArea{
            RowLayout{
                width: parent.width
                height: parent.height
                Text {
                    text: index+1+currentPage*pageSize
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.05
                    font.pixelSize: 14
                    elide: Text.ElideRight
                    color: "#333333"
                }
                Text {
                    text: modelData.name
                    //horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.3
                    font.pixelSize: 14
                    elide: Text.ElideRight
                    color: "#333333"
                }
                Text {
                    text: modelData.artist
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.15
                    font.pixelSize: 14
                    elide: Text.ElideRight
                    color: "#333333"
                }
                Text {
                    text: modelData.album
                    horizontalAlignment: Qt.AlignHCenter
                    Layout.preferredWidth: parent.width*0.25
                    font.pixelSize: 14
                    elide: Text.ElideRight
                    color: "#333333"
                }
                Item{
                    Layout.preferredWidth: parent.width*0.15
                    RowLayout{
                         anchors.centerIn: parent
                         MusicIconButton{
                             iconHeight: 16
                             iconWidth: 16
                             iconSource: "qrc:/images/pause.png"
                             tooltip: "播放"
                             onClicked: {
                                pageBottomView.musicPlayList = rowsData
                                pageBottomView.playMusic(index)
                             }
                         }
                         MusicIconButton{
                             iconHeight: 16
                             iconWidth: 16
                             iconSource: "qrc:/images/favorite.png"
                             tooltip: "喜欢"
                         }
                         MusicIconButton{
                             iconHeight: 16
                             iconWidth: 16
                             iconSource: "qrc:/images/clear.png"
                             tooltip: "删除"
                         }
                    }

                }
            }

                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    color = "#aae1e1e1"
                }
                onExited: {
                    color = "#00000000"
                }
                onClicked: {
                    songListView.currentIndex = index
                }
            }
        }
    }


}