import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    width: parent.width/parent.childcount
    property var editMode: false
    property var text: ""
    property var value: ""
    height: 30
    clip: true

    Rectangle{
        width: 1
        height: parent.height
        color: "#222"
        anchors.right: parent.right
    }
    Rectangle{
        width: parent.width
        height: 1
        color: "#222"
        anchors.bottom: parent.bottom
    }

    Label {
        text: parent.text
        anchors.centerIn: parent
        font.pixelSize: 15
        anchors.verticalCenter: parent.verticalCenter
        verticalAlignment: Text.AlignHCenter
    }
    TextField
    {
        id: tf
        visible: false
        width: parent.width
        height: parent.height
        font.pixelSize: 15
        onTextChanged: {
            parent.value = text;
        }
        onEditingFinished: {
            parent.value = text;
            visible = false;
        }
    }
    MouseArea{
        anchors.fill: parent;
        visible: !tf.visible;
        onDoubleClicked: {

            if (parent.editMode == true)
            {
                tf.visible = true;
                tf.text = parent.text;
                tf.forceActiveFocus();
            }
        }
    }
}