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

import"fonctions.js" as Fonctions

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

    readonly property int largeur_bouton: reservoirs_grid.cellWidth - espace_colonnes_secondaires;
    readonly property int hauteur_bouton: reservoirs_grid.cellHeight - espace_lignes_secondaires;
    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
    radius: shipheart_rayon_bouton
    color: "transparent"                    // On ne peut pas mettre l'opacité sur celui-ci, sinon tous ses enfants sont aussi semi-transparents...

    //-------------------------------------------------------
    // Bouton dans son ensemble :
    //-------------------------------------------------------
    Rectangle {
        width: largeur_bouton;
        height: hauteur_bouton;
        color: shipheart_couleur_fond_bouton
        radius: shipheart_rayon_bouton
        border.color: couleur_rouge
        border.width: (model.Etat_systeme === 0) ? 0 : 3

        MouseArea {
            anchors.fill: parent
            width: largeur_bouton;
            height: hauteur_bouton;
            onClicked: {
                shipheart_clic();
                stackView.push("reservoir.qml",
                               {
                                   "id_reservoir": model.Cle_primaire,
                                   "nom_reservoir": model.Nom,
                                   "niveau": model.Niveau,
                                   "capacite": model.Capacite,
                                   "id_famille": model.ID_Famille
                               })
            }
        }
    }

    //-------------------------------------------------------
    // Zone du nom (en haut à gauche) :
    //-------------------------------------------------------
    Rectangle {
        id: zone_nom
        width: largeur_bouton * pourcentage_largeur_zone_affichage_nom;
        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 niveau absolu :
    //-------------------------------------------------------
    Rectangle {
        id: zone_niveau_absolu
        y: hauteur_bouton / 2;
        width: largeur_bouton * pourcentage_largeur_zone_affichage_nom;
        height: hauteur_bouton / 2;
        color: "transparent"
        visible: (model.Etat_systeme === 0)

        //-------------------------
        // Triangle orange d'alerte :
        Image {
            source: "/images/coin_bas_droite_orange.png"
            sourceSize.height: 20
            anchors {
                bottom: parent.bottom
                right: parent.right
            }
            visible: (model.Etat_systeme === 0)     // SDIR #285
                     && (model.Etat === 1)          // SDIR #285
        }

        //-------------------------
        // Triangle rouge d'alarme :
        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 === 2)          // SDIR #285
        }

        //-------------------------
        // Contenance actuelle :
        Text {
            id: niveau_absolu
            text: Fonctions.conversion_volume(((model.Niveau / 100) * model.Capacite), shipheart_unite_volume, shipheart_unite_volume_symbole, 0);
            anchors {
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
            }
            font.pixelSize: 18
            font.bold: true
            color: couleur_blanc_casse

        }

        //-------------------------
        // Capacité :
        Text {
            id: capacite
            text: "/ " + Fonctions.conversion_volume(model.Capacite, shipheart_unite_volume, shipheart_unite_volume_symbole, 0);
            anchors {
                left: niveau_absolu.right
                leftMargin: 20
                bottom: niveau_absolu.bottom
            }
            font.pixelSize: 15
            color: couleur_gris_moyen
        }
    }

    //-------------------------------------------------------
    // 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))
        }
    }
}