Vue.component('dl_usuarios',{
    data: function () {
            return {
                usuario: store.state.datos_login.usuario,
                password: store.state.datos_login.password,
                mensaje: store.state.datos_login.mensaje,
                email: store.state.datos_login.email,
                celular: store.state.datos_login.celular,
                empresa: store.state.datos_login.empresa,
                permisos: store.state.datos_login.permisos,
                revisar: store.state.datos_login.revisar,
                elemento: store.state.datos_login.elemento,
                municipio: store.state.datos_login.municipio,
                id: 0,
                tipo: 'modificar',
                logo: 'recursos/logos/icon-384x384.png',
            }
        },	
    template: //html 
    `
    <div>
    <!--ENCABEZADO DE MENÚ INICIAL - IMAGEN CON LOGO Y TEXTO DESCRIPTIVO DE EMPRESA -->
            <div class="row">
                        <b-button class="ml-5 mt-2 mb-2 pl-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">Usuarios</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="agregar_usuario()" type="is-warning" rounded  icon-left="account-plus">
                    Agregar usuario
                  </b-button>
                </header>
                <section class="modal-card-body">
                      <div class="box m-0 p-0"  v-for="(value, key) in $store.state.usuarios">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Eliminar usuario" multilined position="is-right" type="is-danger is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="borrar_usuario(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                            </b-tooltip>  
                                            <b-tooltip label="Modificar usuario" multilined position="is-right" type="is-warning is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="modificar_usuario(key)" type="is-warning"  icon-right="account-edit"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Usuario:</b> {{value.nombre}} <br><b>Permisos:</b> {{value.permisos}} <br><b>Email:</b> {{value.email}} <br><b>Celular:</b> {{value.celular}}<br><b>Empresa:</b> {{value.empresa}}<br><b>Revisar:</b> {{value.revisar}}<br><b>Elemento:</b> {{value.elemento}}<br><b>Municipio:</b> {{value.municipio}}</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_Usuario'"
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">Usuario</p>
    </header>
    <section class="modal-card-body">
    <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">
Usuario
    <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>

<div class="row center-xs middle-xs">
email
    <b-input style="margin-left:1rem;width:220px" value=""  type="email" rounded maxlength="30"  @input.native="actualizo_email" v-model="email">
    </b-input>
</div>
<div class="row center-xs middle-xs">
telefono
    <b-input style="margin-left:1rem;width:220px" value=""  rounded maxlength="30"  @input.native="actualizo_celular" v-model="celular">
    </b-input>
</div>
<div class="column is-full-mobile p-1 m-1">
Empresa
        <b-select  v-model="empresa" placeholder="IM">
              <option value = "IM">IM</option>
              <option value = "MTOP">MTOP</option>
              <option value = "PRIVADO">PRIVADO</option>                                       
        </b-select>
</div> 

<div class="column is-full-mobile p-1 m-1">
Permisos
        <b-select    v-model="permisos" placeholder="CONSULTA">
            <option value = "ADMINISTRADOR">ADMINISTRADOR</option>
            <option value = "OPERADOR1">OPERADOR1</option>
            <option value = "OPERADOR2">OPERADOR2</option>  
            <option value = "OPERADOR3">OPERADOR3</option>   
            <option value = "OPERADOR4">OPERADOR4</option>                   
            <option value = "CONSULTA">CONSULTA</option>                   
        </b-select>
</div> 

<b-switch true-value="1" false-value="0" v-model="revisar"  
type="is-success">
    Revision
</b-switch>

<div class="column is-full-mobile p-1 m-1">
Elemento
        <b-select    v-model="elemento" placeholder="Todos">
            <option value = "Red">Red</option>
            <option value = "Captaciones">Captaciones</option>
            <option value = "Todos">Todos</option>                   
        </b-select>
</div> 

<div class="column is-full-mobile p-1 m-1">
Municipio
        <b-select    v-model="municipio" placeholder="Todos">
            <option value = "A">A</option>
            <option value = "B">B</option>
            <option value = "C">C</option>
            <option value = "D">D</option>
            <option value = "E">E</option>
            <option value = "F">F</option>
            <option value = "G">G</option>
            <option value = "CH">CH</option>
            <option value = "Todos">Todos</option>                   
        </b-select>
</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_usuario_db()" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
       Aplicar
    </b-button>
    </footer>
</div>
</form>
</b-modal>






    </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){//_______________________________________________________________________________________________
           var userreg = /^[a-zA-Z0-9]+$/;
            if  (!userreg.test(this.usuario))
            {
                this.$buefy.toast.open({duration: 1000, message: 'Caracter no permitido'});
                this.usuario = this.usuario.slice(0,-1);
            }
          },
        //metodo para mantener la variable de contraseña en STORE 	  
        actualizo_password(e){//_______________________________________________________________________________________________
            var userreg = /^[a-zA-Z0-9]+$/;
            if  (!userreg.test(this.password))
            {
                this.$buefy.toast.open({duration: 1000, message: 'Caracter no permitido'});
                this.password = this.password.slice(0,-1);
            }
        },
        actualizo_email(e){//_______________________________________________________________________________________________
        },
        actualizo_empresa(e){//_______________________________________________________________________________________________
        },
        actualizo_celular(e){//_______________________________________________________________________________________________
        },
        borrar_usuario(e){//_______________________________________________________________________________________________
            this.tipo = 'borrar';
            this.id = store.state.usuarios[e].id;
            this.modificar_usuario_db();
        },
        modificar_usuario(e){//_______________________________________________________________________________________________
            this.usuario = store.state.usuarios[e].nombre;
            this.password = store.state.usuarios[e].password;
            this.mensaje = store.state.usuarios[e].mensaje;
            this.email = store.state.usuarios[e].email;
            this.celular = store.state.usuarios[e].celular;
            this.empresa = store.state.usuarios[e].empresa;
            this.permisos = store.state.usuarios[e].permisos;
            this.revisar = store.state.usuarios[e].revisar;
            this.elemento = store.state.usuarios[e].elemento;
            this.municipio = store.state.usuarios[e].municipio;
            this.id = store.state.usuarios[e].id;
            store.state.modal_visible = 'Cambiar_o_Modificar_Usuario';
            this.tipo = 'modificar';
        },
        agregar_usuario: function(){  
            this.usuario = '';
            this.password = '';
            this.mensaje = '';
            this.email = '';
            this.celular = '';
            this.empresa = 'IM';
            this.permisos = 'CONSULTA';
            this.revisar = 'REVISAR';
            this.elemento = 'Todos';
            this.municipio = 'Todos';
            store.state.modal_visible = 'Cambiar_o_Modificar_Usuario';
            this.tipo = 'nuevo';
        },
        modificar_usuario_db: function(){    
            store.state.datos_login.mensaje = '';
            var padre = this; 
            app.chequeo_conexion();
            if (this.tipo == 'nuevo')
            {
                for(s=0;s<store.state.usuarios.length;s++)
                {
                    if(this.usuario == store.state.usuarios[s].nombre)
                    {
                        store.state.datos_login.mensaje = "Usuario ya existe";
                        return;
                    }
                }
            }   
            if((this.usuario.length > 0 && this.password.length > 0) || this.tipo == 'borrar')
            {
                        if (store.state.hayconexion == true) {
                            var tipo_consulta = this.tipo;
                            seguir = true;
                            var sql = '';
                            switch (tipo_consulta)
                            {
                                case 'borrar':
                                sql = "DELETE FROM usuarios2 WHERE ID = " + this.id + " LIMIT 1";
                                break;
                                case 'modificar':
                                sql = "UPDATE usuarios2 SET NOMBRE = '" + this.usuario + "', PASSWORD = '" + this.password + "', CELULAR = '" + this.celular + "', EMAIL = '" + this.email + "', PERMISOS = '" + this.permisos + "', EMPRESA = '" + this.empresa + "', ACTIVO = 1 , REVISAR = " + this.revisar + ", ELEMENTO = '" + this.elemento + "', MUNICIPIO = '" + this.municipio + "' WHERE ID = " + this.id;
                                break;
                                case 'nuevo':
                                sql = "INSERT INTO usuarios2 (NOMBRE,PASSWORD,CELULAR,EMAIL,PERMISOS,EMPRESA,ACTIVO,REVISAR,ELEMENTO,MUNICIPIO) VALUES ('" + this.usuario + "','" + this.password + "','" + this.celular + "','" + this.email + "','" + this.permisos + "','" + this.empresa + "',1," + this.revisar + ",'" + this.elemento + "','" + this.municipio + "')";
                                break;
                                default:
                                seguir = false;    
                            }
                            if (seguir == true)
                            {    
                                var getUrl = window.location;
                                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                var phpfile = baseUrl + '/php/usuarios.php';
                                var fd = new FormData();
                                fd.append("sql",sql);
                                var xhr = new XMLHttpRequest();	
                                xhr.open('POST',phpfile,true);
                                xhr.onload = function() {
                                    var data = JSON.parse(this.response);
                                        if (data[0].usuario != 'FALSO')
                                        {
                                            padre.$buefy.toast.open({duration: 3000, message: 'Usuarios actualizados correctamente'});
                                            store.state.usuarios = data;
                                            store.state.modal_visible = '';
                                        }
                                };
                                xhr.send(fd);
                                } 
                            }//fin de bloque chequeo conexion
                            else		
                            {
                                alert("No se puede ingresar sin conexión");
                            }
            }// fin del bloque que chequea los datos del dom
            else{
                store.state.datos_login.mensaje = "Corregir datos";
                }	
            }
            
        }
    /*FIN FIN FIN FIN  DE METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS METODOS
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
   
    })