Vue.component('dl_tipologias',{
    data: function () {
            return {
                id: 0,
                elemento: '',
                codigo: '',
                descripcion: '',
                diagrama: '',
                id_tipo: 0,
                tipo_de_elemento: 'Tipo de Tramo',
                tipo_de_modificacion: 'Modificar',
                tipo_accion: '',
                codigo_seleccionado: 'SD',
                logo: 'recursos/logos/icon-384x384.png'
            }
        },	
    template: //html 
    `
    <div>
    <!--ENCABEZADO DE MENÚ INICIAL - IMAGEN CON LOGO Y TEXTO DESCRIPTIVO DE EMPRESA -->
            <div class="row">
                        <b-button class="ml-5 mt-2 mb-2 pl-8 p-2" rounded style="width:110px;float:left" @click="$store.state.layout_visible = 'layout_menu_principal'"  type='is-danger' icon-right="backburger" >
                        Volver   
                        </b-button>
                       
                        <b-select  v-model="tipo_de_elemento" placeholder="Tipo de Tramo" class="ml-5 mt-2 mb-2 pl-5 p-2">
                            <option value = "Tipo de Tramo">Tipo de Tramo</option>
                            <option value = "Tipo de Seccion">Tipo de Seccion</option>
                            <option value = "Tipo de Punto Singular">Tipo de Punto Singular</option>
                            <option value = "Tipo de Captacion">Tipo de Captacion</option>                                        
                            <option value = "SubTipo de Captacion">SubTipo de Captacion</option>                                        
                            <option value = "Tipo de conexion de Captacion">Tipo de conexion de Captacion</option>                                        
                        </b-select>                        
                        
                        <b-button class="ml-5 mt-2 mb-2 pl-8 p-2" rounded style="width:150px;float:right" @click="mostrar_estadisticas_tipos()"  type='is-success' icon-right="format-list-checkbox" >
                        Estadísticas   
                        </b-button>
            </div>  

            <form action="">

                <div class="modal-card" style="width: auto" v-if="tipo_de_elemento != 'Tipo de Seccion' && tipo_de_elemento != 'SubTipo de Captacion'">
                    <header class="modal-card-head">
                        <p class="modal-card-title" style="color:green">{{tipo_de_elemento}}</p>
                        <b-button style="margin-left:1rem;width:220px" v-on:click="nuevo_tipo()" type="is-warning" rounded  icon-left="playlist-plus">
                        Agregar tipo
                        </b-button>
                    </header>
                    <section class="modal-card-body">
                        <div class="box m-0 p-0"  v-for="(value, key) in adm_tipos_elemento">
                                        <div class="box m-0 p-0">
                                            <div class="columns m-0 p-0">
                                            <div class="column is-2">
                                                <b-tooltip label="Eliminar tipo" multilined position="is-right" type="is-danger is-light">
                                                <b-button v-if="value.id > 0" class="m-1" style="width:40px" @click.native="borrar_tipo(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                                </b-tooltip>  
                                                <b-tooltip label="Modificar tipo" multilined position="is-right" type="is-warning is-light">
                                                <b-button v-if="value.id > 0" class="m-1" style="width:40px" @click.native="modificar_tipo(key)" type="is-warning"  icon-right="playlist-edit"></b-button>
                                                </b-tooltip>  
                                            </div> 
                                            <div class="column is-6 bg-white rounded m-2 p-2"><b>Id:</b>{{value.id}}<br><b>Codigo:</b>{{value.codigo}}<br><b>Descripcion:</b>{{value.descripcion}}</div>
                                            </div>
                                            <div class="box m-2 p-2" v-bind:style="{ backgroundColor: value.color}">
                                            </div>
                                            <div class="row m-2 p-2" v-if="value.diagrama != ''">
                                            <b-image  :src="value.diagrama" alt="" ></b-image>
                                            </div>
                                        </div>
                        </div>
                    </section>
                    <footer class="modal-card-foot">
                    </footer>
                </div>



                <div class="modal-card" style="width: auto" v-if="tipo_de_elemento == 'SubTipo de Captacion'">
                <header class="modal-card-head">
                    <p class="modal-card-title" style="color:green">{{tipo_de_elemento}}</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="nuevo_tipo()" type="is-warning" rounded  icon-left="playlist-plus">
                    Agregar tipo
                    </b-button>
                </header>
                <section class="modal-card-body">
                    <div class="box m-0 p-0"  v-for="(value, key) in adm_clases_elemento">
                                    <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                            <div class="column is-2">
                                                <b-tooltip label="Eliminar tipo" multilined position="is-right" type="is-danger is-light">
                                                <b-button v-if="value.id > 0" class="m-1" style="width:40px" @click.native="borrar_tipo(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                                </b-tooltip>  
                                                <b-tooltip label="Modificar tipo" multilined position="is-right" type="is-warning is-light">
                                                <b-button v-if="value.id > 0" class="m-1" style="width:40px" @click.native="modificar_tipo(key)" type="is-warning"  icon-right="playlist-edit"></b-button>
                                                </b-tooltip>  
                                            </div> 
                                            <div class="column bg-white rounded m-2 p-2"><b>Id:</b>{{value.id}}<br><b>Codigo:</b>{{value.codigo}}<br><b>Descripcion:</b>{{value.descripcion}}<br><b>Id_Tipo:</b>{{value.id_tipo}}</div>
                                            </div>
                                            <div class="box m-2 p-2" v-bind:style="{ backgroundColor: value.color}">
                                            </div>
                                        <div class="row m-2 p-2" v-if="value.diagrama != ''">
                                        <b-image  :src="value.diagrama" alt="" ></b-image>
                                        </div>
                                        </div>
                    </div>
                </section>
                <footer class="modal-card-foot">
                </footer>
            </div>


            <div class="modal-card" style="width: auto" v-if="tipo_de_elemento == 'Tipo de Seccion'">
            <header class="modal-card-head">
                <p class="modal-card-title" style="color:green">{{tipo_de_elemento}}</p>
                <b-button style="margin-left:1rem;width:220px" v-on:click="nuevo_tipo()" type="is-warning" rounded  icon-left="playlist-plus">
                Agregar tipo
                </b-button>
            </header>
            <section class="modal-card-body">
                <div class="box m-0 p-0"  v-for="(value, key) in adm_clases_elemento">
                                <div class="box m-0 p-0">
                                    <div class="columns m-0 p-0">
                                    <div class="column is-2">
                                        <b-tooltip  label="Eliminar tipo" multilined position="is-right" type="is-danger is-light">
                                        <b-button  v-if="value.id > 0" class="m-1" style="width:40px" @click.native="borrar_tipo(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                        </b-tooltip>  
                                        <b-tooltip label="Modificar tipo" multilined position="is-right" type="is-warning is-light">
                                        <b-button v-if="value.id > 0" class="m-1" style="width:40px" @click.native="modificar_tipo(key)" type="is-warning"  icon-right="playlist-edit"></b-button>
                                        </b-tooltip>  
                                    </div> 

                                    <div class="column is-6 bg-white rounded m-2 p-2"><b>Id:</b>{{value.id}}<br><b>Codigo:</b>{{value.codigo}}<br><b>Descripcion:</b>{{value.descripcion}}</div>
                                    </div>
                                    <div class="box m-2 p-2" v-bind:style="{ backgroundColor: value.color}">
                                    </div>
                                    <div class="row m-2 p-2" v-if="value.diagrama != ''">
                                    <b-image  :src="value.diagrama" alt="" ></b-image>
                                    </div>
                                </div>
                </div>
            </section>
            <footer class="modal-card-foot">
            </footer>
        </div>


                </form>

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--MODAL ESTADISTICAS TIPOS -->
<b-modal :active.sync="$store.state.modal_visible == 'estadisticas_tipos'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">{{tipo_de_elemento}}</p>
    </header>
    <section class="modal-card-body">
                                                                    <b-table 
                                                                    :data="$store.state.estadisticas_tipos_datos" 
                                                                    :columns="$store.state.estadisticas_tipos_columnas" 
                                                                    :striped="true"
                                                                    >
                                                                    </b-table>                                           
    </section>
    <footer class="modal-card-foot">
    <div class="row center-xs middle-xs m-2" >
      <b-button  @click="$store.state.modal_visible = ''" type='is-danger' icon-right="backburger" >
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>



<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->






<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--MODAL MODIFICO TIPO -->
<b-modal :active.sync="$store.state.modal_visible == 'modificacion_tipo'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">{{tipo_de_elemento}}</p>
    </header>
    <section class="modal-card-body">


                        <div class="columns is-full-mobile p-1 m-1">
                            <b-field class="field column is-full-mobile  p-1 m-1" label="Codigo:" horizontal>
                                <b-input placeholder="Codigo" v-model="elemento_codigo" maxlength="20"></b-input>
                            </b-field>
                        </div>

                        <div class="columns is-full-mobile p-1 m-1">
                            <b-field class="field column is-full-mobile  p-1 m-1" label="Descripcion:" horizontal >
                                <b-input placeholder="Descripcion" v-model="elemento_descripcion" maxlength="120"></b-input>
                            </b-field>   
                        </div>

                        <div class="columns is-full-mobile p-1 m-1" v-if="tipo_de_elemento == 'SubTipo de Captacion'">
                        <b-field class="field column is-full-mobile  p-1 m-1" label="Id tipo:" horizontal >
                            <b-input placeholder="Id tipo" v-model="elemento_idtipo" maxlength="20"></b-input>
                        </b-field>   
                        </div>

                        <div class="columns is-full-mobile is-2 m-2 p-2" v-if="elemento_diagrama != ''">
                          <p class="column image is-4by3">
                            <img  class="has-ratio img-fluid" :src="elemento_diagrama" alt="" width="400" height="300">
                          </p>    
                        </div>
                        <b-field class="file is-warning is-full" >
                            <b-upload v-model="nuevo_diagrama" class="file-label" rounded >
                                <span class="file-cta">
                                    <b-icon class="file-icon" icon="upload"></b-icon>
                                    <span class="file-label">Cargar Figura</span>
                                </span>
                            </b-upload>
                        </b-field>
                        <div class="box m-1 p-1" v-bind:style="{ backgroundColor: elemento_color}"></div>

                        <p  v-bind:style="{ color: elemento_color}">Color asociado</p>
                        <b-colorpicker class="m-2 p-2" v-model="elemento_color" value="elemento_color" />
                      
                        <div class="box m-1 p-1" v-bind:style="{ backgroundColor: elemento_color}"></div>
    </section>
    <footer class="modal-card-foot">
      <b-button  @click="$store.state.modal_visible = ''" type='is-success' icon-right="backburger" >
        Volver
      </b-button>
      <b-button  @click="guardo_tipo()" type="is-danger" icon-left="cloud-upload">
        Guardar
    </b-button>
    </footer>
</div>
</form>
</b-modal>



<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->







<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--MODAL elijo codigo TIPO -->
<b-modal :active.sync="$store.state.modal_visible == 'elijo_codigo_tipo'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">{{tipo_de_elemento}}</p>
    </header>
    <section class="modal-card-body">

    Los elementos de la red que se asocien al código a eliminar se modificarán al código seleccionado

    <b-field label="Seleccionar codigo">
    <b-select placeholder="SD" v-model="lista_codigos">
        <option
            v-for="option in lista_codigos"
            :value="option.id"
            :key="option.id">
            {{option.codigo}}
        </option>
    </b-select>
</b-field>

    </section>
    <footer class="modal-card-foot">
      <b-button  @click="$store.state.modal_visible = ''" type='is-success' icon-right="backburger" >
        Volver
      </b-button>
      <b-button  @click="borrar_tipo2()" type="is-danger" icon-left="cloud-upload">
      Eliminar
    </b-button>
    </footer>
</div>
</form>
</b-modal>



<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->


   

    </div>`,  
    computed: {
          adm_tipos_elemento: {
            get: function () {
                let resultado = [];
                switch (this.tipo_de_elemento) {
                    case 'Tipo de Tramo':
                      resultado = store.state.adm_tipos.filter(function (e) {
                        return e.elemento == 'cat_tramos' || e.elemento == ''
                      });
                      break;
                    case 'Tipo de Punto Singular':
                        resultado = store.state.adm_tipos.filter(function (e) {
                          return e.elemento == 'cat_psingulares' || e.elemento == ''
                      });
                      break;
                      case 'Tipo de Captacion':
                        resultado = store.state.adm_tipos.filter(function (e) {
                          return e.elemento == 'cat_captaciones' || e.elemento == ''
                      });
                      break;
                      case 'Tipo de conexion de Captacion':
                        resultado = store.state.adm_tipos.filter(function (e) {
                          return e.elemento == 'cat_conex_capt' || e.elemento == ''
                      });
                      break;
                  }
                  return resultado;
            },
            set: function (valor) {
            },
          },
          adm_clases_elemento: {
            get: function () {
                let resultado = [];
                switch (this.tipo_de_elemento) {
                    case 'Tipo de Seccion':
                      resultado = store.state.adm_clases.filter(function (e) {
                        return e.elemento == 'cat_tramos'  || e.elemento == ''
                      });
                      break;
                      case 'SubTipo de Captacion':
                        resultado = store.state.adm_clases.filter(function (e) {
                          return e.elemento == 'cat_captaciones' || e.elemento == ''
                        });
                        break;
                  }
                  return resultado;
            },
            set: function (valor) {
            },
          },
          elemento_id: {
            get: function () {
                return store.state.elemento_tipo_seleccionado.id;
            },
            set: function (valor) {
            }
          },
          elemento_codigo: {
            get: function () {
                return store.state.elemento_tipo_seleccionado.codigo;
            },
            set: function (valor) {
                if (store.state.elemento_tipo_seleccionado.codigo != valor)
                {
                    store.state.elemento_tipo_seleccionado.codigo = valor;
                    store.state.control_cambios =  true;
                }
            },
          },
          elemento_descripcion: {
            get: function () {
                return store.state.elemento_tipo_seleccionado.descripcion;
            },
            set: function (valor) {
                if (store.state.elemento_tipo_seleccionado.descripcion != valor)
                {
                    store.state.elemento_tipo_seleccionado.descripcion = valor;
                    store.state.control_cambios =  true;
                }
            },
          },
          elemento_diagrama: {
            get: function () {
                return store.state.elemento_tipo_seleccionado.diagrama;
            },
            set: function (valor) {
            },
          },
          elemento_idtipo: {
            get: function () {
                let resultado = store.state.elemento_tipo_seleccionado.id_tipo;
                  return resultado;
            },
            set: function (valor) {
                if (store.state.elemento_tipo_seleccionado.id_tipo != valor)
                {
                    store.state.elemento_tipo_seleccionado.id_tipo = valor;
                    store.state.control_cambios =  true;
                }
            },
          },
          elemento_color: {
            get: function () {
                let resultado = store.state.elemento_tipo_seleccionado.color;
                  return resultado;
            },
            set: function (valor) {
                if (store.state.elemento_tipo_seleccionado.color != valor)
                {
                    store.state.elemento_tipo_seleccionado.color = valor;
                    store.state.control_cambios =  true;
                }
            },
          },
          nuevo_diagrama: {
            get: function () {
            },
            set: function (valor) {
                    if (valor.type == 'image/jpeg' || valor.type == 'image/png')
                        {
                        valor.arrayBuffer().then(buff => {this.guardo_diagrama(buff);});
                        }
                        else
                        {
                          this.$buefy.toast.open('No es un formato válido');
                        }
            }
          },
          lista_codigos: {
            get: function () {
                let codigos = [];
                let elemento = '';
                var lista_base = [];
                switch (this.tipo_de_elemento)
                {
                    case 'Tipo de Tramo':
                        elemento = 'cat_tramos';
                        lista_base = this.adm_tipos_elemento;
                        return lista_base;
                    break; 
                    case 'Tipo de Seccion':
                        elemento = 'cat_tramos';
                        lista_base = this.adm_clases_elemento;
                        return lista_base;
                    break;
                    case 'Tipo de Punto Singular':
                        elemento = 'cat_psingulares';
                        lista_base = this.adm_tipos_elemento;
                        return lista_base;
                    break;
                    case 'Tipo de Captacion':
                        elemento = 'cat_captaciones';
                        lista_base = this.adm_tipos_elemento;
                        return lista_base;
                    break;
                    case 'SubTipo de Captacion':
                        elemento = 'cat_captaciones';
                        lista_base = this.adm_clases_elemento;
                        return lista_base;
                    break;
                    case 'Tipo de conexion de Captacion':
                        elemento = 'cat_conex_capt';
                        lista_base = this.adm_tipos_elemento;
                        return lista_base;
                    break;
                }

            },
            set: function (valor) {
                this.codigo_seleccionado = valor;
            },
          },
    },
    /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    INICIO DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS*/
    methods:{        
        mostrar_estadisticas_tipos(){
            var padre = this; 
            app.chequeo_conexion();
            if (store.state.hayconexion == true) {
                const cargando_algo = this.$buefy.loading.open({ containter: null });
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/estadisticas_tipos.php';
                var fd = new FormData();
                fd.append("tipo",this.tipo_de_elemento);
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                    var data = JSON.parse(this.response);
                            store.state.estadisticas_tipos_datos = data[0];
                            store.state.estadisticas_tipos_columnas = data[1];
                            store.state.modal_visible = 'estadisticas_tipos';
                            cargando_algo.close();
                };
                xhr.send(fd);
            }//fin de bloque chequeo conexion
            else		
            {
                alert("No se puede consultar base sin conexión");
            }
        },
        borrar_tipo(e){//_______________________________________________________________________________________________
            var padre = this;
            var tabla_tipo = '';
            var id_tipo = 0;
            var elemento = '';
            var nombre_campo = '';
            if (this.adm_tipos_elemento[e] == undefined)
            {
                tabla_tipo = 'adm_clases';
                id_tipo = this.adm_clases_elemento[e].id;
                elemento = this.adm_clases_elemento[e].elemento;
                elemento == 'cat_tramos' ? nombre_campo = 'tiposec': nombre_campo = 'clase';
            }
            else
            {
                tabla_tipo = 'adm_tipos';
                id_tipo = this.adm_tipos_elemento[e].id;
                elemento = this.adm_tipos_elemento[e].elemento;
                elemento == 'cat_tramos' ? nombre_campo = 'tipotra': nombre_campo = 'tipo';
            }
            var padre = this; 
            app.chequeo_conexion();
            if (store.state.hayconexion == true) {
                const cargando_algo = this.$buefy.loading.open({ containter: null });
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/estadisticas_tipos_eliminar.php';
                var fd = new FormData();
                fd.append("nuevo_codigo", -1);
                fd.append("tabla_tipo",tabla_tipo);
                fd.append("id_tipo",id_tipo);
                fd.append("elemento",elemento);  
                fd.append("nombre_campo",nombre_campo);      
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                    cargando_algo.close();
                    var data = JSON.parse(this.response)
                    if (data == 'OCUPADO')
                    {
                        store.state.datos_tipo_eliminar.tabla_tipo = tabla_tipo;
                        store.state.datos_tipo_eliminar.id_tipo = id_tipo;
                        store.state.datos_tipo_eliminar.elemento = elemento;
                        store.state.datos_tipo_eliminar.nombre_campo = nombre_campo;
                        store.state.modal_visible = 'elijo_codigo_tipo';
                    }
                    else
                    {
                        if (tabla_tipo == 'adm_clases')
                        {
                            store.state.adm_clases = store.state.adm_clases.filter(function (e) {
                            return e.id != id_tipo
                            });
                        }
                        else
                        {
                            store.state.adm_tipos = store.state.adm_tipos.filter(function (e) {
                                return e.id != id_tipo
                                });
                        } 
                        padre.$buefy.toast.open({duration: 3000, message: 'Tipología eliminada'});
                    }
                     
                };
                xhr.send(fd);
            }//fin de bloque chequeo conexion
            else		
            {
                padre.$buefy.toast.open({duration: 3000, message: 'No se puede consultar base sin conexión'});
            }
        },
        borrar_tipo2(){//_______________________________________________________________________________________________
            var padre = this;
            var tabla_tipo = store.state.datos_tipo_eliminar.tabla_tipo;
            var id_tipo = store.state.datos_tipo_eliminar.id_tipo;
            var elemento = store.state.datos_tipo_eliminar.elemento;
            var nombre_campo = store.state.datos_tipo_eliminar.nombre_campo;
            var padre = this; 
            app.chequeo_conexion();
            if (store.state.hayconexion == true) {
                const cargando_algo = this.$buefy.loading.open({ containter: null });
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/estadisticas_tipos_eliminar.php';
                var fd = new FormData();
                fd.append("nuevo_codigo", this.codigo_seleccionado);
                fd.append("tabla_tipo",tabla_tipo);
                fd.append("id_tipo",id_tipo);
                fd.append("elemento",elemento);  
                fd.append("nombre_campo",nombre_campo);      
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                    cargando_algo.close();
                    var data = JSON.parse(this.response)
                    if (data == 'LIBRE')
                    {
                        if (tabla_tipo == 'adm_clases')
                        {
                            store.state.adm_clases = store.state.adm_clases.filter(function (e) {
                            return e.id != id_tipo
                            });
                        }
                        else
                        {
                            store.state.adm_tipos = store.state.adm_tipos.filter(function (e) {
                                return e.id != id_tipo
                                });
                        } 
                        padre.$buefy.toast.open({duration: 3000, message: 'Tipología eliminada'});
                    }
                    else
                    {
                        padre.$buefy.toast.open({duration: 3000, message: 'No fue posible eliminar Tipología'});
                    }
                    store.state.modal_visible = '';
                     
                };
                xhr.send(fd);
            }//fin de bloque chequeo conexion
            else		
            {
                padre.$buefy.toast.open({duration: 3000, message: 'No se puede consultar base sin conexión'});
            }
        },
        modificar_tipo(e){//_______________________________________________________________________________________________
            this.tipo_de_modificacion = 'Modificar';
            store.state.control_cambios = false;
            if (this.tipo_de_elemento != 'SubTipo de Captacion' && this.tipo_de_elemento != 'Tipo de Seccion') 
            {
                let elemento = this.adm_tipos_elemento[e];
                store.state.elemento_tipo_seleccionado.tipo = this.tipo_de_elemento; 
                store.state.elemento_tipo_seleccionado.id = elemento.id; 
                store.state.elemento_tipo_seleccionado.codigo = elemento.codigo; 
                store.state.elemento_tipo_seleccionado.descripcion = elemento.descripcion; 
                store.state.elemento_tipo_seleccionado.diagrama = elemento.diagrama; 
                store.state.elemento_tipo_seleccionado.id_tipo = 0; 
                store.state.elemento_tipo_seleccionado.color = elemento.color; 
            }
            else
            {
                let elemento = this.adm_clases_elemento[e];
                store.state.elemento_tipo_seleccionado.tipo = this.tipo_de_elemento; 
                store.state.elemento_tipo_seleccionado.id = elemento.id; 
                store.state.elemento_tipo_seleccionado.codigo = elemento.codigo; 
                store.state.elemento_tipo_seleccionado.descripcion = elemento.descripcion; 
                store.state.elemento_tipo_seleccionado.diagrama = elemento.diagrama; 
                store.state.elemento_tipo_seleccionado.id_tipo = elemento.id_tipo;  
                store.state.elemento_tipo_seleccionado.color = elemento.color; 
            }
            store.state.modal_visible = 'modificacion_tipo'
        },
        nuevo_tipo(){//_______________________________________________________________________________________________

            store.state.elemento_tipo_seleccionado.tipo = this.tipo_de_elemento; 
            store.state.elemento_tipo_seleccionado.id = 0; 
            store.state.elemento_tipo_seleccionado.codigo = ''; 
            store.state.elemento_tipo_seleccionado.descripcion = ''; 
            store.state.elemento_tipo_seleccionado.diagrama = ''; 
            store.state.elemento_tipo_seleccionado.id_tipo = 0; 
            store.state.elemento_tipo_seleccionado.color = '#FFFF99'; 

            this.tipo_de_modificacion = 'Nuevo';
            store.state.modal_visible = 'modificacion_tipo'
        },
        guardo_tipo(){//_______________________________________________________________________________________________
            var padre = this;
            if (store.state.control_cambios == true) 
            {
                let tipo_elemento = this.tipo_de_elemento;
                let nombre_tabla = 'cat_tramos';
                switch (tipo_elemento)
                {
                    case 'Tipo de Tramo':
                        nombre_tabla = 'cat_tramos';
                    break; 
                    case 'Tipo de Seccion':
                        nombre_tabla = 'cat_tramos';
                    break;
                    case 'Tipo de Punto Singular':
                        nombre_tabla = 'cat_psingulares';
                    break;
                    case 'Tipo de Captacion':
                        nombre_tabla = 'cat_captaciones';
                    break;
                    case 'SubTipo de Captacion':
                        nombre_tabla = 'cat_captaciones';
                    break;
                    case 'Tipo de conexion de Captacion':
                        nombre_tabla = 'cat_conex_capt';
                    break;
                }
                let codigo = store.state.elemento_tipo_seleccionado.codigo;
                let yaexistecodigo = false;
                let id2existe = false;
                var sql = '';
                if (this.tipo_de_elemento == 'Tipo de Seccion' || this.tipo_de_elemento == 'SubTipo de Captacion') 
                         {    
                            //chequeo existencia de código
                            for(let i = 0; i < this.adm_clases_elemento.length;i++)
                            {
                                if(this.adm_clases_elemento[i].codigo == codigo && store.state.elemento_tipo_seleccionado.id != this.adm_clases_elemento[i].id)
                                {yaexistecodigo = true};
                            }
                            //si id2 > 0 verifico existencia de tipo referido
                            if (store.state.elemento_tipo_seleccionado.id_tipo != 0)
                            {
                            for(let i = 0; i < store.state.adm_tipos.length;i++)
                            {
                                if (store.state.adm_tipos[i].elemento == 'cat_captaciones' && store.state.adm_tipos[i].id == store.state.elemento_tipo_seleccionado.id_tipo)
                                {id2existe = true;}
                            }
                            }
                            let seguir1 = false;
                            let seguir2 = false;
                            let seguir3 = false;
                            yaexistecodigo == true ? padre.$buefy.toast.open({duration: 3000, message: 'El Codigo ya existe'}) : seguir1 = true;
                            if (this.tipo_de_elemento == 'SubTipo de Captacion')
                            {
                                id2existe == true ? seguir2 = true : padre.$buefy.toast.open({duration: 3000, message: 'El tipo vinculado no existe'});
                            }
                            else
                            {
                                seguir2 = true;
                            }
                            if (store.state.elemento_tipo_seleccionado.codigo == '')
                            {
                                padre.$buefy.toast.open({duration: 3000, message: 'El Codigo no fue ingresado'});
                                seguir3 = false;
                            } 
                            else
                            {
                                seguir3 = true;
                            }
                            if (seguir1 == true && seguir2 == true && seguir3 == true && this.tipo_de_modificacion == 'Modificar')
                            {
                                sql = "UPDATE adm_clases SET codigo = '" + store.state.elemento_tipo_seleccionado.codigo;
                                sql += "', descripcion = '" + store.state.elemento_tipo_seleccionado.descripcion;
                                sql += "', diagrama = '" + store.state.elemento_tipo_seleccionado.diagrama;
                                sql += "', id_tipo = " + store.state.elemento_tipo_seleccionado.id_tipo;
                                sql += ", color = '" + store.state.elemento_tipo_seleccionado.color;
                                sql += "' WHERE id = " + store.state.elemento_tipo_seleccionado.id;
                            }
                            if (seguir1 == true && seguir2 == true  && seguir3 == true && this.tipo_de_modificacion == 'Nuevo')
                            {
                                sql = "INSERT INTO adm_clases (id,elemento,codigo, descripcion, diagrama, id_tipo, color) VALUES (";
                                sql += "(SELECT MAX(id) + 1 FROM adm_clases CAT),'" + nombre_tabla + "','" + store.state.elemento_tipo_seleccionado.codigo;
                                sql += "','" + store.state.elemento_tipo_seleccionado.descripcion;
                                sql += "','" + store.state.elemento_tipo_seleccionado.diagrama;
                                sql += "'," + store.state.elemento_tipo_seleccionado.id_tipo;
                                sql += ",'" + store.state.elemento_tipo_seleccionado.color;
                                sql += "')";
                            }
                         }
                         else
                         {
                                //chequeo existencia de código
                                for(let i = 0; i < this.adm_tipos_elemento.length;i++)
                                {
                                    if(this.adm_tipos_elemento[i].codigo == codigo && store.state.elemento_tipo_seleccionado.id != this.adm_tipos_elemento[i].id)
                                    {yaexistecodigo = true};
                                }
                                if (yaexistecodigo == true ||  store.state.elemento_tipo_seleccionado.codigo == '')
                                {
                                    padre.$buefy.toast.open({duration: 3000, message: 'El Codigo ya existe o no es válido'});
                                }
                                else
                                {
                                    if (this.tipo_de_modificacion == 'Modificar')
                                    {
                                    sql = "UPDATE adm_tipos SET codigo = '" + store.state.elemento_tipo_seleccionado.codigo;
                                    sql += "', descripcion = '" + store.state.elemento_tipo_seleccionado.descripcion;
                                    sql += "', diagrama = '" + store.state.elemento_tipo_seleccionado.diagrama;
                                    sql += "', color = '" + store.state.elemento_tipo_seleccionado.color;
                                    sql += "' WHERE id = " + store.state.elemento_tipo_seleccionado.id;
                                    }
                                    else
                                    {
                                        sql = "INSERT INTO adm_tipos (id,elemento, codigo, descripcion, diagrama, color) VALUES (";
                                        sql += "(SELECT MAX(id) + 1 FROM adm_tipos CAT),'" + nombre_tabla + "','" + store.state.elemento_tipo_seleccionado.codigo;
                                        sql += "','" + store.state.elemento_tipo_seleccionado.descripcion;
                                        sql += "','" + store.state.elemento_tipo_seleccionado.diagrama;
                                        sql += "','" + store.state.elemento_tipo_seleccionado.color;
                                        sql += "')"; 
                                    }
                                }
                         }
                         if (sql != '')
                         {
                            app.chequeo_conexion();
                            if (store.state.hayconexion == true) {
                                const cargando_algo = this.$buefy.loading.open({ containter: null });
                                var getUrl = window.location;
                                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                var phpfile = baseUrl + '/php/actualizo_datos_administrativos.php';
                                var fd = new FormData();
                                fd.append("sql",sql);
                                var xhr = new XMLHttpRequest();	
                                xhr.open('POST',phpfile,true);
                                xhr.onload = function() {
                                    var data = JSON.parse(this.response);
                                    store.state.adm_tipos = data[0];
                                    store.state.adm_clases = data[1];
                                    store.state.adm_contratos = data[2];
                                    store.state.adm_proyectos = data[3];
                                    store.state.modal_visible = '';
                                    cargando_algo.close();
                                };
                                xhr.send(fd);
                                }
                        }
 
            }
            else
            {
                padre.$buefy.toast.open({duration: 3000, message: 'No se realizaron cambios'});
            }
        },
        cargar_nuevo_diagrama: function(){  

        },
        modificar_usuario_db: function(){    
            store.state.datos_login.mensaje = '';
            var padre = this; 
            app.chequeo_conexion();
            if (this.tipo == 'nuevo')
            {
                for(s=0;s<store.state.usuarios.length;s++)
                {
                    if(this.usuario == store.state.usuarios[s].nombre)
                    {
                        store.state.datos_login.mensaje = "Usuario ya existe";
                        return;
                    }
                }
            }   
            if((this.usuario.length > 0 && this.password.length > 0) || this.tipo == 'borrar')
            {
                        if (store.state.hayconexion == true) {
                            var tipo_consulta = this.tipo;
                            seguir = true;
                            var sql = '';
                            switch (tipo_consulta)
                            {
                                case 'borrar':
                                sql = "DELETE FROM usuarios2 WHERE ID = " + this.id + " LIMIT 1";
                                break;
                                case 'modificar':
                                sql = "UPDATE usuarios2 SET NOMBRE = '" + this.usuario + "', PASSWORD = '" + this.password + "', CELULAR = '" + this.celular + "', EMAIL = '" + this.email + "', PERMISOS = '" + this.permisos + "', EMPRESA = '" + this.empresa + "', ACTIVO = 1 WHERE ID = " + this.id;
                                break;
                                case 'nuevo':
                                sql = "INSERT INTO usuarios2 (NOMBRE,PASSWORD,CELULAR,EMAIL,PERMISOS,EMPRESA,ACTIVO) VALUES ('" + this.usuario + "','" + this.password + "','" + this.celular + "','" + this.email + "','" + this.permisos + "','" + this.empresa + "',1)";
                                break;
                                default:
                                seguir = false;    
                            }
                            if (seguir == true)
                            {    
                                var getUrl = window.location;
                                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                var phpfile = baseUrl + '/php/usuarios.php';
                                var fd = new FormData();
                                fd.append("sql",sql);
                                var xhr = new XMLHttpRequest();	
                                xhr.open('POST',phpfile,true);
                                xhr.onload = function() {
                                    var data = JSON.parse(this.response);
                                        if (data[0].usuario != 'FALSO')
                                        {
                                            padre.$buefy.toast.open({duration: 3000, message: 'Usuarios actualizados correctamente'});
                                            store.state.usuarios = data;
                                            store.state.modal_visible = '';
                                        }
                                };
                                xhr.send(fd);
                                } 
                            }//fin de bloque chequeo conexion
                            else		
                            {
                                alert("No se puede ingresar sin conexión");
                            }
            }// fin del bloque que chequea los datos del dom
            else{
                store.state.datos_login.mensaje = "Corregir datos";
                }	
        },
        guardo_diagrama(e) {//_______________________________________________________________________________________________
                  var padre = this;
                  var d = new Date();
                  var dirupload;
                  var ano = d.getFullYear();
                  var mes = d.getMonth() + 1;
                  if (mes < 10) {
                    mes = "0" + mes;
                  }
                  var dia = d.getDate();
                  if (dia < 10) {
                    dia = "0" + dia;
                  }
                  var horas = d.getHours();
                  var minutos = d.getMinutes();
                  var segundos = d.getSeconds();
                  nom_archivo_foto = "Figura_tipo_" + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos;
                  var extension = ".jpg";     
                  if (e.type = 'image/jpeg')
                  {
                    extension = ".jpg";
                  }
                  else
                  {
                    extension = ".png";
                  }
                  nom_archivo_foto = nom_archivo_foto + extension;
                  var valfoto = new Blob([new Uint8Array(e)], {type: e.type });
                  var canvasBlob = foto_a_800_blob(valfoto);
                  canvasBlob.then(function (blob) {
                    let nombre_foto = "/COLECTORES/recursos/diagramas/" + nom_archivo_foto;
                   app.chequeo_conexion();
                    if (store.state.hayconexion == true){ // si hay conexion........................................................................
                      var fd = new FormData();
                      fd.append("foto", nombre_foto);
                      fd.append("archivofoto", blob);
                      var getUrl = window.location;
                      var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                      var phpfile = baseUrl + '/php/subo_diagrama.php';
                      var xhr = new XMLHttpRequest();
                      xhr.open('POST', phpfile, true);
                      xhr.onload = function () {
                        var data = this.response;
                        store.state.control_cambios = true;
                        store.state.elemento_tipo_seleccionado.diagrama = nombre_foto;
                      }
                      xhr.send(fd);
                    }
                    else
                    {
                    padre.$buefy.toast.open({duration: 3000, message: 'No es posible subir figura por falta de conexion'});
                    }
                  });        
        }           
        }
    /*FIN FIN FIN FIN  DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
    })