import QtQuick
import QtQuick.Controls
import QtQuick.Layouts


TreeView
{
    anchors.fill: parent
    clip: true
    columnSpacing: 1
    rowSpacing: 1

    model: xtrChildModel

    columnWidthProvider: function(column)
    {
        var z= 1.7*(width / columns);
        return z;
    }

    delegate: Rectangle
    {
        required property int row
        required property int column
        required property var model

        border.width: 0

        implicitWidth: 30
        implicitHeight: 20
        border.color: "#cccccc"
        //color: index % 2 === 0 ? "#f9f9f9" : "#e0e0e0"
        //color: TreeView.isSelected ? "#d0eaff" : (row % 2 === 0 ? "#f9f9f9" : "#ffffff")
        //color: TreeView.isSelected ? "#d0eaff" : (row % 2 === 0 ? "#f9f9f9" : "#ffffff")



        TextField
        {
            id: currentEntry
            anchors.centerIn: parent
            text:  display
            font.pixelSize: 12


            // Ändere die Border-Farbe je nachdem, ob das Feld den Fokus hat
            property color borderColor: currentEntry.activeFocus ? "dodgerblue" : "gray"
            property int borderWidth: currentEntry.activeFocus ? 2 : 1

            background: Rectangle {
                // Die Farbe des Hintergrunds im Normalzustand
                color: "#ffffff"

                // Hier werden Rahmenfarbe und -breite definiert
                border.color: currentEntry.borderColor
                border.width: currentEntry.borderWidth

                // Abgerundete Ecken für ein modernes Aussehen
                radius: 4

                // Sanfter Übergang der Rahmenfarbe und -breite
                Behavior on border.color {
                    ColorAnimation { duration: 150 }
                }
                Behavior on border.width {
                    NumberAnimation { duration: 150 }
                }
            }

            onEditingFinished:
            {
                console.log("Editing finished, new text is :"+ text + " at index :" + index)
                model.display = text //The roles here are defined in model class
            }
        }

    }

    ScrollBar.horizontal: ScrollBar {}
    ScrollBar.vertical: ScrollBar {}
}