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>

<!--
<b-notification type="is-danger"
aria-close-label="Close notification">
CUIDADO!!!!! ESTE SITIO SE ALOJA EN UN SERVIDOR DE DESARROLLO 
TODOS LOS CAMBIOS REALIZADOS EN LOS CONTENIDOS DE ESTE APLICATIVO SE ACTUALIZARÁN PERIÓDICAMENTE
ESTA VERSIÓN DEL APICATIVO PERMITE REALIZAR PUEBAS SIN RIESGO DE MODIFICAR LA BASE DE PRODUCCION
</b-notification> -->
<!--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:green">Catastro de Conexiones v4.6</p></b>
			</div>	
		</div>
<!--INGRESO DE USUARIO - FIELD CON MENSAJE E ICONO -->
		<div class="row center-xs middle-xs">
		    <b-field type="is-success  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-success 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-success" 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.datos_login.descripcion = data[i].descripcion;
												store.state.centro_mapa.latitud = store.state.centro_gps.latitud;
												store.state.centro_mapa.longitud = store.state.centro_gps.longitud;
												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;	
												    //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
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

})