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

Item {
    anchors.fill: parent
    Rectangle{
        id: id_home_page_csi_root
        height: parent.height
        width: parent.width
        RowLayout {
            spacing : 2
            height: parent.height
            width: parent.width
            Text {
                Layout.preferredWidth: 100
                text: "连接状态："
                font.pixelSize: id_gp.font_info_pixel_size
            }


            Text {
                Layout.preferredWidth: 100
                id: id_text_home_page_connet_state
                text: "未连接"
                font.pixelSize: id_gp.font_info_pixel_size
            }

            Rectangle {
                Layout.fillWidth: true
                opacity: 0
            }

            Button {
                id: button
                text: "重新连接"
                Layout.preferredWidth: 100
                Layout.preferredHeight: 50
                font.pixelSize: id_gp.font_info_pixel_size

                background: Rectangle {
                    color: button.down ? id_gp.btn_pressedBackground :
                            button.hovered ? id_gp.btn_hoverBackground : id_gp.btn_normalBackground
                    border.color: id_gp.btn_borderColor
                    radius: 10
                }

                // 使 Button 支持 hover 事件
                hoverEnabled: true

                // MouseArea 用于处理按下和松开事件
                MouseArea {
                    anchors.fill: parent
                    onPressed: button.background.color = id_gp.btn_pressedBackground
                    onReleased: button.background.color = button.hovered ? id_gp.btn_hoverBackground : id_gp.btn_normalBackground
                    onExited: button.background.color = id_gp.btn_normalBackground
                }

                onClicked: {
                    console.log("press butn")
                }
            }

            Rectangle {
                Layout.preferredWidth: 10
                opacity: 0
            }

        }
    }
}