import QtQuick 2.6

Rectangle {
    id: painel
    visible: true
    width: 800
    height: 600
    color: "darkBlue"

    property int margins: 10

    property int senhaAtual: 1
    property int numGuiches: 10

    function chamaSenha() {
        senhaAtual++
        var guicheAtual = Math.round(Math.random() * numGuiches)

        senha.text = "A" + ("000" + senhaAtual).slice(-3)
        guiche.text = guicheAtual

        modeloAnteriores.append({senha: senha.text, guiche: guiche.text})

        // remove any exceeding items
        if (modeloAnteriores.count > 9) {
            modeloAnteriores.remove(0, 1)
        }
    }

    Rectangle {
        id: painelSenha

        anchors {
            top: parent.top
            left: parent.left
            bottom: parent.verticalCenter
            bottomMargin: 5
            right: parent.horizontalCenter
            margins: painel.margins
        }
        color: "orange"

        Column {
            anchors.fill: parent
            spacing: painel.margins

            Text {
                color: "darkBlue"
                font.pointSize: 40
                text: "SENHA"
                horizontalAlignment: Text.AlignHCenter
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }

            Text {
                id: senha
                color: "darkBlue"
                font.pointSize: 100
                text: "A001"
                horizontalAlignment: Text.AlignHCenter
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
        }
    }

    Rectangle {
        id: painelGuiche

        anchors {
            top: parent.verticalCenter
            topMargin: margins / 2
            left: parent.left
            leftMargin: margins / 2
            bottom: parent.bottom
            right: parent.horizontalCenter
            margins: painel.margins
        }
        color: "orange"

        Column {
            anchors.fill: parent
            spacing: painel.margins

            Text {
                color: "darkBlue"
                font.pointSize: 40
                text: "GUICHÊ"
                horizontalAlignment: Text.AlignHCenter
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }

            Text {
                id: guiche
                color: "darkBlue"
                font.pointSize: 100
                text: "1"
                horizontalAlignment: Text.AlignHCenter
                anchors {
                    left: parent.left
                    right: parent.right
                }
            }
        }
    }

    ListModel {
        id: modeloAnteriores
        ListElement { senha: "A001"; guiche: "1" }
    }

    Rectangle {
        id: painelAnteriores

        property int fontSize: 30

        anchors {
            top: parent.top
            left: parent.horizontalCenter
            bottom: parent.bottom
            right: parent.right
            margins: painel.margins
        }
        color: "orange"

        Column {
            id: viewAnteriores
            anchors.fill: parent

            // cabeçalho
            Item {
                anchors {
                    left: parent.left
                    right: parent.right
                }
                height: childrenRect.height

                Text {
                    anchors {
                        left: parent.left
                        top: parent.top
                    }
                    width: parent.width / 2
                    text: "SENHA"
                    color: "darkBlue"
                    font.pointSize: painelAnteriores.fontSize
                    horizontalAlignment: Text.AlignHCenter
                }

                Text {
                    anchors {
                        right: parent.right
                        top: parent.top
                    }
                    width: parent.width / 2
                    text: "GUICHÊ"
                    color: "darkBlue"
                    font.pointSize: painelAnteriores.fontSize
                    horizontalAlignment: Text.AlignHCenter
                }
            }

            Repeater {
                model: modeloAnteriores

                Item {
                    anchors {
                        left: parent.left
                        right: parent.right
                    }
                    height: childrenRect.height

                    Text {
                        anchors {
                            left: parent.left
                            top: parent.top
                        }
                        width: parent.width / 2
                        text: model.senha
                        color: "darkBlue"
                        font.pointSize: painelAnteriores.fontSize
                        horizontalAlignment: Text.AlignHCenter
                    }

                    Text {
                        anchors {
                            right: parent.right
                            top: parent.top
                        }
                        width: parent.width / 2
                        text: model.guiche
                        color: "darkBlue"
                        font.pointSize: painelAnteriores.fontSize
                        horizontalAlignment: Text.AlignHCenter
                    }
                }
            }
        }

        // desenha uma linha dividindo os textos
        Rectangle {
            color: "darkBlue"
            width: painel.margins
            anchors {
                top: parent.top
                bottom: parent.bottom
                horizontalCenter: parent.horizontalCenter
            }
        }
    }

    // um botão jaguara só pra chamar próxima senha
    Rectangle {
        radius: width / 2
        width: 100
        height: width

        color: "red"
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: chamaSenha()
        }
    }

}