import QtQuick
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
/*
登录界面
*/
Rectangle {
    FontLoader {
        id: alibaba
        source: "qrc:/components/font/Alibaba-PuHuiTi-Bold.ttf"
    }

    FontLoader {
        id: fontawesome
        source: "qrc:/components/font/fontawesome-webfont.ttf"
    }

    FontLoader {
        id: digtalFont
        source: "qrc:/components/font/fontawesome-webfont.ttf"
    }

    id: loginForm
    width: parent.width
    height: parent.height
    color: 'transparent'
    //11-15
    property StackView stack: null
    property int flag: 0
    property bool shiftEnabled: false
    Component.onCompleted: {
        appModel.loadUser()
    }

    Rectangle {
        id: loginFormRect
        width: parent.width
        height: 500
        anchors.top: parent.top
        anchors.topMargin: 250
        color: 'transparent'

        Image {
            id: loginBg
            width: 960
            height: 500
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: 'qrc:/images/login_bg.png'
        }

        Rectangle {
            id: inputColumn
            width: 960
            height: 500
            anchors.top: parent.top
            anchors.topMargin: 150
            anchors.fill: parent
            color: 'transparent'

            TextField {
                id: loginUsername
                width: 450
                height: 50
                anchors.horizontalCenter: parent.horizontalCenter
                color: mainTextColor
                font.pointSize: 22
                font.family: fontawesome.name
                leftPadding: 50
                text: appModel.Account
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        flag = 2
                        passwordInputContainer.visible = true
                        logInText.color = "#00FF33"
                        passWordText.color = mainAppColor
                    }
                }
                background: Rectangle {
                    implicitWidth: 50
                    implicitHeight: 50
                    radius: implicitHeight / 2
                    color: "transparent"
                    Text {
                        id:logInText
                        text: "\uf007"
                        font.pointSize: 24
                        font.family: fontawesome.name
                        color: mainAppColor
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        leftPadding: 10
                        //visible:false
                    }
                    Rectangle {
                        width: parent.width - 10
                        height: 1
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.bottom: parent.bottom
                        color: mainTextColor
                    }
                    Rectangle {
                        width: 25
                        height: 25
                        anchors.left: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        color: 'transparent'
                        Text {
                            anchors.fill: parent
                            text: "\uf05c"
                            font.pointSize: 20
                            font.family: fontawesome.name
                            color: "#003399"
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                loginUsername.text = ''
                            }
                        }
                    }
                    Image{
                        anchors.left: parent.right
                        anchors.leftMargin:30
                        anchors.verticalCenter: parent.verticalCenter
                        source:'qrc:/images/keyboard.png'
                        visible:false
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                              flag = 2
                              passwordInputContainer.visible = true
                              
                            }
                        }
                    }
                }
            }

            TextField {
                id: loginPassword
                anchors.top: loginUsername.bottom
                anchors.topMargin: 20
                width: 450
                height: 50
                anchors.horizontalCenter: parent.horizontalCenter
                color: mainTextColor
                font.pointSize: 22
                font.family: fontawesome.name
                leftPadding: 50
                echoMode: TextField.Password
                text: appModel.Password
                onAccepted: loginUser(loginUsername.text, loginPassword.text)
                Keys.enabled: true
                Keys.onEnterPressed: console.log("enter")
                //11-15
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        flag = 1
                        passwordInputContainer.visible = true
                        passWordText.color = "#00FF33"
                        logInText.color = mainAppColor
                    }
                }

                background: Rectangle {
                    implicitWidth: 50
                    implicitHeight: 50
                    radius: implicitHeight / 2
                    color: "transparent"
                    Text {
                    //11-15
                        id:passWordText
                        text: "\uf023"
                        font.pointSize: 24
                        font.family: fontawesome.name
                        color: mainAppColor
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        leftPadding: 10
                    }
                    Rectangle {
                        width: parent.width - 10
                        height: 1
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.bottom: parent.bottom
                        color: mainTextColor
                    }
                    //11-15
                    Rectangle {
                        width: 25
                        height: 25
                        anchors.left: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        color: 'transparent'
                        Text {
                            anchors.fill: parent
                            text: "\uf05c"
                            font.pointSize: 20
                            font.family: fontawesome.name
                            color: "#003399"
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                loginPassword.text = ''
                            }
                        }
                    }
                    Image{
                        anchors.left: parent.right
                        anchors.leftMargin:30
                        anchors.verticalCenter: parent.verticalCenter
                        source:'qrc:/images/keyboard.png'
                        visible:false
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                              flag = 1
                              passwordInputContainer.visible = true
                            }
                        }
                    }
                }
            }

            
            Rectangle {
                id: passwordInputContainer
                visible:false
                anchors.top: loginPassword.bottom
                anchors.topMargin: 210
                anchors.left: loginPassword.left
                anchors.leftMargin: 30
                color: "transparent"
                property var keysNumberCase: [
                    "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Del"
                ]
                property var keysFirstLowerCase: [
                    "q", "w", "e", "r", "t", "y", "u", "i", "o", "p","[","]"
                ]
                property var keysFirstUpperCase: [
                    "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P","{","}"
                ]
                property var keysSecondLowerCase: [
                    "a", "s", "d", "f", "g", "h", "j", "k", "l",";","Shift"
                ]
                property var keysSecondUpperCase: [
                    "A", "S", "D", "F", "G", "H", "J", "K", "L",":","Shift"
                ]
                property var keysThirdLowerCase: [
                    "z", "x", "c", "v", "b", "n", "m", ",", ".", "/"
                ]
                property var keysThirdUpperCase: [
                    "Z", "X", "C", "V", "B", "N", "M", "<", ">", "?"
                ]

                GridLayout {
                    id:gridNumber
                    anchors.left: passwordInputContainer.left
                    anchors.leftMargin: 0
                    columns: 13
                    Repeater {
                        model: passwordInputContainer.keysNumberCase
                        Button {
                            text: modelData
                            font{
                                family:"Cambria"
                                pointSize:20
                            }
                            background: Item {
                                Rectangle {
                                    radius:3
                                    color: "steelblue" // 设置按钮背景色
                                    width: parent.width
                                    height: parent.height
                                }
                            }
                            onClicked: {
                                if (modelData === "Del") {
                                    if (flag===1)
                                        loginPassword.text = loginPassword.text.substring(0, loginPassword.text.length - 1);
                                    else if (flag===2) 
                                        loginUsername.text = loginUsername.text.substring(0, loginUsername.text.length - 1);
                                } 
                                else if (modelData === "Shift") {
                                    shiftEnabled = !shiftEnabled;
                                } 
                                else {
                                    if(flag===1)
                                        loginPassword.text += modelData;
                                    else if(flag===2)
                                        loginUsername.text += modelData;
                                }
                            }
                        }
                    }
                }
                GridLayout {
                    id:gridFirst
                    visible:ture
                    anchors.top: gridNumber.bottom
                    anchors.topMargin: 5
                    anchors.left: gridNumber.left
                    anchors.leftMargin: 20
                    columns: 13
                    Repeater {
                        model: shiftEnabled ? passwordInputContainer.keysFirstUpperCase : passwordInputContainer.keysFirstLowerCase
                        Button {
                            font{
                                family:"Cambria"
                                pointSize:20
                            }
                            text: modelData
                            background: Item {
                                Rectangle {
                                    radius:3
                                    color: "steelblue" // 设置按钮背景色
                                    width: parent.width
                                    height: parent.height
                                }
                            }
                            onClicked: {
                                if (modelData === "Del") {
                                    if (flag===1)
                                        loginPassword.text = loginPassword.text.substring(0, loginPassword.text.length - 1);
                                    else if (flag===2) 
                                        loginUsername.text = loginUsername.text.substring(0, loginUsername.text.length - 1);
                                } 
                                else if (modelData === "Shift") {
                                    shiftEnabled = !shiftEnabled;
                                } 
                                else {
                                    if(flag===1)
                                        loginPassword.text += modelData;
                                    else if(flag===2)
                                        loginUsername.text += modelData;
                                }
                            }
                        }
                    }
                }
                GridLayout {
                    id:gridSecond
                    visible:true
                    anchors.top: gridFirst.bottom
                    anchors.topMargin: 5
                    anchors.left: gridFirst.left
                    anchors.leftMargin: 20
                    columns: 13
                    Repeater {
                        model: shiftEnabled ? passwordInputContainer.keysSecondUpperCase : passwordInputContainer.keysSecondLowerCase
                        Button {
                            font{
                                family:"Cambria"
                                pointSize:20
                            }
                            text: modelData
                            background: Item {
                                Rectangle {
                                    radius:3
                                    color: "steelblue" // 设置按钮背景色
                                    width: parent.width
                                    height: parent.height
                                }
                            }
                            onClicked: {
                                if (modelData === "Del") {
                                    if (flag===1)
                                        loginPassword.text = loginPassword.text.substring(0, loginPassword.text.length - 1);
                                    else if (flag===2) 
                                        loginUsername.text = loginUsername.text.substring(0, loginUsername.text.length - 1);
                                } 
                                else if (modelData === "Shift") {
                                    shiftEnabled = !shiftEnabled;
                                } 
                                else {
                                    if(flag===1)
                                        loginPassword.text += modelData;
                                    else if(flag===2)
                                        loginUsername.text += modelData;
                                }
                            }
                        }
                    }
                }
                GridLayout {
                    id:gridThird
                    visible:true
                    anchors.top: gridSecond.bottom
                    anchors.topMargin: 5
                    anchors.left: gridSecond.left
                    anchors.leftMargin: 20
                    columns: 13
                    Repeater {
                        model: shiftEnabled ? passwordInputContainer.keysThirdUpperCase : passwordInputContainer.keysThirdLowerCase
                        Button {
                            font{
                                family:"Cambria"
                                pointSize:20
                            }
                            text: modelData
                            background: Item {
                                Rectangle {
                                    radius:3
                                    color: "steelblue" // 设置按钮背景色
                                    width: parent.width
                                    height: parent.height
                                }
                            }
                            onClicked: {
                                if (modelData === "Del") {
                                    if (flag===1)
                                        loginPassword.text = loginPassword.text.substring(0, loginPassword.text.length - 1);
                                    else if (flag===2) 
                                        loginUsername.text = loginUsername.text.substring(0, loginUsername.text.length - 1);
                                } 
                                else if (modelData === "Shift") {
                                    shiftEnabled = !shiftEnabled;
                                } 
                                else {
                                    if(flag===1)
                                        loginPassword.text += modelData;
                                    else if(flag===2)
                                        loginUsername.text += modelData;
                                }
                            }
                        }
                    }
                }
            }

            CButton {
                id: resultButton
                anchors.top: loginPassword.bottom
                anchors.topMargin: 50
                anchors.horizontalCenter: parent.horizontalCenter
                textHeight: 50
                fontHeight: 0.4
                width: 450
                height: 50
                color: pressed ? textClickedColor : mainAppColor
                text: "登 录"
                onClicked:{
                            
                            loginUser(loginUsername.text, loginPassword.text)                            
                            //readThread.open("desktop")
                            
                          }
            }
        }
    }
      
}