Vue.component('dl_planos',{
    data: function () {
            return {
                plano_nombre: '',
                plano_seleccionado_nombre: '',
                hoja_seleccionada: 1,
                blob_seleccionado: '',
                plano_id: '',
                plano_iddan: '',
                plano_descripcion: '',
                plano_tipo: 'Red',
                plano_anoproy: '',
                plano_geom_ant: '',
                plano_geom: '',
                geom_plano: '',
                planos_filtrados: [],
                buscar_nombre: false,
                tipo: 'modificar',
                logo: 'recursos/logos/icon-384x384.png',
                mensaje_tope: '',
                posicion: 'on-border',
                modo_zona: false,
                mapa_plano: '',
                ver_plano: false,
                hojasyblobs_pdf: [],
                forzarpdf: 0
            }
        },	
    template: //html 
    `
    <div>
    <meta charset="UTF-8">
    <!--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-5 p-2" style="width:110px;float:left" @click="$store.state.layout_visible = 'layout_menu_principal'"  type='is-danger' icon-right="backburger" >
                        Volver   
                        </b-button>
            </div>       

            <form action="">
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title" style="color:green">Planos</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="agregar_plano()" type="is-warning" rounded  icon-left="account-plus">
                    Agregar plano
                  </b-button>
                  <div class="row center-xs middle-xs m-2" >
                  <b-button  v-on:click="elementos_eliminados()" type="is-success" rounded  icon-left="recycle"  style="width:200px">
                      Planos eliminados
                  </b-button>
                  </div>
                </header>
  

                <div class="columns is-full-mobile p-1 m-1">
                
                    <div class="column is-full-mobile is-3 p-1 m-1">
                    Buscar
                        <b-input style="margin-left:1rem;width:250px" maxlength="200"  v-model="filtrar_planos">
                        </b-input>
                    </div>

                    <div class="column column  is-2  p-1 m-1">
                    <b-switch  size="is-small" v-model="buscar_nombre" type="is-warning">
                    Buscar nombre
                    </b-switch>
                    </div>
                    <div class="column  is-4  p-1 m-1" v-if="mensaje_tope != ''">
                    <p class="box column is-full-mobile center-xs middle-xs p-2 m-1"><span style="color: #b8860b">{{mensaje_tope}}</span></p>
                    </div>
                </div>

                <section class="modal-card-body">
                      <div class="box m-0 p-0"  v-for="(value, key) in planos_filtrados">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Eliminar plano" multilined position="is-right" type="is-danger is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="borrar_plano(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                            </b-tooltip>  
                                            <b-tooltip label="Modificar plano" multilined position="is-right" type="is-warning is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="modificar_plano(key)" type="is-warning"  icon-right="account-edit"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Numero:</b> {{value.id}} <b>  Nombre: </b> {{value.nombre}}<br><b>Descripcion:</b> {{value.descripcion}}<b> Id:</b> {{value.iddan}}</div>
                                        </div>
                                      </div>
                      </div>


                      

                </section>
                <footer class="modal-card-foot">
                </footer>
            </div>
            </form>


       
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE usuario --> 

        <b-modal :active.sync="$store.state.modal_visible == 'Cambiar_o_Modificar_Plano'"
        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">Datos de Plano</p> 
                                            <p v-if="tipo != 'nuevo'"> Id: {{plano_iddan}}</p>
                                        </header>
                                        <section class="modal-card-body">
                                                    <!--INGRESO DE PROYECTO - INPUT -->
                                                        <div class="row center-xs middle-xs">
                                                        Numero de Plano:
                                                            <b-input style="margin-left:1rem;width:100px" maxlength="6"  v-model="numero_de_plano">
                                                            </b-input>
                                                        </div>


                                                    <!--INGRESO DE NOMBRE - INPUT -->
                                                            
                                                            <div class="box p-2 m-2">
                                                                    <p>Nombre: {{plano_nombre}}</p>
                                                            </div>

                                                            <div class="box p-1 m-1" v-if="plano_nombre != ''">
                                                            <b-switch  v-model="ver_plano" type="is-warning">Ver Plano</b-switch>
                                                            <img  v-if="ver_plano" :src="$store.state.plano" alt="Imagen">
                                                            </div>

                                                            
                                                            <div class="row center-xs middle-xs m-2" >
                                                                <b-button type="is-warning" rounded  icon-left="database-import"  style="width:300px">
                                                                <b-field class="file is-warning">
                                                                    <b-upload :key="forzarpdf" v-model="plano_de_pdf" @input="limpio_plano_de_pdf" class="file-label" type="is-warning" rounded accept=".pdf">                
                                                                            <span class="file-label">Cargar Nuevo Plano</span>
                                                                    </b-upload>
                                                                </b-field>
                                                                </b-button>  
                                                            </div>

                                                            <div class="row center-xs middle-xs m-2" >
                                                                <b-button  class="column is-full-mobile p-1 m-1 center-xs middle-xs" v-on:click="modificar_zona_plano()" type="is-success" rounded  icon-left="map"  style="width:300px">
                                                                Zona
                                                                </b-button>
                                                            </div>
                                                   
                                                    <div class="column is-full-mobile p-1 m-1">
                                                        Tipo
                                                                <b-select  placeholder="Red"  v-model="plano_tipo" >
                                                                    <option value = "Red">Red</option>
                                                                    <option value = "Tramo">Tramo</option>
                                                                    <option value = "Punto Singular">Punto Singular</option>
                                                                    <option value = "Captacion">Captacion</option>
                                                                    <option value = "Sin asignar">Sin asignar</option>                  
                                                                </b-select>
                                                    </div> 

                                                                                                                                                           


                                                    <!--INGRESO DE descripcion - INPUT -->
                                                    <b-field label="Descripcion"  :label-position="posicion">
                                                    <b-input v-model="plano_descripcion" type="textarea"></b-input>
                                                    </b-field>

                           

                                </section>
                                <footer class="modal-card-foot">
                                <b-button  @click="$store.state.modal_visible = ''" type='is-danger' icon-right="backburger" style="float:right">
                                    Volver
                                </b-button>
                                <b-button  v-on:click="modificar_plano_db()" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
                                Guardar
                                </b-button>
                                </footer>
                </div>
                </form>
        </b-modal>



       
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE usuario --> 
        <b-modal :active.sync="$store.state.modal_visible == 'Cambiar_o_Modificar_Zona_Plano'"
        full-screen
        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">Zona de Plano</p>
                            <div class="box m-0 p-0">
                            <b-button  icon-right="check-bold" v-if="modo_zona == true" class="p-2 m-1" v-on:click="barra_superior_aplico_zona()" rounded  type="is-warning">
                                    Aceptar
                            </b-button>
                            <b-button  icon-right="close-circle" v-if="modo_zona == true" class="p-2 m-1" v-on:click="barra_superior_descarto_zona()" rounded type="is-danger">
                                    Cancelar
                            </b-button>
                            </div>
                        </header>
                        <section class="modal-card-body">
                    <!--INGRESO DE PROYECTO - INPUT -->

                                    <b-notification :active.sync="$store.state.alerta"
                                    @click.native="$store.state.alerta = false"
                                    position='is-top-left'
                                    aria-close-label="Cerrar" 
                                    type= 'is-warning is-light'
                                    style="margin-bottom:1px"
                                    >
                                    <p type="square" style="display:inline-block; padding-left:1em" v-for="(item, index) in $store.state.alerta_mensaje">
                                    <i class="fa fa-thumbtack"> </i>
                                    {{ item }} 
                                    </p>
                                    </b-notification>
                                    <div id="mapa_planos" style="z-index:0"></div>
                        </section>
                        


                        <footer class="modal-card-foot">
                        <b-button  @click="cerrar_mapa_plano()" type='is-danger' icon-right="backburger" style="float:right">
                            Volver
                        </b-button>
                        </footer>
            </div>
            </form>
        </b-modal>




      
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE usuario --> 

<b-modal :active.sync="$store.state.modal_visible == 'Seleccionar_Hoja'"
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">{{plano_seleccionado_nombre}}</p>
                        </header>
                        <div class="box p-2 m-2">
                            <p>Hoja Seleccionada: {{hoja_seleccionada}}</p>
                        </div>
                        <section class="modal-card-body">

                                                      <div class="row center-xs middle-xs m-2" >
                                                        <form action="" v-if='hojasyblobs_pdf.length > 0'>
                                                        <div>
                                                                <b-carousel  
                                                                :indicator= true
                                                                :indicator-background= false
                                                                :indicator-inside= true
                                                                indicator-mode="hover"
                                                                indicator-position="is-bottom"
                                                                :arrow= true
                                                                :autoplay = false
                                                                :repeat = false
                                                                :arrow-hover = false
                                                                icon-pack="mdi"
                                                                pause-text="">
                                                                    <b-carousel-item v-for="hoja in hojasordenadas" :key="hoja.id">
                                                                        <section>
                                                                            <div class="hero-body has-text-centered">
                                                                            <p> Página: {{hoja.id}}</p>
                                                                           
                                                                            <img class="has-ratio img-fluid" :src="hoja.url" alt="" v-on:click="selecciono_hoja_pdf(hoja.id)">                                             
                                                                           
                                                                            </div>
                                                                        </section>
                                                                    </b-carousel-item>
                                                                </b-carousel>  
                                                        </div>  
                                                        </form>
                                                      </div>
                        </section>
                        <footer class="modal-card-foot">
                        <b-button  @click="aplicar_seleccion_pdf()" type='is-success' icon-left="pencil"  style="width:200px">
                            Aplicar Seleccion
                        </b-button>
                        <b-button  @click="$store.state.modal_visible = 'Cambiar_o_Modificar_Plano'" type='is-danger' icon-right="backburger" style="float:left">
                            Volver
                        </b-button>
                        </footer>
        </div>
        </form>
</b-modal>


<!--__________________________________________________________________________________________modal conexiones eliminadas-->
<b-modal :active.sync="$store.state.modal_visible == 'modal_planos_eliminados'"
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">Reactivar planos</p>
    </header>
    <section class="modal-card-body">
    <div class="box m-0 p-0"  v-for="(value, key) in $store.state.planos_eliminados">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Reactivar elemento" multilined position="is-right" type="is-success is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="reactivar_elemento(key)" type="is-success"  icon-right="recycle"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Numero:</b> {{value.id}} <br><b>Nombre:</b> {{value.nombre}}<br><b>Descripcion:</b> {{value.descripcion}}<b> Id:</b> {{value.iddan}} </div>
                                        </div>
                                      </div>
                      </div>
    </section>
    <footer class="modal-card-foot">
    <div class="column start-xs" >
      <b-button  @click="$store.state.modal_visible = ''" type='is-warning' icon-right="backburger" style="float:left">
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->




</div>`,
    


    computed: {
        hojasordenadas() {
          return this.hojasyblobs_pdf.slice().sort((a, b) => a.id - b.id);
        },
        plano_de_pdf: {
            get: function () {
            },
            set: async function (valor) {
              this.forzarpdf++;
              let eee = this.forzarpdf;
              this.hojasyblobs_pdf = [];
              var padre = this;
              var mensaje = '';
              if (valor == null) {
                mensaje = 'No es un formato válido';
                this.$buefy.toast.open({duration: 5000, message: mensaje});
                return false;
              }
              let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Consulta en proceso......' });
              const cargando_algo = this.$buefy.loading.open({ containter: null });
              pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js';
              var pdfUrl = URL.createObjectURL(valor);
              this.plano_seleccionado_nombre = valor.name.slice(0,-4);
              try {
                var pdf = await pdfjsLib.getDocument(pdfUrl).promise;
                var promesas = [];
                for (let s = 1; s <= pdf.numPages; s++) {
                  (function (numero) {
                    promesas.push(pdf.getPage(numero).then(function (page) {
                      var viewport = page.getViewport({ scale: 1.0 });
                      var aspectRatio = viewport.width / viewport.height;
                      var newWidth = 7000;
                      var newHeight = newWidth / aspectRatio;
                      var canvas = document.createElement('canvas');
                      var context = canvas.getContext('2d',{ alpha: false });
                      canvas.width = newWidth;
                      canvas.height = newHeight;
                      var scale = newWidth / viewport.width;
                      var scaledViewport = page.getViewport({ scale: scale });
                      return page.render({
                        canvasContext: context,
                        viewport: scaledViewport,
                        textLayer: null
                      }).promise.then(function () {
                        return new Promise(function (resolve) {
                          canvas.toBlob(function (blob) {
                            var imageDataURL = URL.createObjectURL(blob);
                            var elemento = {'url':imageDataURL,'blob':blob,'id':numero};
                            padre.hojasyblobs_pdf.push(elemento);
                            resolve(blob);
                          }, "image/jpeg",1);
                        });
                      });
                    }));
                  })(s);
                }
                await Promise.all(promesas);
                this.hojasyblobs_pdf.sort((a, b) => a.id - b.id);
                mensaje_espera.close();
                cargando_algo.close();
                store.state.modal_visible = 'Seleccionar_Hoja';
              } catch (e) {
                this.$buefy.toast.open({duration: 5000, message: 'No fue posible cargar el pdf seleccionado'});
              }
            }
        },
        filtrar_planos: {
            get: function () {
                return this.plano_id;
              },
              set: function (valor) {
                this.plano_id = valor;
                let plano_a_filtrar = this.plano_id;
                let nombre = this.buscar_nombre;
                this.planos_filtrados = store.state.adm_planos.filter(function(element)
                {
                    if (nombre == false && typeof(element) != 'undefined')
                    {
                      return plano_a_filtrar == element.id;
                    }
                    else
                    {
                        if (typeof(element) != 'undefined' && typeof(plano_a_filtrar) != 'undefined' && plano_a_filtrar != '')
                        {
                        let nombre_mayuscula = element.nombre.toUpperCase();
                        let plano_a_filtrar_mayuscula = plano_a_filtrar.toUpperCase();
                        return plano_a_filtrar == element.id || nombre_mayuscula.includes(plano_a_filtrar_mayuscula); 
                        }
                        else
                        {
                            return false;
                        }
                    }
               });   
               if (this.planos_filtrados.length > 100)
               {
                    this.planos_filtrados = this.planos_filtrados.slice(1,100);
                    this.mensaje_tope = "Se muestran los primeros 100 resultados";
               }   
               else
               {
                this.mensaje_tope = "";
               }  

              }
        },
        numero_de_plano: {
            get: function () {
                return this.plano_id;
              },
              set: function (valor) {
                let filtrado = [];
                filtrado = store.state.adm_planos.filter(function(element)
                {
                      return valor == element.id;
               });   
               if (filtrado.length > 0)
               {
                    this.$buefy.toast.open({duration: 1000, message: 'El valor ingresado ya existe'});
               }   
               this.plano_id = valor;

              }
        },
        elem_eliminados:{
            get:  function () {
                resultado = store.state.planos_eliminados;
                return resultado; 
              },
              set:  function (valor) {
                store.state.planos_eliminados = valor;
              }
        }
    },

    
    /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    INICIO DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS*/
    methods:{
        limpio_plano_de_pdf(newPDF){
          this.forzarpdf++;
          let a = newPDF;
         },
        elementos_eliminados: function(){
            if (store.state.planos_eliminados.length == 0)
            {
              app.chequeo_conexion();
              if (store.state.hayconexion == true) {
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/planos_eliminados.php';
                var xhr = new XMLHttpRequest();	
                xhr.open('GET',phpfile,true);
                xhr.onload = function() {
                          var data = JSON.parse(this.response);
                          store.state.planos_eliminados = data;
                          store.state.modal_visible = 'modal_planos_eliminados';
                                        };
                xhr.send();
              }//fin de bloque chequeo conexion
              else
              {
                this.$buefy.toast.open('No es posible modificar los datos por falta de conexión. Intente nuevamente'); 
              }
            } 
            else 
            {
              store.state.modal_visible = 'modal_planos_eliminados';
            }
        },
        cargo_mapa(){//_______________________________________________________________________________________________
            var padre = this;         
                                app.obtengo_ubicacion();
                                app.chequeo_conexion();
                                //CARGO MAPA LEAFLET DE PAGINA//////////////////////////////////////////////////////   



                                this.mapa_plano = new L.Map('mapa_planos', {
                                editable: true,
                                editOptions: { skipMiddleMarkers: false },
                                zoomControl: false,
                                measureControl: {
                                    enabled: true,
                                    unitLabel: 'm',    
                                    unitFactor: 1
                                    }
                                });
                                this.mapa_plano.setView([store.state.centro_mapa.latitud, store.state.centro_mapa.longitud], store.state.centro_mapa.zoom, false);
                            
                                CapaOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                attribution: 'OSM',
                                maxZoom: 19
                                }).addTo(this.mapa_plano);
                        
                                 
                                this.mapa_plano.on('zoomend', function () {
                                    window.scrollTo({ top: 0, behavior: 'smooth' });
                                });
                            
                                L.control.zoom({
                                    position: 'topright'
                                }).addTo(this.mapa_plano);
              

              var geom = this.plano_geom;
              if (geom.substring(0,9) != "POLYGON((" || geom.substring(geom.length - 2) != "))" || geom.length < 40)
              {
                this.plano_geom = "POLYGON((-56.231080 -34.883785,-56.206851 -34.884155,-56.206523 -34.894315,-56.231471 -34.893630,-56.231080 -34.883785))";
                geom = this.plano_geom;
              }

              this.plano_geom_ant = this.plano_geom;

              if (this.tipo == 'nuevo')
              {
              this.mapa_plano.editTools.stopDrawing();
              this.mapa_plano.editTools.commitDrawing();
              this.geom_plano = this.mapa_plano.editTools.startPolygon();
              this.geom_plano.enableEdit();
              }


              if (this.tipo == 'modificar')
              {
                const arrayDeCoordenadas = dl_wkt.wkt2polleaflet(geom);
                this.geom_plano = L.polygon(arrayDeCoordenadas, {
                        color: 'green',
                        opacity: 0.5,
                        weight: 7
                }).addTo(this.mapa_plano);
                let centroide = dl_geometria.dl_calcularCentroide(arrayDeCoordenadas);
                if (centroide != null)
                {
                this.mapa_plano.setView([centroide[0], centroide[1]], 14, false);
                }
                else
                {
                this.mapa_plano.setView([-34.88879029077528, -56.11710054808516], 14, false);
                }
                this.geom_plano.enableEdit();  
            }
        }, 
        barra_superior_aplico_zona(){//_______________________________________________________________________________________________
            this.geom_plano.disableEdit();
            this.mapa_plano.editTools.stopDrawing();
            this.plano_geom = dl_wkt.polleaflet2wkt(this.geom_plano);
            this.geom_plano.remove(this.mapa_plano);
            this.mapa_plano.remove();
            store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
        }, 
        barra_superior_descarto_zona(){//_______________________________________________________________________________________________
            this.geom_plano.disableEdit();
            this.mapa_plano.editTools.stopDrawing();
            this.plano_geom = this.plano_geom_ant;
            this.geom_plano.remove(this.mapa_plano);
            this.mapa_plano.remove();
            store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
        }, 
        filtrar_plano(){
            let plano_a_filtrar = this.plano_id;
            this.planos_filtrados = store.state.adm_planos.filter(function(element)
            {
              return plano_a_filtrar == element.id;
           });
        },     
        borrar_plano(e){//_______________________________________________________________________________________________
            this.plano_iddan = this.planos_filtrados[e].iddan;
            this.plano_id = this.planos_filtrados[e].id;
            this.tipo = 'borrar';
            this.modificar_plano_db();
        },
        modificar_plano(e){//_______________________________________________________________________________________________
            store.state.plano = "/COLECTORES/archivos/planos/" + this.planos_filtrados[e].nombre + ".jpg";
            this.plano_nombre = this.planos_filtrados[e].nombre;
            this.plano_id = this.planos_filtrados[e].id;
            this.plano_iddan = this.planos_filtrados[e].iddan;
            this.plano_descripcion = this.planos_filtrados[e].descripcion;
            this.plano_tipo = this.planos_filtrados[e].tipo;
            this.plano_anoproy = this.planos_filtrados[e].anoproy;
            this.plano_geom = this.planos_filtrados[e].geom;
            store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
            this.tipo = 'modificar';
        },
        modificar_zona_plano(){//_______________________________________________________________________________________________
            this.modo_zona = true;  
            store.state.modal_visible = 'Cambiar_o_Modificar_Zona_Plano';
            this.$nextTick(() => { 
                this.cargo_mapa();
            });
        },
        cerrar_mapa_plano(){//_______________________________________________________________________________________________
            store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
            this.mapa_plano.remove();
        },
        agregar_plano: function(){  
          let maxid = 0;
          for(s=0;s<store.state.adm_planos.length;s++){if(parseInt(store.state.adm_planos[s].id) > maxid){maxid = store.state.adm_planos[s].id;}}    
          maxid++;
            this.plano_nombre = '';
            this.plano_id = maxid;
            this.plano_iddan = 0;
            this.plano_descripcion = '';
            this.plano_tipo = 'Duda';
            this.plano_anoproy = '2020';
            this.plano_geom = "POLYGON((-56.231080 -34.883785,-56.206851 -34.884155,-56.206523 -34.894315,-56.231471 -34.893630,-56.231080 -34.883785))";
            this.tipo = 'nuevo';
            store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
        },
        modificar_plano_db: function(){ 
            var padre = this; 
            app.chequeo_conexion();
                if(this.plano_nombre.length > 0  || this.tipo == 'borrar')
                {
                        if (store.state.hayconexion == true) {
                            let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Consulta en proceso......' });
                            const cargando_algo = this.$buefy.loading.open({ containter: null });
                            var tipo_consulta = this.tipo;
                            seguir = true;
                            var sql = '',sql1 = '', sql2 = '',sql3 = '',sql4 ='';
                            switch (tipo_consulta)
                            {
                                case 'borrar':
                                sql = "UPDATE adm_planos SET activo = 0 WHERE iddan = " + this.plano_iddan;                           
                                break;
                                case 'modificar':
                                sql = "UPDATE adm_planos SET SHAPE = GEOMFROMTEXT('" + this.plano_geom + "') , id = " + this.plano_id + ", nombre = '" + this.plano_nombre + "', tipo = '" + this.plano_tipo + "',  anoproy = '" + this.plano_anoproy + "', descripcion = '" + this.plano_descripcion + "' WHERE iddan = " + this.plano_iddan;
                                break;
                                case 'nuevo':
                                sql = "INSERT INTO adm_planos (SHAPE,id, nombre, tipo, anoproy, descripcion, activo) VALUES (GEOMFROMTEXT('" + this.plano_geom + "') ,'" + this.plano_id +  "','" + this.plano_nombre + "','" + this.plano_tipo + "','" + this.plano_anoproy + "','" + this.plano_descripcion + "',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/planos.php';
                                var fd = new FormData();
                                fd.append("sql",sql);
                                fd.append("usuario",store.state.datos_login.usuario);
                                fd.append("tipo",this.tipo);
                                fd.append("id",this.plano_id);
                                fd.append("iddan",this.plano_iddan);
                                var xhr = new XMLHttpRequest();	
                                xhr.open('POST',phpfile,true);
                                xhr.onload = function() {
                                    let numero_plano = parseInt(this.response);
                                    mensaje_espera.close();
                                    cargando_algo.close();

                                    if (padre.tipo == 'borrar')
                                    {  
                                      if (store.state.planos_eliminados.length > 0)
                                      { 
                                       let nuevo_elemento = {geom: padre.plano_geom,id: padre.plano_id,iddan: numero_plano,nombre: padre.plano_nombre,  tipo: padre.plano_tipo,  anoproy: padre.plano_anoproy,descripcion: padre.plano_descripcion};
                                        store.state.planos_eliminados.push(nuevo_elemento);
                                      }
                                        store.state.adm_planos = store.state.adm_planos.filter(numero => parseInt(numero.iddan) != numero_plano);
                                        padre.$buefy.toast.open({duration: 1000, message: 'Plano eliminado'});
                                    }
                                    if (padre.tipo == 'nuevo')
                                    {
                                        let nuevo_elemento = {geom: padre.plano_geom,id: padre.plano_id,iddan: numero_plano,nombre: padre.plano_nombre,  tipo: padre.plano_tipo,  anoproy: padre.plano_anoproy,descripcion: padre.plano_descripcion};
                                        store.state.adm_planos.push(nuevo_elemento);
                                        padre.$buefy.toast.open({duration: 1000, message: 'Plano nuevo. Id: ' + numero_plano});
                                    }
                                    if (padre.tipo == 'modificar')
                                    {                                   
                                        for(s=0;s<store.state.adm_planos.length;s++)
                                        {
                                            if(numero_plano == parseInt(store.state.adm_planos[s].iddan))
                                            {
                                                store.state.adm_planos[s].id = padre.plano_id;
                                                store.state.adm_planos[s].geom = padre.plano_geom;
                                                store.state.adm_planos[s].nombre = padre.plano_nombre;
                                                store.state.adm_planos[s].tipo = padre.plano_tipo;
                                                store.state.adm_planos[s].anoproy = padre.plano_anoproy;
                                                store.state.adm_planos[s].descripcion = padre.plano_descripcion;
                                            }
                                        }
                                        padre.$buefy.toast.open({duration: 1000, message: 'Plano modificado'});
                                    }
                                    padre.buscar_nombre = false;
                                    padre.plano_iddan = parseInt(this.response);
                                    padre.filtrar_planos = padre.plano_id;  
                                    padre.mapa_plano = '';                
                                    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{
                      this.$buefy.toast.open({duration: 1000, message: 'Completar datos'});
                }	
        },
        selecciono_hoja_pdf(e)
        {
             this.hoja_seleccionada = e;
        },
        aplicar_seleccion_pdf()
        {
            var padre = this;
            var numero_hoja = Number(this.hoja_seleccionada);
            var numero_blob = numero_hoja - 1;
            var objeto_blob = this.hojasyblobs_pdf[numero_blob].blob;
            this.plano_nombre = this.plano_seleccionado_nombre;
            var nombre_archivo = this.plano_nombre;
            if (numero_hoja > 1){
                nombre_archivo = nombre_archivo + "_" + numero_hoja;
                this.plano_nombre = nombre_archivo;
                this.plano_seleccionado_nombre = nombre_archivo;
            }
            for (j=0;j<store.state.adm_planos.length;j++)
            {
                let nom_planoexi = store.state.adm_planos[j].nombre;
                if (nom_planoexi == nombre_archivo)
                {
                    nombre_archivo = nombre_archivo + "_";
                    this.plano_nombre = this.plano_nombre + "_";
                    this.plano_seleccionado_nombre = this.plano_seleccionado_nombre + "_";
                }
            }
            nombre_archivo2 = nombre_archivo + ".jpg";
            ruta_archivo = "/COLECTORES/archivos/planos/" + nombre_archivo2;
            var formData = new FormData();
            formData.append('archivo', objeto_blob);
            formData.append('nomarch', ruta_archivo);
            var xhr = new XMLHttpRequest();
            var getUrl = window.location;
            var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
            var phpfile = baseUrl + '/php/guardar_plano.php';
            xhr.open('POST', phpfile , true);
            xhr.onload = function () {
              if (xhr.status === 200) {
                    store.state.plano = ruta_archivo;
                    store.state.modal_visible = 'Cambiar_o_Modificar_Plano';
              } else {
                this.plano_nombre = '';
                store.state.plano = '';
              }
            };
            xhr.send(formData);
        },
        reactivar_elemento: function(e){    
          var padre = this;
          app.chequeo_conexion();
         if (store.state.hayconexion == true) {
           const cargando_algo =  this.$buefy.loading.open({containter: null});
           let iddan = store.state.planos_eliminados[e].iddan;
           let id = store.state.planos_eliminados[e].id;
           var fd = new FormData();
           fd.append("id",id);
           fd.append("iddan",iddan);
           fd.append("usuario", store.state.datos_login.usuario);
           var getUrl = window.location;
           var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
           var phpfile = baseUrl + '/php/reactivar_plano.php';
           var xhr = new XMLHttpRequest();	
           xhr.open('POST',phpfile,true);
           xhr.onload = function() {
                     var data = JSON.parse(this.response);
                     if (data.mensaje == 'ok')
                     {
                      store.state.adm_planos.push(store.state.planos_eliminados[e]);
                      store.state.planos_eliminados = store.state.planos_eliminados.filter(function (el) {return el != store.state.planos_eliminados[e]});
                     store.state.modal_visible = 'modal_planos_eliminados'
                     cargando_algo.close();
                     padre.$buefy.toast.open('Se reactivo plano exitosamente'); 
                     }
                                   };
           xhr.send(fd);
         }//fin de bloque chequeo conexion
         else
         {
           this.$buefy.toast.open('No es posible modificar los datos por falta de conexión. Intente nuevamente'); 
         }
        
      }
    }
    /*FIN FIN FIN FIN  DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
    

    })