Vue.component('dl_login',{
data: function () {
        return {
			usuario: store.state.datos_login.usuario,
			password: store.state.datos_login.password,
			mensaje: store.state.datos_login.mensaje,
			logo: 'recursos/logos/icon-384x384.png',
        }
    },	
template: //html 
`
<div>



<!--ENCABEZADO DE MENÚ INICIAL - IMAGEN CON LOGO Y TEXTO DESCRIPTIVO DE EMPRESA -->
		<div class="column col-xs middle-xs center-xs">
			<div class="row center-xs middle-xs" >
				<img v-bind:src=logo style="width:30px;height:30px">
			</div>
			<div class="row center-xs middle-xs">
				<b><p style="color:orange">Catastro de Redes de Saneamiento v4.2</p></b>
			</div>	
		</div>
<!--INGRESO DE USUARIO - FIELD CON MENSAJE E ICONO -->
		<div class="row center-xs middle-xs">
		    <b-field type="is-warning  is-light" :message="$store.state.datos_login.mensaje">
				<span class="icon is-small">
				<i class="fas fa-user" style="color:grey"></i>
				</span>
			</b-field>
		</div>
<!--INGRESO DE USUARIO - INPUT -->
		<div class="row center-xs middle-xs">
            <b-input style="margin-left:1rem;width:220px" value=""  rounded maxlength="30"  @input.native="actualizo_usuario" v-model="usuario">
			</b-input>
		</div>
<!--INGRESO DE CONTRASEÑA - ICONO -->
		<div class="row center-xs middle-xs">
			<b-field  type="is-warning is-light">
				<span class="icon is-small" >
				<i class="fas fa-lock" style="color:grey"></i>
				</span>
			</b-field>
		</div>	
<!--INGRESO DE CONTRASEÑA - INPUT -->
		<div class="row center-xs middle-xs">			
            <b-input style="margin-left:1rem;width:220px" type="password" rounded maxlength="30" @input.native="actualizo_password" v-model="password" value="" password-reveal></b-input>
        	</b-field>
		</div>	
<!--BOTON PARA EJECUTAR FUNCION DE CHEQUEO DE USUARIO -->
		<div class="row center-xs middle-xs">	
			<b-button style="margin-left:1rem;width:220px" v-on:click="ingresar()" type="is-warning" rounded  icon-left="location-enter">
				Ingresar
		  	</b-button>
		</div>
	</div>
</div>`,


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
INICIO DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS*/
methods:{

	//metodo para mantener la variable de usuario en STORE 
	actualizo_usuario(e){//_______________________________________________________________________________________________
		store.state.datos_login.usuario = e.target.value;
	  },
	//metodo para mantener la variable de contraseña en STORE 	  
	actualizo_password(e){//_______________________________________________________________________________________________
        store.state.datos_login.password = e.target.value;
    },
	/*metodo de consulta a base de datos para validar usuario e ingresar a la aplicacion 
	CHEQUEA LA CONEXIÓN y si la misma no es adecuada rechaza el ingreso.
	GUARDA ADEMÁS LOS DATOS DE PERMISOS, EMPRESA, CELULAR Y CORREO ELECTRONICO
	*/
	ingresar: function(){  
		app.chequeo_conexion();
		var user = store.state.datos_login.usuario;
		var pass = store.state.datos_login.password;
		var autorizado = false;
		 if(user.length > 0 && pass.length > 0)
		 {
					if (store.state.hayconexion == true) {
							var getUrl = window.location;
							var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
							var phpfile = baseUrl + '/php/login.php?timestamp=' + new Date().getTime();
							var xhr = new XMLHttpRequest();	
							xhr.open('GET',phpfile,true);
							xhr.onload = function() {
								var data = JSON.parse(this.response);
								store.state.usuarios = data;
									for (var i=0; i<data.length; i++) 
										{ 	var  usuariodb=data[i].nombre;
											var passworddb = data[i].password;	
											if ( user == usuariodb && pass == passworddb)
											{
												app.obtengo_ubicacion();
												store.state.datos_login.celular = data[i].celular;
												store.state.datos_login.email = data[i].email;
												store.state.datos_login.permisos = data[i].permisos;	
												store.state.datos_login.empresa = data[i].empresa;	
												store.state.centro_mapa.latitud = store.state.centro_gps.latitud;
												store.state.centro_mapa.longitud = store.state.centro_gps.longitud;
												store.state.datos_login.revisar = data[i].revisar;	
												store.state.datos_login.elemento = data[i].elemento;	
												store.state.datos_login.municipio = data[i].municipio;	
												store.state.datos_login.mensaje = '';	
												switch(store.state.datos_login.permisos)
												{
													case 'ADMINISTRADOR':
														store.state.datos_login.nivel_acceso = 20;
													break;	
													//CONTROL TOTAL
													case 'OPERADOR1':
														store.state.datos_login.nivel_acceso = 15;
													break;			
													//RESTRICCION PARA USUARIOS										
													case 'OPERADOR2':
														store.state.datos_login.nivel_acceso = 10;
													break;	
													//RESTRICCIÓN PARA USUARIOS, NUEVA CONEXIÓN, ELIMINAR
													case 'OPERADOR3':
														store.state.datos_login.nivel_acceso = 5;
													break;	
													case 'OPERADOR4':
														store.state.datos_login.nivel_acceso = 3;
													break;	
												    //RESTRICCIÓN PARA USUARIOS, NUEVA CONEXIÓN, ELIMINAR, MODIFICAR GEOMETRIA
													case 'CONSULTA':
														store.state.datos_login.nivel_acceso = 0;
													break;	
													//SOLAMENTE CONSULTAR
													 //RESTRICCIÓN PARA USUARIOS, NUEVA CONEXIÓN, ELIMINAR, MODIFICAR GEOMETRIA, DATOS FOTOS Y AUDIOS
													default:
													store.state.datos_login.nivel_acceso = 0;
												}
												autorizado = true;
												i = data.length;
												app.obtengo_ubicacion();
												store.state.layout_visible = 'layout_menu_principal';
											}
										}
									if (autorizado == false)
									{
										store.state.datos_login.mensaje = "Usuario o Contraseña incorrectos";
									}
							};
							xhr.send();
						}//fin de bloque chequeo conexion
						else		
						{
							alert("No se puede ingresar sin conexión");
						}
		}// fin del bloque que chequea los datos del dom
		else{
			store.state.datos_login.mensaje = "Ingresar usuario y contraseña";
			}	
		}
	}
/*FIN FIN FIN FIN  DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

})