import QtQuick 2.15
import QtQuick.Layouts
import FluentUI
import "qrc:///AicsKnowledgeBase/qml/global"

Item {
    anchors.fill: parent
    signal open(string note)
    signal createNote
    width: parent.width - 8
    property ListModel noteListModel: ListModel {
        ListElement {
            uuid: "1"
            title: "超级无敌报错"
            brief: "file:///D:/academic/2023-qtBig/AicsKnowledgeBase_client/AicsKnowledgeBase/qml/component/NoteList.qml:41:21: Unable to assign [undefined] to QString"
            author: "admin"
            pageView: 123
            stars: 27
            date: "2022-02-02"
        }
        ListElement {
            uuid: "2"
            title: "Qt布局"
            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
            author: "超级无敌长的账户名"
            pageView: 123
            stars: 27
            date: "2022-02-02"
        }
        ListElement {
            uuid: "2"
            title: "Qt布局"
            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
            author: "超级无敌长的账户名"
            pageView: 123
            stars: 27
            date: "2022-02-02"
        }
        ListElement {
            uuid: "2"
            title: "Qt布局"
            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
            author: "超级无敌长的账户名"
            pageView: 123
            stars: 27
            date: "2022-02-02"
        }
    }
    ListView {
        id: listView
        anchors.fill: parent
        spacing: 8
        header: noteListItemHeader
        model: noteListModel
        delegate: noteListItemDelegate
    }
    Component {
        id: noteListItemHeader
        Item {
            id: noteListItemHeaderItem
            width: ListView.view.width
            height: 48
            RowLayout {
                width: parent.width
                FluText {
                    text: "笔记列表"
                    font.pixelSize: 18
                    font.bold: true
                }
                FluButton {
                    id: createNoteButton
                    text: "新建笔记"
                    Layout.alignment: Qt.AlignRight
                    onClicked: {
                        createNote()
                    }
                }
            }
        }
    }
    Component {
        id: noteListItemDelegate
        Rectangle {
            id: noteListItemRect
            width: ListView.view.width
            height: 150
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    open(model.uuid)
                }
            }
            NoteListItem {
                id: noteListItem
                uuid: model.uuid
                width: parent.width
                height: parent.height
                title: model.title
                date: model.date
                brief: model.brief
                pageView: model.pageView
                author: model.author
                stars: model.stars
            }
        }
    }
    function setListModel(listModel) {
        listView.model = listModel
    }
}