import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI

FluArea {
    paddings: 0
    backgroundColor: "#f9f9f9"

    //    paddings: {
    //        top: 10
    //        right: 0
    //        bottom: 10
    //        left: 10
    //    }
    FluScrollablePage {
        id: contentPage
        anchors.fill: parent
        leftPadding: 10
        topPadding: 10
        rightPadding: 10
        bottomPadding: 0

        property int knowledgeFileId
        property int likeCount: 0
        property int favoriteCount: 0
        property int shareCount: 0
        property int browsCount: 555
        property bool isLike: false
        property bool isFavorite: false
        property double fileSize: 455
        property list<string> tags: ["tag 1", "tag 2", "tag 3"]
        property date publishTime: new Date()
        property string brief: "这是一个简介"
        property string type: null
        property var contentShow

        Component.onCompleted: {

        }

        Item {
            Layout.fillWidth: true
            implicitHeight: 50

            FluText {
                id: text_title
                padding: 10
                text: "文章标题"
                font {
                    pointSize: 15
                    bold: true
                }
            }
            ColumnLayout {
                id: layout_share
                FluIconButton {
                    id: button_share
                    iconSize: 15
                    iconSource: FluentIcons.Share
                    text: contentPage.shareCount.toString()
                }
                FluText {
                    id: text_share
                    text: contentPage.shareCount
                    font.pointSize: 8
                    anchors {
                        horizontalCenter: button_share.horizontalCenter
                        top: button_share.bottom
                    }
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: parent.right
                }
            }
            ColumnLayout {
                id: layout_favorite
                FluIconButton {
                    id: button_favorite
                    iconSize: 15
                    iconSource: contentPage.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
                }
                FluText {
                    id: text_favorite
                    text: contentPage.favoriteCount
                    font.pointSize: 8
                    anchors {
                        horizontalCenter: button_favorite.horizontalCenter
                        top: button_favorite.bottom
                    }
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_share.left
                }
            }
            ColumnLayout {
                id: layout_like
                FluIconButton {
                    id: button_like
                    iconSize: 15
                    iconSource: contentPage.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
                }
                FluText {
                    id: text_like
                    text: contentPage.favoriteCount
                    font.pointSize: 8
                    anchors {
                        horizontalCenter: button_like.horizontalCenter
                        top: button_like.bottom
                    }
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_favorite.left
                }
            }
            FluIconButton {
                id: button_download
                iconSize: 25
                iconSource: FluentIcons.Download
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_like.left
                    rightMargin: 20
                }
                onClicked: function () {}
            }
        }

        FluMediaPlayer {
            Layout.fillWidth: true
        }

        Text {
            id: textMd
            text: contentPage.contentMd
            textFormat: TextEdit.MarkdownText
            focus: true
        }
        WebEngineView {
            id: sitemonitoryView
            backgroundColor: "transparent"
            implicitHeight: 200
            Layout.fillWidth: true
            settings.javascriptEnabled: true
            settings.pluginsEnabled: true
            url: "https://www.baidu.com"
        }

        FluArea {
            Layout.fillWidth: true
            implicitHeight: 100
            ColumnLayout {
                RowLayout {
                    FluText {
                        padding: 10
                        text: contentPage.publishTime.toDateString()
                    }
                    FluText {
                        padding: 10
                        text: contentPage.fileSize.toString() + "MB"
                    }
                    FluText {
                        padding: 10
                        text: contentPage.browsCount.toString() + "浏览量"
                    }
                }
                FluText {
                    Layout.topMargin: -2
                    Layout.leftMargin: 10
                    text: contentPage.brief
                }
                RowLayout {
                    Layout.topMargin: 2
                    Layout.leftMargin: 5
                    Repeater {
                        model: contentPage.tags
                        delegate: Button {
                            Layout.margins: 2
                            text: "#" + contentPage.tags[index]
                            background: Rectangle {
                                implicitHeight: 10
                                implicitWidth: 10
                                color: FluColors.Grey20
                                radius: 10
                            }
                        }
                    }
                }
            }
        }
        FluText {
            Layout.topMargin: 10
            text: "笔记"
            font {
                pointSize: 15
                bold: true
            }
        }
    }
}