<template>
    <div>
        <b-modal id="session" ref="" hide-footer hide-header>
            <div class="d-block text-center">
                <h3>La sesión ha caducado</h3>
            </div>
            <b-button class="mt-3" variant="primary" block @click="$router.replace('/login')">¡Llévame al login!</b-button>
        </b-modal>

        <div class="container mt-5">
            <div class="justify-content-center d-flex">           
                <h1 class="justify-content-center">Sistema de censo</h1>
            </div>
                
            <button @click="changeView()" class="btn btn-info mt-4">
                <span v-if="pcView">Ver impresoras</span>
                <span v-else>Ver computadoras</span>
            </button>
            <div class="my-3">Se observan {{ datosmios.length }} registros de un total de {{ respuesta.length }}</div>
            <div class="row m-0 mt-1 mb-4">
                <div class="row d-flex flex-wrap">
                    <div class="input-group pl-3 col-12 col-md-4">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                <font-awesome-icon icon="search" class="user-icon-input" />
                            </span>
                        </div>
                        <input 
                            type="text"
                            id="Inventario"
                            v-on:keyup="extraeInventario()"
                            class="form-control input-login-form shadow-none"
                            placeholder="Número de inventario ó de serie"
                        />  <!-- https://www.tutorialesprogramacionya.com/vueya/detalleconcepto.php?punto=7&codigo=7&inicio=0 -->
                    </div>
                    
                    <div class="d-flex flex-wrap my-1">
                        <div class="col-md-2 col-12 mt-3" v-show="pcView">
                            <select
                                name="tipo"
                                id="tipo"
                                @change="buscaValor()"
                                class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Tipo</option>
                                    <option v-for="opcion1 in tipo" :key="opcion1.idActivoFijo" :value='opcion1.activoFijo'>{{opcion1.activoFijo}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 col-12 mt-3" v-show="!pcView">
                            <select
                                name="tipo"
                                id="tipo"
                                @change="buscaValor()"
                                class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Tipo</option>
                                    <option v-for="opcion in tipoPrinters" :key="opcion.tipo" :value='opcion.tipo'>{{opcion.tipo}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 col-12 mt-3">
                            <select name="Ubica" id="Ubica" 
                            @change="buscaUbica()"
                            class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Ubicación</option>
                                <option v-for="opcion in Ubica" :key="opcion.ubicacion" :value='opcion.ubicacion'>{{opcion.ubicacion}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 col-12 mt-3" v-show="pcView">
                            <select name="Procesador" id="Procesador" 
                            @change="buscaProcesador()"
                            class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Procesador</option>
                                <option v-for="opcion in procesa" :key="opcion.procesa" :value='opcion.procesa'>{{opcion.procesa}}</option>
                            </select>
                        </div>
                        
                        <div class="col-md-2 col-12 mt-3" v-show="pcView">
                            <select name="SisOper" id="SisOper" 
                            @change="buscaSisOper()"
                            class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Sistema Operativo</option>
                                <option v-for="opcion in os" :key="opcion.osname" :value='opcion.osname'>{{opcion.osname}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 col-12 mt-3">
                            <select name="Uso" id="Uso" 
                            @change="buscaUso()"
                            class="form-control select-login-form shadow-none">
                                <option value="Todos" selected>Uso</option>
                                <option v-for="opcion in uso" :key="opcion.uso" :value='opcion.uso'>{{opcion.uso}}</option>
                            </select>
                        </div>
                        

                    </div>
                </div>
            </div>
            
            <div v-if="pcView" class="table-responsive table-fixed text-nowrap justify-content-md-center"
                style="max-height: 350px;">
                <table :class="['table', 'table-sm', 'text-center', { 'table-hover': admin(), 't-hov': admin() }]" style="font-size:14px">
                    <thead class="thead-light text-uppercase">
                        <tr>
                            <th v-for="pcHead in pcHeads" :key="pcHead" class="sticky-top">{{ pcHead }}</th>
                        </tr>
                    </thead>
                    <!-- <tbody class="overflow-auto thov"  v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)">
                            <td class="text-primary">{{ item.noInventario }}</td> -->

                    <!-- <tbody class="overflow-auto thov"  v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)" 
                            v-if="(seleccionado == item.activoFijo || seleccionado == '0')  -->
                    <tbody class="overflow-auto thov"  v-for="item in datosmios" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)" > 
                                <!-- https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods -->
                            <td class="text-primary">{{ item.noInventario }}</td>
                            <td>{{ item.activoFijo }}</td>
                            <td>{{ item.modelo }}</td>
                            <td>{{ item.marca }}</td>
                            <td>{{ item.noSerie }}</td>
                            <td>{{ item.procesador }}</td>
                            <td>{{ item.vProcesador }}</td>
                            <td>{{ item.hdd }}</td>
                            <td>{{ item.memoriasz }}</td>
                            <td>{{ item.memoria }}</td>
                            <td>{{ item.vMemoria }}</td>
                            <td>{{ item.graficos }}</td>
                            <td>{{ item.osname }}</td>
                            <td>{{ item.noResguardo }}</td>
                            <td>{{ item.uResponsable }}</td>
                            <td>{{ item.nombreResponsable }}</td>
                            <td>{{ item.ubicacion }}</td>
                            <td>{{ item.uso }}</td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <div class="text-center">
                    <b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
                </div>
            </div>

            <div v-else class="table-responsive table-fixed text-nowrap justify-content-md-center"
                id="myTableStyle">
                <table :class="['table', 'table-sm', 'text-center', { 't-hov': admin(),  'table-hover': admin()}]">
                    <thead class="thead-light text-uppercase">
                        <tr>
                            <th v-for="printerHead in printerHeads" :key="printerHead" class="sticky-top">{{ printerHead }}</th>
                        </tr>
                    </thead>
                    <!-- <tbody v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)"> -->

                    <!-- <tbody v-for="item in respuesta" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)" v-if="seleccionado == item.tipo || seleccionado == '0'"> -->
                            
                    <tbody v-for="item in datosmios" :key="item.noInventario">
                        <tr @click="watchRow(item.noInventario)" 
                            >
                            <!-- https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Useful_string_methods -->
                            <td class="text-primary">{{ item.noInventario }}</td>
                            <td>{{ item.tipo }}</td>
                            <td>{{ item.modelo }}</td>
                            <td>{{ item.marca }}</td>
                            <td>{{ item.noSerie }}</td>
                            <td>{{ item.descripcion }}</td>
                            <td>{{ item.noResguardo }}</td>
                            <td>{{ item.uResponsable }}</td>
                            <td>{{ item.nombreResponsable }}</td>
                            <td>{{ item.ubicacion }}</td>
                            <td>{{ item.uso }}</td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <div class="text-center">
                        <b-spinner variant="primary" label="Spinning" v-if="loading"></b-spinner>
                    </div>
            </div>

                <button 
                    v-on:click="onDescarga(respuesta)"
                    class="btn btn-lg btn-success mt-3">Descargar
                </button>
        </div>

        <div
            style="margin-top:200px; left: 0px; position: absolute;"
            class="container-fluid px-0"
        >
            <footer id="footer" style="left: 0px;" class="text-center">
                <div class="separador"></div>
                <div class="contenedor-footer p-3">
                    <div class="text-white mt-3" style="font-size: 11px;">
                        <p>
                            Hecho en México, todos los derechos reservados 2020.
                            <br />
                            Esta página puede ser reproducida con fines no
                            lucrativos, siempre y cuando no se mutile, se cite
                            la fuente
                            <br />
                            completa y su dirección electrónica. De otra forma,
                            requiere permiso previo por escrito de la
                            institución.
                        </p>
                    </div>
                </div>
            </footer>
        </div>

    </div>
    

</template>

<script>
import axios from 'axios';
import config from '../config/config';
// import Swal from 'sweetalert2'
/*import strinify from "csv-stringify";
import fs from "file-system";
*/
import MiXLSX from 'xlsx';

export default {
    data() {
        return {
            loading: null,
            pcView: true,
            alternativeView: 'Ver impresoras',
            pcHeads: [
                "Inventario",
                "Tipo",
                "Modelo",
                "Marca",
                "Serie",
                "Procesador",
                "Velocidad de procesador (MHz)",
                "ROM (GB)",
                "RAM (MB)",
                "Tipo de memoria",
                "Velocidad de memoria (MHz)",
                "Gráficos",
                "Sistema operativo",
                "Resguardo",
                "Unidad responsable",
                "Responsable",
                "Ubicación",
                "Uso"
            ],
            printerHeads: [
                "Inventario",
                "Tipo",
                "Modelo",
                "Marca",
                "Serie",
                "Descripción adicional",
                "Resguardo",
                "Unidad Responsable",
                "Responsable",
                "Ubicacion",
                "Uso",
            ],
            respuesta: [],
            datosmios: [],
            tipo: [],
            Ubica: [],
            uso: [],
            procesa: [],
            os: [],
            tipoPrinters: [],
            seleccionado: String,
            seleccionadoUbica: String,
            seleccionadoUso: String,
            seleccionadoProcesador: String,
            seleccionadoOS: String,
            miNoInventario: String,
            file: null
        }
    },

    created() {
        this.getComputers();
        this.traetipo();
        this.traeUbica();
        this.traeUso();
        this.traeProcesador();
        this.traeOS();
        this.seleccionado = "Todos";
        this.seleccionadoUbica = "Todos";
        this.seleccionadoUso = "Todos";
        this.seleccionadoProcesador = "Todos";
        this.seleccionadoOS = "Todos";
        this.miNoInventario = "";
        this.contador = 0;
    },

    methods: {
        async getComputers() {
            this.loading = true;
            this.respuesta = [];
            this.datosmios = [];
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/computers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.respuesta = res.data.equipo;
                this.loading = false;
            })
            .catch((error) => {
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
            axios.get(`${ config.api }/api/computers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.datosmios = res.data.equipo;
                this.loading = false;
            })
            .catch((error) => {
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
        },
        async getPrinters() {
            this.loading = true;
            this.respuesta = [];
            this.datosmios = [];
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/printers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.respuesta = res.data.printers;
                this.loading = false;
            })
            .catch(error => {
                console.log(error.response);
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
            axios.get(`${ config.api }/api/printers`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => {
                this.datosmios = res.data.printers;
                this.loading = false;
            })
            .catch(error => {
                console.log(error.response);
                if(error.response.status === 409) {
                    localStorage.clear();
                    this.$bvModal.show('session');
                }
            });
        },
        watchRow(noInventario) {
            localStorage.setItem('noInventario', noInventario);
            if(this.pcView)
                this.$router.push('./updateEquip');
            else
                this.$router.push('./updatePrinter');
        },
        async traetipo(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/tipo`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.tipo = res.data.tipo)
            .catch(err => console.log(err));
        },
        async traeUbica(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/ubica`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.Ubica = res.data.ubica)
            .catch(err => console.log(err));
        },
        async traeUso(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/uso`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.uso = res.data.uso)
            .catch(err => console.log(err));
        },
        async traeOS(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/sisoper`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.os = res.data.sisoper)
            .catch(err => console.log(err));
        },
        async traeProcesador(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/procesador`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.procesa = res.data.procesador)
            .catch(err => console.log(err));
        },
        async traetipoImpresora(){
            const localToken = window.localStorage.token;
            axios.get(`${ config.api }/api/tipoPrinters`, {
                headers: {
                    token: localToken
                }
            })
            .then(res => this.tipoPrinters = res.data.tipoPrinters)
            .catch(err => console.log(err));
        },
        // watchRow() {
        //     if(JSON.parse(window.localStorage.isAdmin))
        //         this.$router.push('./updateEquip')
        // },
        changeView() {
            this.loading = true;
            this.contador = 0;
            this.seleccionado = "Todos";
            this.seleccionadoUbica = "Todos";
            this.seleccionadoUso = "Todos";
            this.seleccionadoProcesador = "Todos";
            this.seleccionadoOS = "Todos";
            this.miNoInventario = "";
            this.tipo=[];
            this.tipoPrinters=[];
            this.Ubica=[];
            this.uso=[];
            this.procesa=[];
            this.os=[];
            if (this.pcView) {
                this.pcView = !this.pcView;
                this.getPrinters();
                this.traetipoImpresora();
                this.traeUso();
                this.traeUbica();
            }
            else{
                this.pcView = !this.pcView;
                this.getComputers();
                this.traetipo();
                this.traeUbica();
                this.traeUso();
                this.traeProcesador();
                this.traeOS();
            }
            this.generaMisDatos();
        },
        admin() {
            return JSON.parse(window.localStorage.isAdmin);
        },
        generaMisDatos(){
            this.datosmios = [];
            if(this.pcView){
                for (let i = 0, j = 0; i < this.respuesta.length; i++){
                    if ((this.seleccionado == "Todos" || this.seleccionado == this.respuesta[i].activoFijo)
                        && (this.seleccionadoUbica == this.respuesta[i].ubicacion || this.seleccionadoUbica == 'Todos') 
                        && (this.seleccionadoUso == this.respuesta[i].uso || this.seleccionadoUso == 'Todos') 
                        && (this.seleccionadoOS == this.respuesta[i].osname || this.seleccionadoOS == 'Todos') 
                        && (this.seleccionadoProcesador == this.respuesta[i].procesador || this.seleccionadoProcesador == 'Todos')
                        && ((this.respuesta[i].noInventario.indexOf(this.miNoInventario) != -1) || (this.respuesta[i].noSerie.indexOf(this.miNoInventario) != -1))){
                        this.datosmios[j++] = this.respuesta[i];
                    }
                }
            } else {
                for (let i = 0, j = 0; i < this.respuesta.length; i++){
                    if ((this.seleccionado == "Todos" || this.seleccionado == this.respuesta[i].tipo)
                    && (this.seleccionadoUbica == this.respuesta[i].ubicacion || this.seleccionadoUbica == 'Todos')
                    && (this.seleccionadoUso == this.respuesta[i].uso || this.seleccionadoUso == 'Todos')
                    && ((this.respuesta[i].noInventario.indexOf(this.miNoInventario) != -1) || (this.respuesta[i].noSerie.indexOf(this.miNoInventario) != -1))){
                        this.datosmios[j++] = this.respuesta[i];
                    }
                }
            }
        },
        onDescarga(datos){
            var miDato;
            const fecha = new Date();
            const anyo = fecha.getFullYear();
            const mes = fecha.getMonth() + 1;
            const dia = fecha.getDate();
            const hora = fecha.getHours();
            const min = fecha.getMinutes();
            const seg = fecha.getSeconds();
            var nomArch = this.seleccionado;
            if (dia > 0 && dia < 10){
                nomArch += "0";
            }
            nomArch += dia;
            if (mes > 0 && mes < 10){
                nomArch += "0";
            }
            nomArch += mes;
            nomArch += anyo;
            if (hora >= 0 && hora < 10){
                nomArch += "0";
            }
            nomArch += hora;
            if (min >= 0 && min < 10){
                nomArch += "0";
            }
            nomArch += min;
            if (seg >= 0 && seg < 10){
                nomArch += "0";
            }
            nomArch += seg;
            if (this.pcView){
                nomArch = "Computadoras" + nomArch;
                miDato = MiXLSX.utils.json_to_sheet([],{ header : this.pcHeads});
            } else {
                miDato = MiXLSX.utils.json_to_sheet([],{header : this.printerHeads});  // https://docs.sheetjs.com
                nomArch = "Impresoras" + nomArch;
            }
            MiXLSX.utils.sheet_add_json(miDato,this.datosmios,{
              skipHeader:true, origin : "A2"});
            const LibroTrabajo = MiXLSX.utils.book_new();
            MiXLSX.utils.book_append_sheet(LibroTrabajo, miDato, this.seleccionado);
            nomArch += ".xlsx";
            MiXLSX.writeFile(LibroTrabajo, nomArch);
            return JSON.parse(localStorage.isAdmin);
        },
        buscaValor(){
            this.seleccionado = document.getElementById("tipo").value;
            this.generaMisDatos();
        },
        buscaUbica(){
            this.seleccionadoUbica = document.getElementById("Ubica").value;
            this.generaMisDatos();
        },
        extraeInventario(){
            this.miNoInventario = document.getElementById("Inventario").value;
            this.generaMisDatos();
        },
        buscaUso(){
            this.seleccionadoUso = document.getElementById("Uso").value;
            this.generaMisDatos();
        },
        buscaProcesador(){
            this.seleccionadoProcesador = document.getElementById("Procesador").value;
            this.generaMisDatos();
        },
        buscaSisOper(){
            this.seleccionadoOS = document.getElementById("SisOper").value;
            this.generaMisDatos();
        },
    },
}
</script>

<style scoped>
.header-f {
    background-color: #bb8800;
}
.t-hov:hover {
    cursor: pointer;
}
#footer {
    bottom: 0px;
    position: absolute;
    width: 100%;
}
.separador {
    width: 100%;
    background: #2e5795;
    height: 1rem;
}

.contenedor-footer {
    width: 100%;
}
.cont-text-foo {
    font-size: 12px;
}
footer {
    background: #1b3d70;
}

#myTableStyle {
    max-height: 350px;
    font-size: 14px;
}

.black {
    background-color: black;
}

.red {
    background-color: red;
}
</style>