//-----------------------------------------------------------------------------------------------------
// Fichier définissant un bouton de type Batterie sur la page d'accueil
// A priori, appelé depuis "home.qml"
//-----------------------------------------------------------------------------------------------------
import QtQuick 2.12


//=======================================================
// Ensemble du bouton
//=======================================================
Rectangle {
    id: bouton_batterie

    readonly property int largeur_bouton: batteries_grid.cellWidth - espace_colonnes_secondaires;
    readonly property int hauteur_bouton: batteries_grid.cellHeight - espace_lignes_secondaires;
    readonly property int rayon_bouton: 5
    readonly property double pourcentage_largeur_zone_affichage_nom: 0.85
    readonly property int seuil_haut: 75        // utilisé pour changer de couleur orange/vert
    readonly property int seuil_bas: 25         // utilisé pour changer de couleur rouge/orange

    width: largeur_bouton
    height: hauteur_bouton
    color: "transparent"                    // On ne peut pas mettre l'opacité sur celui-ci, sinon tous ses enfants sont aussi semi-transparents...


    //---------------------------------------------------------------------------------------
    // Bandeau latéral avec tension nominale :
    //---------------------------------------------------------------------------------------
    Image {
        id: bandeau_tension_batterie
        source: (model.Tension_nominale === 12) ? "/images/batterie_12v.png" : "/images/batterie_24v.png"
        sourceSize.height: parent.height
    }

    //---------------------------------------------------------------------------------------
    // Bouton dans son ensemble :
    //---------------------------------------------------------------------------------------
    Rectangle {
        anchors.fill: parent
        radius: rayon_bouton
        border.color: couleur_rouge
        border.width: (model.Etat_systeme === 0) ? 0 : 3
        color: shipheart_couleur_fond_bouton

        MouseArea {
            id: mouse_area_zone_parametres
            anchors.fill: parent
            width: largeur_bouton
            height: hauteur_bouton
            onClicked: {
                shipheart_clic();
                stackView.push("batterie.qml",
                               {
                                   "id_batterie": model.Cle_primaire,
                                   "flag_detail_batterie": true,
                                   "nom":model.Nom
                               })
            }
        }
    }

    //-------------------------------------------------------
    // Zone du nom (en haut à gauche) :
    //-------------------------------------------------------
    Rectangle {
        id: zone_nom
        x: bandeau_tension_batterie.width
        width: (largeur_bouton * pourcentage_largeur_zone_affichage_nom) - bandeau_tension_batterie.width;
        height: hauteur_bouton / 2;
        color: "transparent"

        Text {
            text: model.Nom
            anchors.fill: parent                                 // Permet que le texte occupe tout l'espace du parent (et que le centrage vertical qui suit fonctionne...)
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
            leftPadding: 10
            font.pixelSize: 15
            elide: Text.ElideRight
            font.weight: Font.Bold
            color: couleur_blanc_casse
        }
    }

    //-------------------------------------------------------
    // Zone de valeur absolue :
    //-------------------------------------------------------
    Rectangle {
        id: zone_valeur
        x: bandeau_tension_batterie.width
        y: hauteur_bouton / 2;
        width: (largeur_bouton * pourcentage_largeur_zone_affichage_nom) - bandeau_tension_batterie.width;
        height: hauteur_bouton / 2;
        color: "transparent"
        visible: (model.Etat_systeme === 0)

        Image {
            source: "/images/coin_bas_droite_rouge.png"
            sourceSize.height: 20
            anchors {
                bottom: parent.bottom
                right: parent.right
            }
            visible: (model.Etat_systeme === 0)     // SDIR #285
                     && (model.Etat !== 0)          // SDIR #285
        }

        Text {
           text: (model.Tension).toFixed(2) + " V";
           anchors {
               verticalCenter: parent.verticalCenter
               horizontalCenter: parent.horizontalCenter
           }
           font.pixelSize: 18
           font.bold: true
           color: couleur_blanc_casse
        }
    }

    //-------------------------------------------------------
    // Zone niveau relatif :
    //-------------------------------------------------------
    Rectangle {
        id: zone_niveau_relatif
        color: "transparent"                                    // Sinon, le fond du rectangle est blanc...
        x: largeur_bouton * pourcentage_largeur_zone_affichage_nom
        width: largeur_bouton * (1 - pourcentage_largeur_zone_affichage_nom);
        height: hauteur_bouton;
        radius: shipheart_rayon_bouton
        border.color: couleur_fond_bargraph_niveau_relatif()
        border.width: 1
        visible: (model.Etat_systeme === 0)

        Text {
            id:zone_texte_niveau_relatif
            text: (model.Niveau).toFixed(0) + " %";
            anchors.fill: parent                                 // Permet que le texte occupe tout l'espace du parent (et que le centrage vertical qui suit fonctionne...)
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 12
            font.bold: (model.Niveau < 10)           // soit < 10%
            color: couleur_texte_niveau_relatif()
        }

        Rectangle {
            id:zone_bargraph_niveau_relatif
            color: couleur_fond_bargraph_niveau_relatif()
            y: parent.height * (100 - model.Niveau) / 100
            width: parent.width;
            height: parent.height * model.Niveau / 100;
            radius: shipheart_rayon_bouton
        }
    }

    //----------------------------------------------------------
    function couleur_texte_niveau_relatif()
    {
        switch(model.Logique)
        {
            case 1: return((model.Niveau >= seuil_haut) ? couleur_rouge : ((model.Niveau >= seuil_bas) ? couleur_orange : couleur_green_yellow))
            case 0: return((model.Niveau >= seuil_haut) ? couleur_rouge : ((model.Niveau >= seuil_bas) ? couleur_green_yellow : couleur_rouge))
            default: return((model.Niveau >= seuil_haut) ? couleur_green_yellow : ((model.Niveau >= seuil_bas) ? couleur_orange : couleur_rouge))
        }
    }

    //----------------------------------------------------------
    function couleur_fond_bargraph_niveau_relatif()
    {
        switch(model.Logique)
        {
            case 1: return((model.Niveau >= seuil_haut) ? couleur_rouge_transparent : ((model.Niveau >= seuil_bas) ? couleur_orange_transparent : couleur_vert_transparent))
            case 0: return((model.Niveau >= seuil_haut) ? couleur_rouge_transparent : ((model.Niveau >= seuil_bas) ? couleur_vert_transparent : couleur_rouge_transparent))
            default: return((model.Niveau >= seuil_haut) ? couleur_vert_transparent : ((model.Niveau >= seuil_bas) ? couleur_orange_transparent : couleur_rouge_transparent))
        }
    }

}