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: sharedData.font_info_pixel_size
            }


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

            Rectangle {
                Layout.fillWidth: true
                opacity: 0
            }

            Button {
                id: id_button_refresh_portlist
                text: "shuaxin"
                Layout.preferredWidth: 100
                Layout.preferredHeight: 40
                font.pixelSize: sharedData.font_info_pixel_size

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

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

                // MouseArea 用于处理按下和松开事件
                MouseArea {
                    anchors.fill: parent
                    onPressed: id_button_refresh_portlist.background.color = sharedData.btn_pressedBackground
                    onReleased: id_button_refresh_portlist.background.color = id_button_refresh_portlist.hovered ? sharedData.btn_hoverBackground : sharedData.btn_normalBackground
                    onExited: id_button_refresh_portlist.background.color = sharedData.btn_normalBackground
                    onClicked: {
                        console.log("clear all port")
                        id_combox_port_list.model.clear()
                        id_esp32upperwaper.GetPortNameList();
                    }
                }
            }

            ComboBox {
                id:id_combox_port_list
                model: protname_list_model
                Layout.preferredWidth: 100
                Layout.preferredHeight: 40
                background: Rectangle {
                    color: sharedData.btn_normalBackground
                    border.color: sharedData.btn_borderColor
                    radius: 10
                }
                font.pixelSize: sharedData.font_info_pixel_size
            }

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

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

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

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

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

            Rectangle {
                Layout.preferredWidth: 10
                opacity: 0
            }

        }
    }
}