import QtQuick 2.14
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.14
import QtQml.Models 2.14
import QtGraphicalEffects 1.0

TabView {
    SystemPalette { id: activePalette }
    Tab {
        title : "Class"
        TreeView {
            model: classModel
            anchors.fill: parent
            itemDelegate: Item {
                Text {
                    anchors.fill: parent
                    color: activePalette.windowText
                    elide: styleData.elideMode
                    text: styleData.value
                }
            }
            TableViewColumn {
                title: "Name"
                role: "Name"
                width: parent.width / 2
            }
            TableViewColumn {
                title: "Class"
                role: "Class"
                width: parent.width / 2
            }
        }
    }
    Tab {
        title : "Category"
        TreeView {
            model: categoryModel
            anchors.fill: parent
            itemDelegate: Item {
                Text {
                    anchors.fill: parent
                    color: activePalette.windowText
                    elide: styleData.elideMode
                    text: styleData.value
                }
            }
            TableViewColumn {
                title: "Name"
                role: "Name"
                width: parent.width / 3
            }
            TableViewColumn {
                title: "Value"
                role: "Value"
                width: parent.width / 3
            }
            TableViewColumn {
                title: "Class"
                role: "Class"
                width: parent.width / 3
            }
        }
    }
    Tab {
        title : "Object"
    }
    style: TabViewStyle {
        frameOverlap: 1
        tab: Rectangle {
            color: styleData.selected ? "steelblue" : activePalette.window
            border.color:  activePalette.window
            implicitWidth: Math.max(text.width + 4, 80)
            implicitHeight: 20
            radius: 2
            Text {
                id: text
                anchors.centerIn: parent
                text: styleData.title
                color: activePalette.windowText
            }
        }
        frame: Rectangle { color: activePalette.window }
    }
}