Vue.component('dl_proyectos',{
    data: function () {
            return {
                proyecto_nombre: '',
                proyecto_id: '',
                proyecto_iddan: '',
                proyecto_descripcion: '',
                proyecto_clasificacion: '',
                proyecto_tipo: '',
                proyecto_construido: '',
                proyecto_anoproy: '',
                proyecto_geom_ant: '',
                proyecto_geom: '',
                geom_proyecto: '',
                geoms_proyecto: [],
                proyectos_filtrados: [],
                asignar_zona: false,
                asignar_colectores: true,
                asignar_psingulares: true,
                asignar_captaciones: true,
                buscar_nombre: false,
                tipo: 'modificar',
                logo: 'recursos/logos/icon-384x384.png',
                mensaje_tope: '',
                posicion: 'on-border',
                modo_zona: false,
                mapa_proyecto: ''
            }
        },	
    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-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">Proyectos</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="agregar_proyecto()" type="is-warning" rounded  icon-left="account-plus">
                    Agregar proyecto
                  </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">
                      Proyectos 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_proyectos">
                        </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 proyectos_filtrados">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Eliminar proyecto" multilined position="is-right" type="is-danger is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="borrar_proyecto(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                            </b-tooltip>  
                                            <b-tooltip label="Modificar proyecto" multilined position="is-right" type="is-warning is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="modificar_proyecto(key)" type="is-warning"  icon-right="account-edit"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id}} <br><b>Nombre:</b> {{value.nombre}} <br><b>Clasificacion:</b> {{value.clasificacion}} <br><b>Tipo:</b> {{value.tipo}} <br><b>Construido:</b> {{value.construido}}<br><b>Ano:</b> {{value.anoproy}}<br><b>Descripcion:</b> {{value.descripcion}}</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_Proyecto'"
        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 Proyecto</p>
                                        </header>
                                        <section class="modal-card-body">
                                                    <!--INGRESO DE PROYECTO - INPUT -->
                                                        <div class="row center-xs middle-xs">
                                                        Numero de Proyecto:
                                                            <b-input style="margin-left:1rem;width:100px" maxlength="6"  v-model="numero_de_proyecto">
                                                            </b-input>
                                                        </div>


                                                    <!--INGRESO DE NOMBRE - INPUT -->
                                                            
                                                            <b-field label="Nombre"  :label-position="posicion">
                                                            <b-input v-model="proyecto_nombre" type="textarea"></b-input>
                                                            </b-field>


                                                            <b-button  v-on:click="modificar_zona_proyecto()" type="is-success" rounded  icon-left="map"  style="width:300px">
                                                            Zona
                                                            </b-button>

                                                    <div class="column is-full-mobile p-1 m-1">
                                                    Clasificacion
                                                            <b-select  v-model="proyecto_clasificacion" placeholder="Sin asignar">
                                                                <option value = "Colector provisorio">Colector provisorio</option>
                                                                <option value = "Extension de red de saneamiento">Extension de red de saneamiento</option>
                                                                <option value = "Modificacion de red">Modificacion de red</option>
                                                                <option value = "Canalizacion especial de desague">Canalizacion especial de desague</option>   
                                                                <option value = "Red saneamiento">Red saneamiento</option> 
                                                                <option value = "Pluviales">Pluviales</option>   
                                                                <option value = "Planta de bombeo">Planta de bombeo</option>          
                                                                <option value = "Macrodrenaje">Macrodrenaje</option>    
                                                                <option value = "Microdrenaje">Microdrenaje</option>    
                                                                <option value = "Planos generales">Planos generales</option>    
                                                                <option value = "Rehabilitacion">Rehabilitacion</option>    
                                                                <option value = "Conservacion y mantenimiento">Conservacion y mantenimiento</option>    
                                                                <option value = "PSU III">PSU III</option>    
                                                                <option value = "Institucional">Institucional</option>    
                                                                <option value = "Tanque de amortiguacion">Tanque de amortiguacion</option>    
                                                                <option value = "Biorretencion">Biorretencion</option>    
                                                                <option value = "Varios">Varios</option>    
                                                                <option value = "Duda">Duda</option>                                        
                                                                <option value = "Sin clasificar">Sin clasificar</option>    
                                                                <option value = "Sin asignar">Sin asignar</option>    
                                                            </b-select>
                                                    </div> 

                                                    <div class="column is-full-mobile p-1 m-1">
                                                        Tipo
                                                                <b-select    v-model="proyecto_tipo" placeholder="Aliviadero">
                                                                    <option value = "Aliviadero">Aliviadero</option>
                                                                    <option value = "Duda">Duda</option>
                                                                    <option value = "Sin asignar">Sin asignar</option>                  
                                                                </b-select>
                                                    </div> 

                                                    <div class="box">
                                                    <div class="columns is-full-mobile p-1 m-1">
                                                        
                                                            <div class="column is-full-mobile p-1 m-1">
                                                                <b-switch true-value="Si" false-value="No" v-model="proyecto_construido" type="is-success">
                                                                    Construido
                                                                </b-switch> 
                                                            </div> 

                                                            <!--INGRESO DE ano proy - INPUT -->
                                                            
                                                            <b-field v-if="proyecto_construido == 'Si'" class="field column is-full-mobile p-1 m-1" label="Año:" horizontal style="width:250px">
                                                                <b-input placeholder="Año Construido" type="number" maxlength="4" has-counter 
                                                                v-model="proyecto_anoproy"  
                                                                validation-message="Valor no permitido"
                                                                icon="calendar" style="width:200px">
                                                                </b-input>
                                                            </b-field> 
                                                        </div>       
                                                    </div>

                                                                                                            


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

                                                    <div class="box is-full-mobile p-1 m-1">
                                                            <div class="column is-full-mobile p-1 m-1">
                                                                <b-switch  v-model="asignar_zona" type="is-success">
                                                                    Asignar Proyecto a Zona
                                                                </b-switch> 
                                                            </div> 

                                                            <div class="box is-full-mobile p-1 m-1" v-if="asignar_zona">
                                                                <b-checkbox v-model="asignar_colectores" type="is-success">Colectores</b-checkbox>
                                                                <b-checkbox v-model="asignar_psingulares" type="is-success">Puntos Singulares</b-checkbox>
                                                                <b-checkbox v-model="asignar_captaciones" type="is-success">Captaciones</b-checkbox>
                                                            </div>
                                                    </div>
                            

                                </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_proyecto_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_Proyecto'"
        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 Proyecto</p>
                            <div class="box m-0 p-0">
                            <b-button   v-if="tipo == 'modificar'" class="p-2 m-1" v-on:click="quitar_poligono()" rounded  type="is-info">
                                    -
                            </b-button>
                            <b-button   v-if="tipo == 'modificar'" class="p-2 m-1" v-on:click="agregar_poligono()" rounded  type="is-info">
                                    +
                            </b-button>
                            <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_proyectos" style="z-index:0"></div>
                        </section>
                        


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


<!--__________________________________________________________________________________________modal conexiones eliminadas-->
<b-modal :active.sync="$store.state.modal_visible == 'modal_proyectos_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 proyectos</p>
    </header>
    <section class="modal-card-body">
    <div class="box m-0 p-0"  v-for="(value, key) in $store.state.proyectos_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>Id:</b> {{value.id}} <br><b>Nombre:</b> {{value.nombre}}<br><b>Descripcion:</b> {{value.descripcion}} </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: {
        filtrar_proyectos: {
            get: function () {
                return this.proyecto_id;
              },
              set: function (valor) {
                this.proyecto_id = valor;
                let proyecto_a_filtrar = this.proyecto_id;
                let nombre = this.buscar_nombre;
                this.proyectos_filtrados = store.state.adm_proyectos.filter(function(element)
                {
                    if (nombre == false && typeof(element) != 'undefined')
                    {
                      return proyecto_a_filtrar == element.id;
                    }
                    else
                    {
                        if (typeof(element) != 'undefined' && typeof(proyecto_a_filtrar) != 'undefined' && proyecto_a_filtrar != '')
                        {
                        let nombre_mayuscula = element.nombre.toUpperCase();
                        let proyecto_a_filtrar_mayuscula = proyecto_a_filtrar.toUpperCase();
                        return proyecto_a_filtrar == element.id || nombre_mayuscula.includes(proyecto_a_filtrar_mayuscula); 
                        }
                        else
                        {
                            return false;
                        }
                    }
               });   
               if (this.proyectos_filtrados.length > 100)
               {
                    this.proyectos_filtrados = this.proyectos_filtrados.slice(1,100);
                    this.mensaje_tope = "Se muestran los primeros 100 resultados";
               }   
               else
               {
                this.mensaje_tope = "";
               }  

              }
        },
        numero_de_proyecto: {
            get: function () {
                return this.proyecto_id;
              },
            set: function (valor) {
                let filtrado = [];
                if (this.tipo == 'nuevo')
                {
                        filtrado = store.state.adm_proyectos.filter(function(element)
                        {
                            return valor == element.id;
                        });   
                        if (filtrado.length > 0)
                        {
                                this.$buefy.toast.open({duration: 1000, message: 'El valor ingresado ya existe'});
                        } 
                        this.proyecto_id = valor;
                  }
                else if (this.tipo == 'modificar')
                {
                        let existe = false;
                        for(s=0;s<store.state.adm_proyectos.length;s++)
                        {

                        if(valor == parseInt(store.state.adm_proyectos[s].id) && this.proyecto_iddan != parseInt(store.state.adm_proyectos[s].iddan))
                            {
                                existe = true;
                            }    
                        }
                        if (existe == true)
                        {
                        this.$buefy.toast.open({duration: 1000, message: 'El valor ingresado ya existe'});
                        } 
                        this.proyecto_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:{
        elementos_eliminados: function(){
            if (store.state.proyectos_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/proyectos_eliminados.php';
                var xhr = new XMLHttpRequest();	
                xhr.open('GET',phpfile,true);
                xhr.onload = function() {
                          var data = JSON.parse(this.response);
                          store.state.proyectos_eliminados = data;
                          store.state.modal_visible = 'modal_proyectos_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_proyectos_eliminados';
            }
        },
        cargo_mapa(){//_______________________________________________________________________________________________
            var padre = this;         
                                app.obtengo_ubicacion();
                                app.chequeo_conexion();
                                //CARGO MAPA LEAFLET DE PAGINA//////////////////////////////////////////////////////   
                                this.mapa_proyecto = new L.Map('mapa_proyectos', {
                                editable: true,
                                editOptions: { skipMiddleMarkers: false },
                                zoomControl: false,
                                measureControl: {
                                    enabled: true,
                                    unitLabel: 'm',    
                                    unitFactor: 1
                                    }
                                });
                                this.mapa_proyecto.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_proyecto);
                        
                                 
                                this.mapa_proyecto.on('zoomend', function () {
                                    window.scrollTo({ top: 0, behavior: 'smooth' });
                                });
                            
                                L.control.zoom({
                                    position: 'topright'
                                }).addTo(this.mapa_proyecto);
              
              var geom = this.proyecto_geom;
              if (geom.substring(0,15) != "MULTIPOLYGON(((" || geom.substring(geom.length - 3) != ")))" || geom.length < 40)
              {
                this.proyecto_geom = "MULTIPOLYGON(((-56.231080 -34.883785,-56.206851 -34.884155,-56.206523 -34.894315,-56.231471 -34.893630,-56.231080 -34.883785)))";
                geom = this.proyecto_geom;
              }
              this.proyecto_geom_ant = this.proyecto_geom;
              
              if (this.tipo == 'nuevo')
              {
              this.mapa_proyecto.editTools.stopDrawing();
              this.mapa_proyecto.editTools.commitDrawing();
              this.geom_proyecto = this.mapa_proyecto.editTools.startPolygon();
              this.geom_proyecto.enableEdit();
              }
              if (this.tipo == 'modificar')
              {
                        const arrayDeCoordenadas = dl_wkt.wkt2mpleaflet(geom);
                        this.geom_proyecto = L.polygon(arrayDeCoordenadas, {
                                color: 'green',
                                opacity: 0.5,
                                weight: 7
                        }).addTo(this.mapa_proyecto);
                        let centroide = dl_geometria.dl_calcularCentroide(arrayDeCoordenadas);
                        if (centroide != null)
                        {
                        this.mapa_proyecto.setView([centroide[0], centroide[1]], 14, false);
                        }
                        else
                        {
                        this.mapa_proyecto.setView([-34.88879029077528, -56.11710054808516], 14, false);
                        }
                        this.geom_proyecto.enableEdit();                  
            }
        }, 
        barra_superior_aplico_zona(){//_______________________________________________________________________________________________
            this.geom_proyecto.disableEdit();
            this.mapa_proyecto.editTools.stopDrawing();
            this.proyecto_geom = dl_wkt.mpleaflet2wkt(this.geom_proyecto);
            this.geom_proyecto.remove(this.mapa_proyecto);
            this.mapa_proyecto.remove();
            store.state.modal_visible = 'Cambiar_o_Modificar_Proyecto';
        }, 
        barra_superior_descarto_zona(){//_______________________________________________________________________________________________
            this.geom_proyecto.disableEdit();
            this.mapa_proyecto.editTools.stopDrawing();
            this.proyecto_geom = this.proyecto_geom_ant;
            this.geom_proyecto.remove(this.mapa_proyecto);
            this.mapa_proyecto.remove();
            store.state.modal_visible = 'Cambiar_o_Modificar_Proyecto';
        }, 
        filtrar_proyecto(){

            let proyecto_a_filtrar = this.proyecto_id;
            this.proyectos_filtrados = store.state.adm_proyectos.filter(function(element)
            {
              return proyecto_a_filtrar == element.id;
           });

            //_______________________________________________________________________________________________
        },     
        borrar_proyecto(e){//_______________________________________________________________________________________________
            this.proyecto_id = this.proyectos_filtrados[e].id;
            this.proyecto_iddan = this.proyectos_filtrados[e].iddan;
            this.tipo = 'borrar';
            this.modificar_proyecto_db();
        },
        modificar_proyecto(e){//_______________________________________________________________________________________________
            this.proyecto_nombre = this.proyectos_filtrados[e].nombre;
            this.proyecto_id = this.proyectos_filtrados[e].id;
            this.proyecto_iddan = this.proyectos_filtrados[e].iddan;
            this.proyecto_descripcion = this.proyectos_filtrados[e].descripcion;
            this.proyecto_clasificacion = this.proyectos_filtrados[e].clasificacion;
            this.proyecto_tipo = this.proyectos_filtrados[e].tipo;
            this.proyecto_construido = this.proyectos_filtrados[e].construido;
            this.proyecto_anoproy = this.proyectos_filtrados[e].anoproy;
            this.proyecto_geom = this.proyectos_filtrados[e].geom;
            store.state.modal_visible = 'Cambiar_o_Modificar_Proyecto';
            this.tipo = 'modificar';
        },
        modificar_zona_proyecto(){//_______________________________________________________________________________________________
            this.modo_zona = true;  
            store.state.modal_visible = 'Cambiar_o_Modificar_Zona_Proyecto';
            this.$nextTick(() => { 
                this.cargo_mapa();
            });
        },
        cerrar_mapa_proyecto(){//_______________________________________________________________________________________________
            store.state.modal_visible = '';
            this.mapa_proyecto.remove();
        },
        agregar_proyecto: function(){  
            let maxid = 0;
            for(s=0;s<store.state.adm_proyectos.length;s++){if(parseInt(store.state.adm_proyectos[s].id) > maxid){maxid = store.state.adm_proyectos[s].id;}}    
            maxid++;
            this.proyecto_nombre = 'Nombre';
            this.proyecto_id = maxid;
            this.proyecto_iddan = 0;
            this.proyecto_descripcion = '';
            this.proyecto_clasificacion = 'Colector provisorio';
            this.proyecto_tipo = 'Duda';
            this.proyecto_construido = 'No';
            this.proyecto_anoproy = '2020';
            this.proyecto_geom = "MULTIPOLYGON(((-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_Proyecto';
        },
        modificar_proyecto_db: function(){ 
            var padre = this; 
            app.chequeo_conexion();
            var existe = false;
            var geom = this.proyecto_geom;
            if (geom.substring(0,15) != "MULTIPOLYGON(((" || geom.substring(geom.length - 3) != ")))" || geom.length < 40)
            {
              this.proyecto_geom = "MULTIPOLYGON(((-56.231080 -34.883785,-56.206851 -34.884155,-56.206523 -34.894315,-56.231471 -34.893630,-56.231080 -34.883785)))";
            }
            if (this.tipo == 'modificar')
            {
                for(s=0;s<store.state.adm_proyectos.length;s++)
                {
                if(this.proyecto_id == parseInt(store.state.adm_proyectos[s].id) && this.proyecto_iddan != parseInt(store.state.adm_proyectos[s].iddan))
                    {
                    existe = true;
                    }
                }
            }
            if (this.tipo == 'nuevo')
            {
                for(s=0;s<store.state.adm_proyectos.length;s++)
                {
                if(this.proyecto_id == parseInt(store.state.adm_proyectos[s].id))
                    {
                    existe = true;
                    }
                }
            }
            if (existe == false)
            {
                    if(this.proyecto_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_proyectos SET activo = 0 WHERE iddan = " + this.proyecto_iddan;
                                        sql1 = "UPDATE cat_tramos SET proyecto = 0 WHERE proyecto = " + this.proyecto_id;  
                                        sql2 = "UPDATE cat_psingulares SET proyecto = 0 WHERE proyecto = " + this.proyecto_id;   
                                        sql3 = "UPDATE cat_captaciones SET proyecto = 0 WHERE proyecto = " + this.proyecto_id;  
                                        sql4 = "UPDATE cat_conex_capt SET proyecto = 0 WHERE proyecto = " + this.proyecto_id;                               
                                        break;
                                        case 'modificar':
                                        sql = "UPDATE adm_proyectos SET SHAPE = GEOMFROMTEXT('" + this.proyecto_geom + "') , nombre = '" + this.proyecto_nombre + "', clasificacion = '" + this.proyecto_clasificacion + "', id = " + this.proyecto_id + ", tipo = '" + this.proyecto_tipo + "', construido = '" + this.proyecto_construido + "', anoproy = '" + this.proyecto_anoproy + "', descripcion = '" + this.proyecto_descripcion + "' WHERE iddan = " + this.proyecto_iddan;
                                        if (this.asignar_zona == true && this.asignar_colectores == true)
                                        {sql1 = "UPDATE cat_tramos SET proyecto = " + this.proyecto_id + " WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";}
                                        if (this.asignar_zona == true && this.asignar_psingulares == true)
                                        {sql2 = "UPDATE cat_psingulares SET proyecto = " + this.proyecto_id + " WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";}
                                        if (this.asignar_zona == true && this.asignar_captaciones == true)
                                        {sql3 = "UPDATE cat_captaciones SET proyecto = " + this.proyecto_id + " WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";
                                        sql4 = "UPDATE cat_conex_capt SET proyecto = " + this.proyecto_id + " WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";
                                        }
                                        break;
                                        case 'nuevo':
                                        sql = "INSERT INTO adm_proyectos (SHAPE,id, nombre, clasificacion, tipo, construido, anoproy, descripcion, activo) SELECT  GEOMFROMTEXT('" + this.proyecto_geom + "') , IFNULL(MAX(id) + 1, 1) ,'" + this.proyecto_nombre + "','" + this.proyecto_clasificacion + "','" + this.proyecto_tipo + "','" + this.proyecto_construido + "','" + this.proyecto_anoproy + "','" + this.proyecto_descripcion + "',1 FROM adm_proyectos";
                                        if (this.asignar_zona == true && this.asignar_colectores == true)
                                        {sql1 = "UPDATE cat_tramos SET proyecto = (SELECT MAX(id) FROM adm_proyectos) WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";}
                                        if (this.asignar_zona == true && this.asignar_psingulares == true)
                                        {sql2 = "UPDATE cat_psingulares SET proyecto = (SELECT MAX(id) FROM adm_proyectos) WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";}
                                        if (this.asignar_zona == true && this.asignar_captaciones == true)
                                        {sql3 = "UPDATE cat_captaciones SET proyecto = (SELECT MAX(id) FROM adm_proyectos) WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";
                                        sql4 = "UPDATE cat_conex_capt SET proyecto = (SELECT MAX(id) FROM adm_proyectos) WHERE ST_CONTAINS(ST_GEOMFROMTEXT('" + this.proyecto_geom + "'),SHAPE)";
                                        }
                                        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/proyectos.php';
                                        var fd = new FormData();
                                        fd.append("sql",sql);
                                        fd.append("sql1",sql1);
                                        fd.append("sql2",sql2);
                                        fd.append("sql3",sql3);
                                        fd.append("sql4",sql4);
                                        fd.append("usuario",store.state.datos_login.usuario);
                                        fd.append("tipo",this.tipo);
                                        fd.append("id",this.proyecto_id);
                                        fd.append("iddan",this.proyecto_iddan);
                                        var xhr = new XMLHttpRequest();	
                                        xhr.open('POST',phpfile,true);
                                        xhr.onload = function() {
                                            let numero_proyecto = parseInt(this.response);
                                            mensaje_espera.close();
                                            cargando_algo.close();

                                            if (padre.tipo == 'borrar')
                                            {
                                                if (store.state.proyectos_eliminados.length > 0)
                                                {
                                                let nuevo_elemento = {geom: padre.proyecto_geom,id: padre.proyecto_id,iddan: numero_proyecto,nombre: padre.proyecto_nombre, clasificacion: padre.proyecto_clasificacion, tipo: padre.proyecto_tipo, construido: padre.proyecto_construido, anoproy: padre.proyecto_anoproy,descripcion: padre.proyecto_descripcion};
                                                store.state.proyectos_eliminados.push(nuevo_elemento);
                                                }
                                                store.state.adm_proyectos = store.state.adm_proyectos.filter(numero => parseInt(numero.iddan) != numero_proyecto);
                                                padre.$buefy.toast.open({duration: 1000, message: 'Proyecto eliminado'});
                                            }
                                            if (padre.tipo == 'nuevo')
                                            {
                                                let nuevo_elemento = {geom: padre.proyecto_geom,id: padre.proyecto_id,iddan: numero_proyecto,nombre: padre.proyecto_nombre, clasificacion: padre.proyecto_clasificacion, tipo: padre.proyecto_tipo, construido: padre.proyecto_construido, anoproy: padre.proyecto_anoproy,descripcion: padre.proyecto_descripcion};
                                                store.state.adm_proyectos.push(nuevo_elemento);
                                                padre.$buefy.toast.open({duration: 1000, message: 'Proyecto nuevo. Id: ' + padre.proyecto_id});
                                            }
                                            if (padre.tipo == 'modificar')
                                            {                                   
                                                for(s=0;s<store.state.adm_proyectos.length;s++)
                                                {
                                                
                                                    if(numero_proyecto == parseInt(store.state.adm_proyectos[s].iddan))
                                                    {
                                                        store.state.adm_proyectos[s].id = padre.proyecto_id;
                                                        store.state.adm_proyectos[s].geom = padre.proyecto_geom;
                                                        store.state.adm_proyectos[s].nombre = padre.proyecto_nombre;
                                                        store.state.adm_proyectos[s].clasificacion = padre.proyecto_clasificacion;
                                                        store.state.adm_proyectos[s].tipo = padre.proyecto_tipo;
                                                        store.state.adm_proyectos[s].anoproy = padre.proyecto_anoproy;
                                                        store.state.adm_proyectos[s].descripcion = padre.proyecto_descripcion;
                                                        store.state.adm_proyectos[s].construido = padre.proyecto_construido;
                                                    }
                                                }
                                                padre.$buefy.toast.open({duration: 1000, message: 'Proyecto modificado'});
                                            }
                                            padre.buscar_nombre = false;
                                            padre.proyecto_iddan = '';
                                            padre.proyecto_iddan = parseInt(this.response);
                                            if (padre.tipo == 'borrar')
                                            {padre.proyecto_iddan = '';}
                                            padre.filtrar_proyectos = padre.proyecto_iddan;  
                                            padre.mapa_proyecto = '';                
                                            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: 'Corregir datos'});
                        }
                }// fin del bloque que chequea duplicados
                else
                {
                    this.$buefy.toast.open({duration: 1000, message: 'El id seleccionado ya existe. Corregir'});
                }
        },
        agregar_poligono()
        {
                let padre = this;
                        this.geom_proyecto.disableEdit();
                        this.mapa_proyecto.editTools.stopDrawing();
                        var editableLayers = new L.FeatureGroup().addTo(this.mapa_proyecto);
                        var nuevoPol = this.mapa_proyecto.editTools.startPolygon();
                        nuevoPol.on('editable:drawing:end', function (e) {
                            if (e.layer._latlngs[0].length > 2)
                                 {
                                    var nuevoPoligono = L.polygon(e.layer._latlngs);
                                    nuevoPoligono.disableEdit();
                                    var nuevascoordenadas = padre.geom_proyecto.getLatLngs().concat(nuevoPoligono.getLatLngs());
                                    padre.geom_proyecto.setLatLngs(nuevascoordenadas);
                                    padre.mapa_proyecto.removeLayer(e.layer);
                                    padre.geom_proyecto.enableEdit();
                                 }  
                        });
        },
        quitar_poligono()
        {
                        this.geom_proyecto.disableEdit();
                        this.mapa_proyecto.editTools.stopDrawing();
                         var coordenadas_originales = this.geom_proyecto.getLatLngs();
                        if (coordenadas_originales.length > 1)
                        {
                            var nuevascoordenadas = coordenadas_originales;
                            nuevascoordenadas.pop();
                            this.geom_proyecto.setLatLngs(nuevascoordenadas);
                            this.geom_proyecto.enableEdit();
                        }
                        else
                        {
                            this.$buefy.toast.open({duration: 2000, message: 'La zona tiene un solo poligono'});
                        }
        },
        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.proyectos_eliminados[e].iddan;
           let id = store.state.proyectos_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_proyecto.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_proyectos.push(store.state.proyectos_eliminados[e]);
                     store.state.proyectos_eliminados = store.state.proyectos_eliminados.filter(function (el) {return el != store.state.proyectos_eliminados[e]});
                     store.state.modal_visible = 'modal_proyectos_eliminados'
                     cargando_algo.close();
                     padre.$buefy.toast.open('Se reactivo proyecto 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
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
    ,
    mounted: function () {   
     }

    })


    //UPDATE adm_proyectos SET SHAPE3 = ST_GeomFromText(CONCAT('MULTIPOLYGON(', REPLACE(ST_AsText(SHAPE), 'POLYGON', ''), ')')) WHERE 1