import QtQuick 2.11
import QtQuick.Controls 2.2

Item {
    property real itemHeight: 30
    property real portColWidthP: 0.35
    property real modelColWidthP: 0.35
    property real uidColWidthP: 0.30
    property int  currentIndex: listView.currentIndex
    property int count: listModel.count
    property var append: listModel.append
    property var clear: listModel.clear
    property var get: listModel.get

    Rectangle {
        id: rect
        anchors.fill: parent
        // HEADER
        Component {
            id: header
            Item {
                z: 2
                width: rect.width
                height: itemHeight
                Rectangle {
                    height: parent.height
                    width: parent.width
                    Row {
                        spacing: 5
                        height: parent.height
                        width: parent.width
                        MyListSubItem {
                            text: "Port"
                            width: parent.width * portColWidthP
                        }
                        MyListSubItem {
                            text: "Model"
                            width: parent.width * modelColWidthP
                        }
                        MyListSubItem {
                            text: "UID"
                            width: parent.width * uidColWidthP
                        }
                    }
                }
            }
        }
        // DELEGATE
        Component {
            id: listDelegate
            Item {
                width: rect.width
                height: itemHeight
                Row {
                    spacing: 5
                    height: parent.height
                    width: parent.width
                    MyListSubItem {
                        text: port
                        width: parent.width * portColWidthP
                    }
                    MyListSubItem {
                        text: model
                        width: parent.width * modelColWidthP
                    }
                    MyListSubItem {
                        text: uid
                        width: parent.width * uidColWidthP
                    }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: listView.currentIndex = index;
                }
            }
        }
        // LIST VIEW
        ListView {
            id: listView
            anchors.fill: parent
            spacing: 5
            clip: true
            interactive: true
            header: header
            headerPositioning: ListView.OverlayHeader
            delegate: listDelegate
            highlight: Rectangle {
                color: Qt.rgba(1, 0, 0, 0.5);
                z: 1.1
            }
            model: ListModel {
                id: listModel
            }
            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AlwaysOn
            }
        }
    }
}