import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.0


Item {
    id: element
//    width: parent.width - 80
//    height: parent.height
    width: 800
    height: 600
    property alias textEditFontfamily: textEdit.font.family
    visible: true

    ColorAnimation {
        from: "white"
        to: "black"
        duration: 200
    }
    Rectangle{
        color: "#aeaeae"
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        scale: 1
        transformOrigin: Item.Center
        Column {
            anchors.fill: parent
            spacing: 6
            width: parent.width
            height: parent.height
            RowLayout{

                spacing: 5

                Label {
                    id: label6
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    text: qsTr("打开端口: ")
                    Layout.preferredHeight: 40
                    renderType: Text.QtRendering
                    Layout.preferredWidth: 125
                    wrapMode: Text.NoWrap
                    font.pointSize: 20
                }
                TextEdit {
                    id: textEdit
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    width: 233
                    height: 40
                    text: qsTr("9001")
                    font.italic: false
                    font.bold: true
                    Layout.columnSpan: 2
                    Layout.preferredHeight: 33
                    Layout.preferredWidth: 233
                    selectionColor: "#f0f0f1"
                    cursorVisible: true
                    font.pixelSize: 20
                }

            }
            RowLayout{
                spacing: 5

                Label {
                    id: label7
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    text: qsTr("协议选择: ")
                    Layout.preferredHeight: 40
                    renderType: Text.QtRendering
                    Layout.preferredWidth: 125
                    wrapMode: Text.NoWrap
                    font.pointSize: 20
                }

                ComboBox {
                    id: comboBox1
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    width: 143
                    height: 40

                    model:[
                        "udp",
                        "tcp"
                    ]
                }
                RadioButton {
                    id: radioButton
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    width: 138
                    height: 41
                    text: qsTr("websocket")
                    checkable:  true
                    checked: true
                    onCheckableChanged: {
                        console.log(radioButton.checkable)
                    }

                    onClicked:{
                        if(radioButton.checked == true){
                             radioButton.checked = false
                        }else{
                            radioButton.checked = true
                        }

                    }
                }
            }
            RowLayout{
                spacing: 5


                Label {
                    id: label8
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    text: qsTr("客户端/服务端地址: ")
                    Layout.preferredHeight: 40
                    renderType: Text.QtRendering
                    wrapMode: Text.NoWrap
                    font.pointSize: 20
                }

                TextEdit {
                    id: hostEdit
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    width: 233
                    height: 40
                    text: qsTr("127.0.0.1")
                    font.italic: false
                    font.bold: true
                    Layout.columnSpan: 2
                    Layout.preferredHeight: 33
                    Layout.preferredWidth: 233
                    selectionColor: "#f0f0f1"
                    cursorVisible: true
                    font.pixelSize: 20
                }
            }
            RowLayout{
                spacing: 5
                Button {
                    id: button
                    Layout.leftMargin: 20
                    Layout.topMargin: 20
                    width: 128
                    height: 52
                    text: qsTr("打开网口")

                }
            }


        }
    }
}