Vue.component('dl_indicadores',{
  data: function () {
    return {
  empresa: "Indicadores Red Saneamiento",
  abro_torta: true,
  torta:false,
  torta_nombre: 'Conexiones a limpiar',
  logo: 'recursos/logos/icon-384x384.png'
    }
},	
template: /*html*/`
  <div>
    <!-- ENCABEZADO -->
        <div class="column col-xs middle-xs center-xs">
        <div class="row center-xs middle-xs" >
            <img v-bind:src=logo style="width:30px;height:30px">
        </div>
        <div class="row center-xs middle-xs">
            <b><p style="color:green">{{empresa}}</p></b>
        </div>
        <b-button  icon-right="refresh" class="p-2 m-1" v-on:click="actualizo_indicadores()" rounded  type="is-warning">
        </b-button>
        </div>
    <!-- FIN ENCABEZADO -->

    <!-- Contenido de gráfica - se abre con seleccion del usurior -->
        <div class="box m-3 p-0 col-xs middle-xs center-xs" v-if="abro_torta == false" style="background-color:grey" v-on:click="cierro_grafico()">
            <div class="row m-1 p-1">
                <div class="column col-11 top-xs start-xs ml-4 p-1" >
                    <b><p style="color:white;font-weight:normal;font-family:Arial;text-align:left;font-size:20px"">Indicador: {{torta_nombre}}</p></b>
                </div>  
                <div class="column col-1 end-xs top-xs mt-0 pt-0" >
                    <b><p style="color:#555654;font-weight:normal;font-family:Arial;text-align:right;font-size:20px">x</p></b>
                </div>  
            </div>   
        </div>
        <div id="chart">
        </div> 
    <!-- FIN Contenido de gráfica - se abre con seleccion del usurior -->

 
    <!-- Lista de indicadores -->
    <div v-for="item in $store.state.indicadores">
           <template>
                <section>
                  <b-collapse 
                      class="card m-1 p-1" 
                      animation="slide" 
                      aria-id="contentIdForA11y3"
                      :open="false">
                      <template #trigger="props">
                          <div
                              class="card-header is-warning"
                              role="button"
                              aria-controls="contentIdForA11y3"
                              :aria-expanded="props.open">
                              <p class="card-header-title" v-bind:style="{color: item.color}">
                                  {{item.nombre}}
                              </p>
                              <span>
                              <b-tooltip label="Ver gráfico" multilined position="is-left" type="is-info is-light">
                                  <b-button  class="mt-2 p-1" v-on:click="abro_grafico(item.nombre)" type="is-info" rounded outlined size="is-small"  icon-left="chart-bar" style="width:40px">
                                  </b-button>
                              </b-tooltip>    
                              </span>

                              <a class="card-header-icon">
                                  <b-icon
                                      :icon="props.open ? 'menu-down' : 'menu-up'">
                                  </b-icon>
                              </a>
                          </div>
                      </template>
                      <div class="card-content">
                          <div class="content">
                          <template>
                          <b-table 
                          :data="item.datos" 
                          :columns="item.columns" 
                          :striped="true"
                          :default-sort="['item.columns.cantidad', 'desc']">
                          </b-table>
                      </template>
                          </div>
                      </div>

                  </b-collapse>
              </section>
          </template>
    </div>
    <!-- FIN Lista de indicadores -->


    <!-- PIE -->
      <div class="row center-xs middle-xs m-2" >
          <b-button  v-on:click="$store.state.layout_visible = 'layout_menu_principal'" type="is-warning" rounded   icon-left="cog-outline"  style="width:200px">
             Volver
          </b-button>
      </div>
    <!-- FIN DE PIE -->


</div>
`,
methods:
{
  abro_grafico(nombre){
    this.abro_torta = false;  
    var columnas = [];
    for(var i = 0;i < store.state.indicadores.length;i++)
    {
        if(nombre == store.state.indicadores[i].nombre)
        {
            for (var j=0;j<store.state.indicadores[i].datos.length;j++)
            {
            var elemento = [];
            elemento.push(store.state.indicadores[i].datos[j].clase);
            elemento.push(store.state.indicadores[i].datos[j].cantidad);
            columnas.push(elemento);
            }

        }
    }
    const chart = c3.generate({             
                                    bindto: '#chart',
                                    data: {
                                                    columns: columnas,
                                                    type : 'pie'
                                                    }
    });
    this.torta=chart; 
    this.torta_nombre = nombre;                                                
     },
     cierro_grafico(){
        this.torta.destroy();
        this.abro_torta = true;
    },
    actualizo_indicadores(){
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
          //consulto base de datos
          const cargando_algo =  this.$buefy.loading.open({containter: null});
          var este = this;
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/indicadores.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
                        store.state.indicadores = JSON.parse(this.response);
                        cargando_algo.close();
             };
              xhr.send();
            }
            else
            {
              this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
            }
   }
},//cierro methods
	

mounted: function () {
    if (store.state.indicadores.length == 0)
    {
    app.chequeo_conexion();
    if (store.state.hayconexion == true) { // si hay conexion........................................................................
      //consulto base de datos
      const cargando_algo =  this.$buefy.loading.open({containter: null});
      var este = this;
          var getUrl = window.location;
          var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
          var phpfile = baseUrl + '/php/indicadores.php';
          var xhr = new XMLHttpRequest();	
          xhr.open('POST',phpfile,true);
          xhr.onload = function() {
                    store.state.indicadores = JSON.parse(this.response);
                    cargando_algo.close();
         };
          xhr.send();
        }
        else
        {
          this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
        }

    }
}




})