import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI
import AicsKB.FileTransferManager
import SignalFileOperation 1.0
import "qrc:///AicsKnowledgeBase/qml/page"
import "qrc:///AicsKnowledgeBase/qml/component"
import "qrc:///AicsKnowledgeBase/qml/global"

FluArea {
    Popup {
        id: popup
        modal: true //模态， 为 true后弹出窗口会叠加一个独特的背景调光效果
        focus: true //焦点,  当弹出窗口实际接收到焦点时，activeFocus将为真
        padding: 0
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        property var raiseItem: null
        background: Rectangle {
            color: Qt.rgba(0, 0, 0, 0) //背景为无色
        }
        FluArea {
            width: 350
            height: 500
            backgroundColor: "#f9f9f9"
            NoteList {
                id: noteList
                onOpen: function handle(noteId) {
                    emit: SignalFileOperation.openNote(noteId)
                }
                onCreateNote: function handle() {
                    console.log("create note")
                }
            }
        }
    }
    id: content_area
    paddings: 0
    backgroundColor: "#f9f9f9"
    //    visible: false
    property string type: ""
    property string knowledgeFileId
    signal back
    signal download(string knowledgeFileId)
    signal clickTags(string tagName)

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

        property string fileId
        property int noteCount: 0
        property int favoriteCount: 0
        property int shareCount: 0
        property int browsCount: 555
        property bool isFavorite: false
        property bool isDownload: false
        property double fileSize: 455
        property string title: "文章标题"
        property list<string> tags: ["tag 1", "tag 2", "tag 3"]
        property var publishTime
        property string brief: "这是一个简介"

        function getType(suffix) {
            if (suffix === "md")
                return "MD"
            else if (suffix === "mp4" || suffix === "avi" || suffix === "rmvb"
                     || suffix === "rm" || suffix === "wmv" || suffix === "mkv")
                return "VIDEO"
            else
                return "OTHER"
        }

        function loadFile(knowledgeFileId) {
            content_area.knowledgeFileId = knowledgeFileId
            console.log(knowledgeFileId)
            Request.get("knowledge/" + knowledgeFileId,
                        function (response, data) {
                            content_page.publishTime = data.createTime
                            content_page.title = data.name
                            content_page.fileId = data.knowledgeFileAttribute.id

                            content_area.type = data.knowledgeFileAttribute.suffix

                            var tagString = ""
                            for (var j = 0; j < data.knowledgeFileAttribute.tags.length; j++) {
                                if (j != 0)
                                    tagString = tagString + ","
                                tagString = tagString + data.knowledgeFileAttribute.tags[j].name
                            }
                            content_page.tags = tagString.split(",")

                            content_page.brief = data.knowledgeFileAttribute.brief
                            content_page.browsCount = data.knowledgeFileAttribute.pageView

                            //                            var starers = data.knowledgeFileAttribute.starers
                            //                            for (var i = 0; i < starers.length; i++) {

                            //                            }
                            //                            content_page.favoriteCount = starers.length
                            if (content_area.type === "MD") {

                            } else if (content_area.type === "VIDEO") {

                            } else {
                                Request.get("knowledge/" + knowledgeFileId + "/preview/external",
                                            function (res) {
                                                content_view.push(other_view, {
                                                                      "url": res
                                                                  })
                                            })
                            }
                        })
        }

        Component.onCompleted: {
            loadFile(knowledgeFileId)
            console.log(content_area.type)
        }

        FluIconButton {
            iconSize: 12
            iconSource: FluentIcons.Back
            onClicked: {
                emit: SignalFileOperation.back()
            }
            Layout.margins: -5
        }

        Item {
            Layout.fillWidth: true
            implicitHeight: 50

            FluText {
                id: text_title
                padding: 10
                text: content_page.title
                font {
                    pointSize: 15
                    bold: true
                }
            }
            ColumnLayout {
                id: layout_note
                FluIconButton {
                    id: button_note
                    iconSize: 15
                    iconSource: FluentIcons.QuickNote
                    text: "笔记"
                    onClicked: {
                        popup.open()
                    }
                }
                FluText {
                    text: content_page.noteCount
                    font.pointSize: 8
                    Layout.alignment: button_note.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: parent.right
                }
            }
            ColumnLayout {
                id: layout_share
                FluIconButton {
                    id: button_share
                    iconSize: 15
                    iconSource: FluentIcons.Share
                    text: content_page.shareCount.toString()
                }
                FluText {
                    id: text_share
                    text: content_page.shareCount
                    font.pointSize: 8
                    Layout.alignment: button_share.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_note.left
                }
            }
            ColumnLayout {
                id: layout_favorite
                FluIconButton {
                    id: button_favorite
                    iconSize: 15
                    iconSource: content_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
                }
                FluText {
                    id: text_favorite
                    text: content_page.favoriteCount
                    font.pointSize: 8
                    Layout.alignment: button_favorite.Center
                    Layout.topMargin: -5
                }
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_share.left
                }
            }
            FluIconButton {
                id: button_download
                iconSize: 25
                iconSource: content_page.isDownload ? FluentIcons.OEM : FluentIcons.Download
                anchors {
                    verticalCenter: text_title.verticalCenter
                    right: layout_favorite.left
                    rightMargin: 20
                }
                onClicked: {
                    emit: content_area.download(content_area.knowledgeFileId)
                    FileTransferManager.download(content_page.fileId,
                                                 content_page.title)
                }
            }
        }

        FluArea {
            Layout.fillWidth: true
            implicitHeight: 100
            ColumnLayout {
                RowLayout {
                    width: parent.width
                    FluText {
                        padding: 10
                        text: content_page.publishTime
                    }
                    FluText {
                        padding: 10
                        text: content_page.fileSize.toString() + "MB"
                    }
                    FluText {
                        padding: 10
                        text: content_page.browsCount.toString() + "浏览量"
                    }
                }
                FluText {
                    Layout.topMargin: -2
                    Layout.leftMargin: 10
                    text: content_page.brief
                }
                RowLayout {
                    Layout.topMargin: 2
                    Layout.leftMargin: 5
                    Repeater {
                        model: content_page.tags
                        delegate: Button {
                            Layout.margins: 2
                            text: "#" + content_page.tags[index]
                            background: Rectangle {
                                implicitHeight: 10
                                implicitWidth: 10
                                color: FluColors.Grey20
                                radius: 10
                            }
                            onClicked: {
                                emit: content_area.clickTags(text)
                            }
                        }
                    }
                }
            }
        }

        //        WebEngineView {
        //            Layout.fillWidth: true
        //            backgroundColor: "transparent"
        //            implicitHeight: 200
        //            settings.javascriptEnabled: true
        //            settings.pluginsEnabled: true
        //            url: "https://www.baidu.com"
        //        }
        StackView {
            id: content_view
            Layout.fillWidth: true
            implicitHeight: 400
        }

        Component {
            id: video_view
            FluMediaPlayer {
                width: parent.width
                implicitHeight: width * 9 / 16.
            }
        }
        Component {
            id: text_view
            NoteEditPage {
                noteId: "255454"
                width: parent.width
                implicitHeight: 400
            }
        }
        Component {
            id: other_view
            WebEngineView {
                width: parent.width
                backgroundColor: "transparent"
                implicitHeight: 200
                settings.javascriptEnabled: true
                settings.pluginsEnabled: true
                url: "https://www.baidu.com"
            }
        }
    }
}