/******************************************************************
Copyright © Deng Zhimao Co., Ltd. 1990-2030. All rights reserved.
* @projectName   tcpclient
* @brief         TcpClient.qml
* @author        Deng Zhimao
* @email         1252699831@qq.com
* @date          2020-06-31
*******************************************************************/
import QtQuick 2.9
import QtQuick.Window 2.2
import mytcpclient 1.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick 2.12
import QtQuick.VirtualKeyboard 2.2
import "../helpbutton"

Item {
    visible: false
    id: window
    property string netWorkInfo: ""
    property string connectSate : "请先与服务端连接"

    HelpMessages {
        anchors.fill: parent
        z: 105
        appIcon: WINStyle ? "" :  "qrc:/desktop/androidstyleicons/tcpclient.png"
        appName: "Tcp客户端"
        appVersion: "Version 1.0.0"
        subtoolText: "1.此软件为tcp客户端，点击聊天中的人物头像可获取本机的ip信息，可断开服务端的连接，清空聊天记录等。
2.输入服务器的ip地址与监听的端口，点击连接即可连接服务端，然后就可以互相发信息聊天！"
        versionText: "1.【Version 1.0.0 2020-10-06】。\n初始版本"
    }

    onVisibleChanged: {
        formState.state == 'right' ? formState.state = '' : formState.state = 'right'
    }

    Component.onCompleted: {
        mainListview.model.insert(mainListview.model.count,
                                  {"detail":"您好！我是TCP客户端小可爱，请输入服务端的IP与端口，再点击连接，即可连接到服务端，点击我头像可查看本地IP信息",
                                      "messageBg":"qrc:/tcpclient/images/rightMessagebg.png",
                                      "fatherMirroring":false,"childrenMirroring":false,
                                      "headPhotoImage":"qrc:/tcpclient/images/gril.jpg",
                                      "messBackground":"#b8fa99"})
        mainListview.currentIndex = mainListview.count - 1
        netWorkInfo = tcpclient.getLocalIpAddress()
        window.x = parent.width
    }
    Item {
        id: formState
        states: State {
            name: "right"
            PropertyChanges {
                target: window
                x: 0
            }
        }
        transitions: Transition {
            NumberAnimation {
                property: "x"
                easing.type: Easing.InOutQuart
                duration: 500
            }
        }
    }
    MyTcpclient{
        id: tcpclient
        onRecMessageChanged: {
            // listmodel.append({"detail":tcpclient.recMessage})
            mainListview.model.insert(mainListview.model.count,{"detail":tcpclient.recMessage,
                                          "messageBg":"qrc:/tcpclient/images/leftMessagebg.png",
                                          "fatherMirroring":true,"childrenMirroring":true,
                                          "headPhotoImage":"qrc:/tcpclient/images/boy.jpg",
                                          "messBackground":"#e3e3f8"})
            mainListview.currentIndex = mainListview.count - 1
        }
        onNewConnetChanged:{
            connectSate = "断开连接"
            mainListview.model.insert(mainListview.model.count,{"detail":tcpclient.newConnet,
                                          "messageBg":"qrc:/tcpclient/images/rightMessagebg.png",
                                          "fatherMirroring":false,"childrenMirroring":false,
                                          "headPhotoImage":"qrc:/tcpclient/images/gril.jpg",
                                          "messBackground":"#b8fa99"})
            mainListview.currentIndex = mainListview.count - 1
        }
    }

    ListView{
        add: Transition {
            NumberAnimation { properties: "x,y"; from: window.height; duration: 200 }
        }
        id: mainListview
        anchors.top: parent.top
        anchors.topMargin: 30
        anchors.bottom: bottomrect.top
        anchors.bottomMargin: 10
        anchors.left: parent.left
        anchors.right:parent.right
        highlightFollowsCurrentItem: true
        spacing: 30
        MouseArea{
            width: parent.width - 120
            height: parent.height
            anchors.centerIn: parent
            onClicked: textfield.focus = false
        }
        delegate: Component{
            Rectangle{
                id: message
                LayoutMirroring.enabled: fatherMirroring
                LayoutMirroring.childrenInherit: childrenMirroring
                height: label1.lineCount * 12 + 35
                implicitWidth: fitWidth(label1.text) > window.width * 0.2
                               ? Math.min(fitWidth(label1.text), window.width * 0.2) + 60 : label1.implicitWidth + 80
                color:"transparent"
                anchors.right: parent.right
                anchors.rightMargin: 0
                Image {
                    anchors.right: parent.right
                    width: 40
                    height: 40
                    id: headPhoto
                    source: headPhotoImage
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            onClicked: container.state == 'right' ? container.state = '' : container.state = 'right'
                        }
                    }
                }
                Rectangle{
                    id: myMessbg
                    width: parent.width - 60
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    color: messBackground
                    radius: 5
                    Item{
                        anchors.left: myMessbg.left
                        anchors.leftMargin: 10
                        anchors.right: myMessbg.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        Text{
                            id: label1
                            anchors.fill: parent
                            verticalAlignment: Text.AlignVCenter
                            wrapMode: fitWidth(label1.text) > window.width * 0.2 ? Text.WrapAnywhere:Text.NoWrap
                            text: detail
                            font.pixelSize: 12
                        }
                    }
                }
                BorderImage{
                    id: mebg
                    source:  messageBg
                    anchors.left: myMessbg.right
                    anchors.leftMargin: 0
                    width: 5
                    height: 10
                    anchors.verticalCenter: myMessbg.verticalCenter
                    smooth: true
                }
            }
        }
        model:ListModel{
            id:listmodel
            //            ListElement{
            //                detail:"请先连接服务器"
            //            }
        }
    }

    function fitWidth(text){
        return fontMetrics.advanceWidth(text)
    }

    function qmlsendMessage(){
        if(textfield.text != ""){
            //listmodel.append({"detail":textfield.text})
            mainListview.model.insert(mainListview.model.count,{"detail":textfield.text,
                                          "messageBg":"qrc:/tcpclient/images/rightMessagebg.png",
                                          "fatherMirroring":false,"childrenMirroring":false,
                                          "headPhotoImage":"qrc:/tcpclient/images/gril.jpg",
                                          "messBackground":"#b8fa99"})
            mainListview.currentIndex = mainListview.count - 1
            tcpclient.sendMessage(textfield.text)
        }
    }

    FontMetrics {
        id: fontMetrics
        //font.family: "Arial"
    }

    Rectangle{
        z: 55
        height: 40
        anchors.bottom: pannelbg.top
        //anchors.bottomMargin: bottomDistance
        id: bottomrect
        Row{
            Rectangle {
                height: bottomrect.height
                width: window.width * 0.4
                color: "transparent"
                Text {
                    id: ipText
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("IP地址:")
                    font.bold: true
                    font.pixelSize: 13
                    color: "white"
                }
                TextField{
                    id: ipTextfield
                    placeholderText: "ip"
                    height: bottomrect.height
                    anchors.verticalCenter: parent.verticalCenter
                    width: window.width * 0.15
                    anchors.left: ipText.right
                    font.pixelSize: 13
                    color: "white"
                    onFocusChanged: {
                        if(inputPanel.state == 'visible' )
                            container.state = ''
                    }
                    background: Rectangle{
                        color: "transparent"
                        Rectangle {
                            anchors.bottom: parent.bottom
                            width: parent.width
                            color: ipTextfield.focus ? "#27d7f0" : "gray"
                            height: ipTextfield.focus ? 2 : 1
                        }
                    }
                }
                Text {
                    id: port
                    anchors.left: ipTextfield.right
                    anchors.leftMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("端口:")
                    font.bold: true
                    font.pixelSize: 13
                    color: "white"
                }
                TextField{
                    id: portTextfield
                    font.pixelSize: 13
                    placeholderText: "port"
                    anchors.left: port.right
                    height: bottomrect.height
                    width: window.width * 0.05
                    color: "white"
                    anchors.verticalCenter: parent.verticalCenter
                    onFocusChanged: {
                        if(inputPanel.state == 'visible' )
                            container.state = ''
                    }
                    background: Rectangle{
                        color: "transparent"
                        Rectangle {
                            anchors.bottom: parent.bottom
                            width: parent.width
                            color: portTextfield.focus ? "#27d7f0" : "gray"
                            height: portTextfield.focus ? 2 : 1
                        }
                    }
                }
                Button{
                    anchors.left: portTextfield.right
                    anchors.leftMargin: 5
                    text:"连接"
                    height: bottomrect.height
                    width: window.width * 0.08
                    font.pixelSize: 13
                    onClicked: {
                        tcpclient.buttonConnectClicked(ipTextfield.text,portTextfield.text)
                    }
                }
            }

            TextField{
                id: textfield
                placeholderText: "输入要发消息内容"
                height: bottomrect.height
                width: window.width * 0.4
                Keys.enabled: true
                font.pixelSize: 13
                color: "white"
                Keys.onReturnPressed : qmlsendMessage()
                onFocusChanged: {
                    if(inputPanel.state == 'visible' )
                        container.state = ''
                }
                background: Rectangle{
                    color: "transparent"
                    Rectangle {
                        anchors.bottom: parent.bottom
                        width: parent.width
                        color: textfield.focus ? "#27d7f0" : "gray"
                        height: textfield.focus ? 2 : 1
                    }
                }
            }
            Rectangle{
                height: bottomrect.height
                width: window.width * 0.2
                color: "#55111111"
                Button{
                    anchors.fill: parent
                    text:"发送（或者按回车键）"
                    font.pixelSize: 13
                    onClicked: {
                        qmlsendMessage()
                    }
                }
            }
        }
    }
    Rectangle{
        z: 88
        id: pannelbg
        width: parent.width
        anchors.bottom: inputPanel.top
        height: inputPanel.state == "visible" ? 28 * window.height / 480 : 0
        color: "black"
    }
    InputPanel {
        id: inputPanel
        z: 88
        //x: -11
        y: window.height
        visible: parent.visible
        width: window.width
        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

    Item {
        id: container
        states: State {
            name: "right"
            PropertyChanges {
                target: grilInfo
                x: parent.width * (smallScreen ? 0.50 : 0.65)
            }
        }

        transitions: Transition {
            NumberAnimation {
                property: "x"
                easing.type: Easing.InOutQuart
                duration: 1000
            }
        }
    }
    Item {
        id: grilInfo
        z: 40
        width: parent.width * (smallScreen ? 0.50 : 0.35)
        height: parent.height
        x: parent.width
        Flickable {
            id: myflickable
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: parent.height + (smallScreen ? 208 : 20)
            Rectangle{
                anchors.fill: parent
                color: "#cc424242"
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        onClicked: container.state == 'right' ? container.state = '' : container.state = 'right'
                    }
                }
            }

            Image {
                id: boyID
                source: "qrc:/tcpclient/images/gril.jpg"
                width: 50
                height: 50
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.top: parent.top
                anchors.topMargin: 30
            }
            Text {
                id: juese
                anchors.left: boyID.right
                anchors.leftMargin: 20
                anchors.top: boyID.top
                text: qsTr("角色:TCP客户端")
                color: "white"
                font.bold: true
                font.pixelSize: 15
            }
            Text {
                id: idName
                text: qsTr("I  D:小可爱")
                lineHeightMode: Text.FixedHeight //设置行间距 以像素的方式设置
                lineHeight: 18 //行间距比例 最大 1
                anchors.left: juese.left
                anchors.top: juese.bottom
                anchors.topMargin: 5
                color: "#99eeeeee"
                font.bold: true
                font.pixelSize: 14
            }
            Text {
                anchors.top: boyID.bottom
                anchors.topMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter
                id: networkMess
                text: netWorkInfo
                color: "#28dcf7"
                font.bold: true
                font.pixelSize: 13
            }
            Button{
                id: refreshBtn
                anchors.top: networkMess.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                width: 40
                height: 40
                background: Rectangle{
                    color: "transparent"
                    Image {
                        //anchors.fill: parent
                        anchors.centerIn: parent
                        id: refresh
                        source: "qrc:/tcpclient/images/refresh.png"
                    }
                }
                onClicked: {
                    netWorkInfo = "正在读取本地网卡信息，请稍候..."
                    refreshAnima.running = true
                }
            }
            RotationAnimator {
                id: refreshAnima
                target: refreshBtn
                from: 0
                to: 360
                duration: 1000
                //loops: Animation.Infinite
                running: false
                onRunningChanged: {
                    if (running === false) {
                        from = refreshBtn.rotation;
                        to = from+360;
                    }
                }
                onStopped: {
                    netWorkInfo = tcpclient.getLocalIpAddress()
                }
            }
            Button{
                id: clearMessage
                anchors.top: refreshBtn.bottom
                //anchors.topMargin: -20
                anchors.horizontalCenter: parent.horizontalCenter
                width: 120
                height: 35
                background: Rectangle{
                    color: "transparent"
                    radius: 20
                    border.color: "#28dcf7"
                    border.width: 1
                    Text {
                        anchors.centerIn: parent
                        id: clearText
                        text: qsTr("清空所有聊天记录")
                        font.pixelSize: 13
                        color: clearMessage.pressed ? "white":"#28dcf7"
                    }
                }
                onClicked: {
                    if(mainListview.count != 0)
                        mainListview.model.clear()
                    mainListview.model.insert(mainListview.model.count,{"detail":"已经清空！",
                                                  "messageBg":"qrc:/tcpclient/images/rightMessagebg.png",
                                                  "fatherMirroring":false,"childrenMirroring":false,
                                                  "headPhotoImage":"qrc:/tcpclient/images/gril.jpg",
                                                  "messBackground":"#b8fa99"})
                    mainListview.currentIndex = mainListview.count - 1
                }
            }

            Button{
                id: disConetFromClient
                anchors.top: clearMessage.bottom
                anchors.topMargin: 10
                anchors.horizontalCenter: parent.horizontalCenter
                width: 120
                height: 35
                background: Rectangle{
                    color: "transparent"
                    radius: 20
                    border.color: "#28dcf7"
                    border.width: 1
                    Text {
                        anchors.centerIn: parent
                        id: disConetText
                        text: connectSate
                        color: disConetFromClient.pressed ? "white":"#28dcf7"
                        font.pixelSize: 13
                    }
                }
                onClicked: {
                    tcpclient.disConnect()
                    connectSate = "已断开连接"
                }
            }

        }
    }
}