import QtQuick 2.15
import QtQuick.Window 2.15
import TreeModel 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import QtQml.Models 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Test model view by using qml")

    // 设置选中index
    function setCurIndex(curIndex) {
        sel.setCurrentIndex(curIndex, 19)
        //treeModel.setCurPrinter(curIndex)
    }

    Component {
        id: treeViewStyle
        TreeViewStyle {
            indentation: 30
            backgroundColor: "transparent"
            alternateBackgroundColor: "transparent"
            //节点展开标记图
            branchDelegate: Rectangle {
                    color: "transparent"
                    width:30
                    height:15
                    Image {
                        id:image
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        source: styleData.isExpanded?"qrc:/res/png/file_open.png":"qrc:/res/png/file_close.png"
                        width:15
                        height: 15
                }
            }
            rowDelegate: Rectangle {
                color: "transparent"
                height: 28
            }
        }
    }

    TreeModel { id: treeModel }

    //用于节点选中
    ItemSelectionModel {
        id: sel
        model: treeModel
    }
    Rectangle {
        id: root
        implicitWidth: 239
        implicitHeight: parent.height
        color: "#F7F7F7"
        radius: 20
        signal pressBlankArea();

        Component.onCompleted: {

        }

        ColumnLayout {
            anchors.fill: parent
            spacing: 7
            Text {
                id: cusTitle
                color: "#4D4D4D"
                font.pixelSize: 13
                text: "Test custom treeview control"
                Layout.leftMargin: 15
                Layout.topMargin: 14
            }

            TreeView {
                id: treeView
                headerVisible: false
                frameVisible: false
                style: treeViewStyle
                model: treeModel
                selection: sel
                Layout.fillWidth: true
                Layout.fillHeight: true

                MouseArea {
                    anchors.fill: treeView
                    onPressed: {
                        // 点击列表空白区域发送信号给编辑框
                        var pressedRow = treeView.indexAt(mouseX, mouseY)
                        if(!pressedRow.valid) {
                            pressBlankArea();
                        }
                        mouse.accepted = false
                    }
                }

                TableViewColumn {
                    width: treeView.width
                    title: "Name"
                    role: "name"
                }

//                ScrollBar {
//                    id: verticalBar
//                    hoverEnabled: true
//                    active: true
//                    orientation: Qt.Vertical
//                    size: treeView.height / treeView.flickableItem.contentHeight
//                    visible: {
//                        if(treeView.height / treeView.flickableItem.contentHeight < 1) {
//                            return true
//                        }
//                        else
//                            return false
//                    }
//                    width: visible ? 8 : 0
//                    height: treeView.height
//                    anchors.top: treeView.top
//                    anchors.right: treeView.right
//                    onPositionChanged: {
//                        treeView.flickableItem.contentY = position * (treeView.flickableItem.contentHeight)
//                    }

//                    contentItem: Rectangle {
//                        radius: 3
//                        color: verticalBar.pressed ?"#6A6B6D" : "#AAAEB3"
//                    }
//                }

//                Connections {
//                   target: treeView.flickableItem
//                   function onContentYChanged() {
//                       verticalBar.position = treeView.flickableItem.contentY / treeView.flickableItem.contentHeight
//                   }
//                }

                itemDelegate: Rectangle {
                    id: delegateItem
                    color: "transparent"
                    property alias nameEditAlias: nameEdit
                    property alias nameTextAlias: nameText
                    property bool bHover: false

                    Rectangle {
                        id:nameBackGround
                        anchors.left:delegateItem.left
                        anchors.leftMargin: 2
                        anchors.top: delegateItem.top
                        anchors.topMargin:2
                        anchors.bottom: delegateItem.bottom
                        anchors.bottomMargin:2
                        width: 199
                        border.width: 1
                        border.color: nameEdit.visible ? "#3986FF" : "transparent"
                        color: {
                            if(nameEdit.visible) {
                                return "transparent"
                            }

                            return styleData.selected ? "#CEE1FF" : delegateItem.bHover ? "transparent" : "transparent"
                        }
                    }

                    Rectangle {
                        id: nameRect
                        height: parent.height
                        color: "transparent"
                        border.width: 2
                        radius: 4
                        border.color: "transparent"
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom

                        CusTextInput {
                            id: nameEdit
                            anchors.left: nameRect.left
                            anchors.leftMargin: 10
                            anchors.top: nameRect.top
                            anchors.bottom: nameRect.bottom
                            width: 195
                            text: styleData.value
                            font.pixelSize: 13
                            color: "#4D4D4D"
                            visible: false

                            Connections {
                                target: root
                                function onPressBlankArea() {
                                   nameEdit.focus = false
                                }
                            }

                            onTextFinished: {
                                //console.log("nameEdit.text: ", nameEdit.text)
                                treeModel.setData(styleData.index, nameEdit.text, 257)
                                nameEdit.focus = false
                                nameEdit.visible = false
                                nameText.focus = true
                                nameText.visible = true
                                if(sel.currentIndex !== styleData.index) {
                                    setCurIndex(sel.currentIndex)
                                }
                            }
                        }

                        Text {
                            id: nameText
                            anchors.left: nameRect.left
                            anchors.leftMargin: 10
                            anchors.top: nameRect.top
                            anchors.bottom: nameRect.bottom
                            width: 200
                            color: nameEdit.color
                            font: nameEdit.font
                            elide: Text.ElideRight
                            text: nameEdit.text
                            horizontalAlignment: TextInput.AlignLeft
                            verticalAlignment: TextInput.AlignVCenter
                            visible: true
                        }
                    }

                    CusTransArea {
                        id: area
                        height: delegateItem.height
                        width: delegateItem.width
                        hoverEnabled: true
                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                        onEntered:{
                            bHover = true
                        }

                        onExited: {
                            bHover = false
                        }

                        onPressed: {
                            // 18: select and current
                            if(sel.currentIndex !== styleData.index) {
                                cusTitle.focus = true
                                console.log("sel.currentIndex: ", sel.currentIndex)
                                console.log("styleData.index: ", styleData.index)
                                setCurIndex(styleData.index)
                            }
                        }

                        onCusDoubleClicked: {
                             //treeModel.data(sel.currentIndex, 257)

                                delegateItem.nameTextAlias.visible = false
                                delegateItem.nameEditAlias.visible = true
                                cusTitle.focus = true
                                delegateItem.nameEditAlias.forceActiveFocus()
                                delegateItem.nameEditAlias.ensureVisible(0)
                                delegateItem.nameEditAlias.selectAll()
                                delegateItem.nameEditAlias.timer.start()

                        }
                    }
                }
            }

        }
    }
}