import QtQuick 2.15
import QtQuick.Controls
import QtQuick.Layouts
import ESP32_upper 1.0

Item {
    id: root

    Rectangle {
        width: 180
        height: Window.height
        color: "green"

        Component {
            id: contactDelegate
            // property int my_index: index
            Rectangle {
                width: 150; height: 60
                anchors.left: parent.left // 靠父组件左边
                anchors.leftMargin: 15 // 左边距20像素
                radius: 5
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        // id_view.view.currentIndex = id_view.view.
                        console.log("Clicked on", name)

                    }
                    onEntered: {
                        parent.color = "red"
                    }
                    onExited: {
                        parent.color = "white"
                    }
                }
                Column {
                    Text { text: '<b>Name:</b> ' + name }
                    Text { text: '<b>Number:</b> ' + number }

                }

            }

        }
        MouseArea {
            anchors.fill: parent
            onWheel: (wheel) => {
                wheel.accepted = true; // 处理滚轮事件并阻止事件传递
                id_view.contentY += wheel.angleDelta.y / 120 * 10; // 根据滚轮的滚动方向和量来滚动 ListView
            }
            ListView {
                id: id_view
                spacing: 10
                anchors.fill: parent
                model: TestModels {}
                delegate: contactDelegate
                // highlight: Rectangle { color: "lightsteelblue"; radius: 2 }
                // focus: true
            }
        }


    }

}