Vue.component('articulo', {
    props: ['publicacion', 'txtbtn'],
    template: `
    <div class="col-md-4">
        <div class="card-publicacion">
            <div class="card-header">
                <img class="img-fluid" :src="publicacion.imagen" :alt="publicacion.altImagen">
            </div>
            <div class="card-body-p container">
                <h4 class="title-article">{{publicacion.titulo}}</h4>
                <span class="data-article">{{publicacion.autor}} | {{publicacion.fecha}}</span>
                <p class="info-article pt-1">{{publicacion.preview}}</p>
            </div>
            <div class="card-footer-p container">
                <b-button variant="outline-green" class="mb-3" @click="regresar();"  :href="publicacion.url">
                    <b-icon icon="eye" @click="regresar();"></b-icon>{{txtbtn}}
                </b-button>
            </div>
        </div>
    </div>
  `
});

Vue.component('articulos-recientes', {
    props: ['publicacion'],
    template: `
    <div class="card-reciente-post m-2">
        <a :href="publicacion.url" class="cursor">
            <img class="img-fluid" :src="publicacion.imagen" :alt="publicacion.altImagen">
            <p class="pt-2 title-reciente">{{publicacion.titulo}}</p>
        </a>
    </div>
  `
});

const messages = {
    es: {
        message: {
            lang: 'Idioma',
            esp: 'Español',
            eng: 'Inglés',

            trianguloTitulo: 'TECNOLOGÍA INTELLIGENTE',
            trianguloParrafoUno: 'Desde corporativos multinacionales hasta pequeñas empresas, nuestras',
            trianguloBoldUno: 'soluciones',
            trianguloParrafoDos: 'transforman la operación de las empresas.',
            trianguloBoldDos: 'Desarrollamos',
            trianguloParrafoTres: 'aplicaciones de TI con',
            trianguloBoldtres: 'visión de futuro',
            botontext: 'Sobre nosotros',
            tituloFuturo: 'UN SALTO HACIA EL FUTURO',
            futuroParrafoUno: 'En los próximos 10 años, el avance exponencial de la tecnología transformará nuestras vidas más que en el último siglo.',
            futuroBoldUno: '¿Está preparado?',
            futuroParrafoDos: 'Nuestras soluciones de emisión, recepción y conciliación de comprobantes fiscales digitales, desarrollos web y aplicaciones móviles se construyen listas para un mundo de convergencia tecnológica donde la web se fusionará con realidad aumentada y realidad virtual sobre las bases de inteligencia artificial basada en big data. Nuestro equipo de profesionales se actualiza constantemente',
            futuroBoldDos: 'con las herramientas para construir el futuro.',

            soluciones: 'CONOCE NUESTRAS SOLUCIONES',
            cardfactura: 'Factura electrónica',
            cardfacturatext: 'Nuestra plataforma es accesible y escalable desde PyMEs hasta grandes corporativos.',
            cardconciliacion: 'Conciliación de CFDI',
            cardconciliaciontext: 'Consulta y analiza tus CFDIs emitidos y recibidos en el SAT ¡no más discrepancias!',
            cardvalidacion: 'Validación de CFDI',
            cardvalidaciontext: 'Automatiza la recepción de CFDIs, diseña un flujo para su aprobación y valídalos al instante.',
            carddesarrollo: 'Desarrollo de software',
            carddesarrollotext: 'Nuestro equipo de profesionales transforma problemas en soluciones tecnológicas.',
            carddisenio: 'Diseño digital',
            carddiseniotext: 'Soluciones para sitios web y creación de contenidos con animación digital en 2D o 3D.',
            cardplataforma: 'Plataforma educativa',
            cardplataformatext: 'Aprendizaje en línea, streaming y gestión administrativa para escuelas y centros educativos.',
            cardinventario: 'Control de inventario',
            cardinventariotext: 'Gestiona las existencias y automatiza entradas y salidas con nuestra solución multialmacén.',
            cardoutsourcing: 'Outsourcing de procesos',
            cardoutsourcingtext: 'Generamos resultados consistentes para que puedas enfocarte en tu estrategia de negocio.',
            cardnomina: 'Nómina electrónica',
            cardnominatext: 'Emite fácilmente tus recibos e integra cualquier aplicación con nuestra solución en la nube.',
            cardcontabilidad: 'Contabilidad electrónica',
            cardcontabilidadtext: 'Reportes XML precisos para el SAT. Íntegra tu sistema o ERP y olvídate de cambios futuros.',
            cardcobranza: 'Control cobranza',
            cardcobranzatext: 'Gestión, reportes y analíticas de la cartera con emisión automática de Complementos de Pago.',
            cardaplicaciones: 'Aplicaciones web',
            cardaplicacionestext: 'Convertimos tus ideas en soluciones en línea seguras, escalables y con el máximo desempeño.',
            cardia: 'Inteligencia artificial',
            cardiatext: 'Desde sencillos bots hasta redes generativas adversarias, creamos contigo el futuro.',
            cardbigdata: 'Big data',
            cardbigdatatext: 'Procesamos petabytes en minutos para que tomes decisiones de negocio en tiempo real.',


            transbusinesstxt: 'aplicaciones de negocio',
            transcustomerstxt: 'clientes satisfechos',
            transconsultingtxt: 'especialidades de consultoría',
            transfortunetxt: 'clientes Fortune 500',
            transserviciostxt: 'disponibilidad de servicios',
            transdevelopmentstxt: 'desarrollos entregados',
            transexperiencetxt: 'años de experiencia',
            seguridadinfo: 'Seguridad de la Información',
            seguridadinfotext: 'Nos apegamos a las mejores prácticas de la industria, los Centros de Datos que utilizamos están certificados en HIPPA, PCI-DSS, ISO 27001:2013, NIST 800-53, SOC 2 y para plataformas de misión crítica adicionalmente ISO 27017:2015, ISO 27018:2014, ISO 9001:2015, ISO 22301:2012, ISO 31000:2009, SOC 1 y SOC3.',
            alcanceglobal: 'Alcance Global',
            alcanceglobaltext: 'Nuestros clientes se encuentran en México pero también en Norteamérica, Europa y Asia, es por esto que proveemos soluciones y servicios 24/7 en español e inglés. Trabajamos localmente con alcance global.',


            acercade: 'Acerca de',
            nosotros: 'Nosotros',
            nosotrosUno: "ITTEC es una empresa dedicada al desarrollo de tecnologías de información, sistemas de misión crítica y consultoría para el control y optimización de procesos en las organizaciones. ",
            nosotrosDos: "De manera directa colaboramos con grandes y medianas empresas, mientras que a través de nuestra red nacional de distribuidores atendemos el mercado masivo. ",
            titulomision: "Nuestra",
            titulomisionDos: "Misión",
            mision: "La misión de ITTEC es desarrollar sistemas de información que permitan a las organizaciones aprovechar al máximo sus recursos, optimizar sus procesos e incrementar la satisfacción de sus Clientes.",
            titulovision: "Nuestra",
            titulovisionDos: "Visión",
            vision: "Para 2020, buscamos ser reconocidos por nuestro liderazgo en el diseño, operación y mantenimiento de sistemas de información en la nube, que contribuirán a la optimización de procesos en organizaciones de todo México, fomentando así a nivel internacional la competitividad de éstas por medio de más de diez plataformas de negocio en línea",
            titulovalores: 'Our',
            titulovaloresdos: 'Values',
            valores: '',

            fconoce: 'Conoce',
            facelec: 'Factura eletrónica',
            facelectxt: 'Factura eletrónica',
            nomelec: 'Nómina electrónica',
            nomelectxt: 'Nómina electrónica',
            contelec: 'Contabilidad eletrónica',
            conciliacion: 'Conciliación de CFDI',
            continventario: 'Control de inventario',
            cobranza: 'Control de cobranza',
            plataforma: 'Plataforma educativa',
            fconstruye: 'Construye',
            desoftware: 'Desarrollo de software',
            appweb: 'Aplicaciones web',
            ia: 'Inteligencia artificial',
            biddata: 'Big data',
            disenio: 'Diseño digital',
            outsourcing: 'Outsourcing de procesos',
            fcontacto: 'Contacto',
            fnegocios: 'Otros negocios',
            impresion: 'Impresión & Empaque',
            consumo: 'Consumo',
            buscar: 'Buscar'
        }
    },
    en: {
        message: {
            lang: 'Language',
            esp: 'Spanish',
            eng: 'English',
            //Index
            trianguloTitulo: 'INTELLIGENT TECHNOLOGY',
            trianguloParrafoUno: 'From multinational corporations to small companies, our',
            trianguloBoldUno: 'solutions',
            trianguloParrafoDos: 'transform business operations.',
            trianguloBoldDos: 'We develop',
            trianguloParrafoTres: 'IT applications with',
            trianguloBoldtres: 'future vision',
            botontext: 'About us',
            tituloFuturo: 'A LEAP INTO THE FUTURE',
            futuroParrafoUno: 'In the next 10 years, the exponential advancement of technology will transform our lives more than in the last century.',
            futuroBoldUno: ' Are you prepared?',
            futuroParrafoDos: 'Our solutions for the issuance, reception and conciliation of digital tax receipts, web developments and mobile applications are built ready for a world of technological convergence where the web will merge with augmented reality and virtual reality on the basis of artificial intelligence based on big data. Our team of professionals is constantly updated',
            futuroBoldDos: 'with the tools to build the future. ',

            soluciones: 'KNOW OUR SOLUTIONS',
            cardfactura: 'Electronic bill',
            cardfacturatext: 'Our platform is accessible and scalable from SMEs to big corporations',
            cardconciliacion: 'CFDI conciliation',
            cardconciliaciontext: 'Check and analyze your CFDIs issued and received in the SAT ¡no more discrepancies!',
            cardvalidacion: 'CFDI validation',
            cardvalidaciontext: 'Automate the receipt of CFDIs, design and flow for their approval and validate instantly',
            carddesarrollo: 'Software development',
            carddesarrollotext: 'Our team of professionals transforms problems into technological solutions',
            carddisenio: 'Digital design',
            carddiseniotext: 'Solutions for websites and content creation with 2D or 3D digital animation',
            cardplataforma: 'Educational platform',
            cardplataformatext: 'Online learning, streaming and administrative management for schools and educational centers',
            cardinventario: 'Inventory control',
            cardinventariotext: 'Manage stocks and automate inputs and outputs with our multi-warehouse solution',
            cardoutsourcing: 'Process outsourcing',
            cardoutsourcingtext: 'We generate consistent results so you can focus on your business strategy',
            cardnomina: 'Electronic payroll',
            cardnominatext: 'Easily issue your receipts and integrate any application with our cloud solution.',
            cardcontabilidad: 'Electronic accounting',
            cardcontabilidadtext: 'Accurate XML reports for the SAT. Integrate your system or ERP and forget the future changes',
            cardcobranza: 'Collect control',
            cardcobranzatext: 'Portfolio management, reports and analytics with automatic issuance of Payment Complements',
            cardaplicaciones: 'Web applications',
            cardaplicacionestext: 'We convert you ideas in secure, scalable and top-performing online solutions.',
            cardia: 'Artificial intelligence',
            cardiatext: 'From simple bots to adversarial generative networks, we create the future with you',
            cardbigdata: 'Big data',
            cardbigdatatext: 'We process petabytes in minutes so you can make business decisions in real time',

            transbusinesstxt: 'business applications ',
            transcustomerstxt: 'satisfied customers ',
            transconsultingtxt: 'consulting specialties',
            transfortunetxt: 'customers Fortune 500',
            transserviciostxt: 'availability of services',
            transdevelopmentstxt: 'developments delivered',
            transexperiencetxt: 'years of experience',
            seguridadinfo: 'Security of the information',
            seguridadinfotext: 'We adhere to the best practices in the industry, the Data Centers we use are certified in HIPPA, PCI-DSS, ISO 27001:2013, NIST 800-53, SOC 2 and for mission critical platforms additionally ISO 27017: 2015, ISO 27018:2014, ISO 9001:2015, ISO 22301:2012, ISO 31000:2009, SOC 1 and SOC3.',
            alcanceglobal: 'Global Reach',
            alcanceglobaltext: 'Our clients are found in Mexico but also in North America, Europe and Asia, that is why we provide solutions and services 24/7 in Spanish and English. We work locally with a global reach.',

            //Nosotros
            acercade: 'About',
            nosotros: 'Us',
            nosotrosUno: "ITTEC is a company dedicated to the development of information technologies, mission critical systems and consulting for the control and optimization of processes in organizations.",
            nosotrosDos: "We directly collaborate with big and medium-sized companies, while through our national network of distributors we serve the mass market.",
            titulomision: "Our",
            titulomisionDos: "Mision",
            mision: "ITTEC's mission is to develop information systems that allow organizations to make the most of their resources, optimize their processes and increase the satisfaction of their Clients.",
            titulovision: "Our",
            titulovisionDos: "Vision",
            vision: "By 2020, we seek to be recognized for our leadership in the design, operation and maintenance of information systems in the cloud, which will contribute to the optimization of processes in organizations throughout Mexico, promoting their competitiveness at an international level through more of ten online business platforms. ",
            titulovalores: 'Our',
            titulovaloresdos: 'Values',
            valores: '',

            //Header&Footer
            fconoce: 'Known',
            facelec: 'Electronic bill',
            facelectxt: 'We offer flexible solutions and customizable to the needs of each company. Likewise, we strive in customer service and support them from issuance to updating with Tax Reforms, including advice on best practices for compliance with current tax provisions.',
            nomelec: 'Electronic payroll',
            nomelectxt: 'We offer comprehensive payrol management services. You can issue payroll receipts in XML and PDF formats, which you can send by mail or store on the platform. ',
            contelec: 'Electronic accounting',
            contelectxt: 'Our solution simplifies the processes for generating Eletronic Accounting in accordance with Annex 24 of the Miscellaneous Tax Resolution, through a comprehensive platform that will allow you to deliver your documents required by the SAT in XML format in accordance with current regulations. ',
            conciliacion: 'CFDI conciliation',
            conciliaciontxt: "",
            continventario: 'Inventory control',
            continventariotxt: 'We seek to offer our clients to facilitate the operation of their company, allowing total control of their inventories, both physical and fixed assets, all to make their supply chain more efficient, integrating state of the art technology and excellent service that will allow them to make decisions that benefit your operation.',
            cobranza: 'Collection control',
            cobranzatxt: 'Integrate in a single tool in an intelligent way the adminisration of all digital channels and combine them with traditional management (telephone, visits, collection, companies and lawyers), wich will allow you to optimize time and costs, ensuring a good experience for customers, as well as reducing the friction of the collection process, obtaining significant operational saving, having full traceability and increasing the recover of the portfolio. ',
            plataforma: 'Educational platform',
            plataformatxt: 'Although the ITTEC Educational Platform has a series of modules and applications that allow the operation of a comprehensive school system, there are complementary module that can further enhance the system´s capabilities depending on the particular needs of yor school.',
            fconstruye: 'Build',
            desoftware: 'Software development',
            desoftwaretxt: 'In ITTEC we are specialized in software develpment according to the needs of each client. We develop personalized and unique projects according to your business idea. We carry out software integrations, either between programs or applications online store or mobile app. ',
            appweb: 'Web applications',
            appwebtxt: 'We are specialists in the development of applications for IOS and Android platforms for corporations and SMEs. We create your design from scratch. We use the most modern trends. We rely on the most modern technologies. ',
            ia: 'Artificial intelligence',
            iatxt: 'Development of systems based on artificial intelligence algorithms, deep learning/ general adversarial networks (GANs), and integration of sensors and devices based on the integration of things model. ',
            biddata: 'Big data',
            biddatatxt: 'Our Big Data solutions allow you to manage traditional and new data sets on a single platform.',
            disenio: 'Digital design',
            diseniotxt: '',
            outsourcing: 'Procces outsourcing',
            outsourcingtxt: 'Administration and management of processes with guaranteed service levels and oriented to provide consistent results for the client. ',
            fcontacto: 'Contact',
            fnegocios: 'Other businesses',
            impresion: 'Printing & Packaging',
            consumo: 'Consumption',

            buscar: 'Search',
        }
    }
}

const i18n = new VueI18n({
    locale: '',
    fallbackLocale: ['fr', 'en'],
    messages,
})

var mixin = {
    data: function() {
        return {
            urlJson: '',
        }
    },
    i18n,
    langnavi: '',
    methods: {
        obtenerGeolocalizaion() {
            navlang = navigator.browserLanguage || navigator.language;
            //se obtiene solo "en" | "es"
            this.langnavi = navlang.substr(-20, 2);
            i18n.locale = this.langnavi;

            this.cambiarVariables(this.langnavi);

        },
        obtenerIdioma() {
            var langs = localStorage.getItem("idioma");
            if (langs == 'es') {
                i18n.locale = 'es';
                this.langnavi = 'es';
            } else if (langs == 'en') {
                i18n.locale = 'en';
                this.langnavi = 'en';
            }

            this.cambiarVariables(this.langnavi);
            this.cambiarIdiomaCategorias(this.langnavi);
        },
        guardarIdioma(idioma) {
            this.langstorage = idioma;
            i18n.locale = this.langstorage;
            localStorage.setItem("idioma", this.langstorage);
        },
        cambiarIdioma(idioma) {
            i18n.locale = idioma;
            this.cambiarVariables(idioma);
        },
        cambiarVariables(idioma) {
            if (idioma == 'es') {
                this.urlJson = './data/publicaciones.json';
                this.txtregresar = ' Regresar'
                this.verMas = ' Ver más';
                this.txtPubRecie = 'Publicaciones recientes';
                this.txtCategorias = 'Categorias';
                this.txtbuscar = 'Buscar...';
                this.title = 'NUESTRO BLOG';
            } else if (idioma == 'en') {
                this.urlJson = './data/publicaciones-en.json';
                this.txtregresar = ' Go back'
                this.verMas = ' See more';
                this.txtPubRecie = 'Recent posts';
                this.txtCategorias = 'Categories';
                this.txtbuscar = 'Search...';
                this.title = 'OUR BLOG';
            }
            this.cambiarIdiomaCategorias(idioma);
            if (location.pathname == '/ITTEC/blog') {
                this.getArticulos();
            } else {
                this.obtenerArticulo();
            }

        },
    }
}

var blog = new Vue({
    el: '#publicaciones-blog',
    mixins: [mixin],
    data: {
        publicaciones: [],
        currentPage: 1,
        perPage: 6,
        totalRows: 2,
        buscar: '',
        post: [],
        verPaginador: true,
        categoriasSelected: [],
        categorias: [],
        verMas: null,
        txtPubRecie: null,
        txtCategorias: null,
        txtbuscar: null,
        title: null,

        nombreArticulo: null,
        articulo: [],
        url: null,
        txtregresar: null
    },
    created() {
        if (localStorage.getItem("idioma")) {
            this.obtenerIdioma();
        } else {
            this.obtenerGeolocalizaion();
        }
        if (location.pathname == '/ITTEC/blog') {
            this.getArticulos();
        } else {
            this.getArticulos();
            this.nombreArticulo = this.obtenerNombreArticulo('articulo');
            this.obtenerArticulo();
        }
    },
    computed: {
        rows() {
            return this.publicaciones.length
        },
        filtroBusqueda: function() {
            if (this.buscar.length != 0 && this.categoriasSelected.length == 0) {
                this.verPaginador = false;
                return arrFilter = this.publicaciones.filter((pub) => {
                    return pub.titulo.toLowerCase().match(this.buscar.toLowerCase())
                });
            } else if (this.categoriasSelected.length != 0 && this.buscar.length == 0) {
                this.verPaginador = false;
                return arrFilter = this.publicaciones.filter((pub) => {
                    return this.categoriasSelected.includes(pub.categoria);
                });
            } else if (this.categoriasSelected.length != 0 && this.buscar.length != 0) {
                this.verPaginador = false;
                return arrFilter = this.publicaciones.filter((pub) => {
                    return this.categoriasSelected.includes(pub.categoria) && pub.titulo.toLowerCase().match(this.buscar.toLowerCase());
                });
            } else {
                // Implementar páginador
                this.verPaginador = true;
                return this.paginador();
            }
        },
        filtrolatestPub: function() {
            // Calculamos los 3 últimos
            var publiTotal = parseInt(this.publicaciones.length) - 3;

            return arrFilter = this.publicaciones.filter((pub) => {
                return pub.id > publiTotal
            });
        }
    },
    methods: {
        getArticulos() {
            axios.get(this.urlJson)
                .then(response => { this.publicaciones = response.data.slice().reverse() });
        },
        paginador() {
            // Calcular páginador
            const indiceInicio = (this.currentPage - 1) * this.perPage;
            const indiceFinal = indiceInicio + this.perPage > this.publicaciones.length ?
                this.publicaciones.length :
                indiceInicio + this.perPage;

            return this.publicaciones.slice(indiceInicio, indiceFinal);
        },
        obtenerGeolocalizaion() {
            navlang = navigator.browserLanguage || navigator.language;
            //se obtiene solo "en" | "es"
            this.langnavi = navlang.substr(-20, 2);
            i18n.locale = this.langnavi;

            this.cambiarVariables(this.langnavi);
            this.cambiarIdiomaCategorias(this.langnavi);
        },
        cambiarIdiomaCategorias(idioma) {

            let categorias_es = ["Tecnología", "Lenguajes de Programación", "Servidores", "Certificaciones", "Innovación", "Control de Versiones"];
            let categorias_en = ["Technology", "Programming languages", "Servers", "Certifications", "Innovation", "Version control"];

            if (idioma == 'es') {
                this.categorias = categorias_es;
            } else if (idioma == 'en') {
                this.categorias = categorias_en;
            }
        },
        obtenerNombreArticulo(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            let regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);

            results = decodeURIComponent(results[1].replace(/\+/g, " "));

            results = results.replace(/_/g, " ");

            return results === null ? "" : results;
        },
        obtenerArticulo() {
            axios.get(this.urlJson)
                .then(response => {
                    let data = [];
                    let obj = this;
                    // Filtro los datos por el producto
                    let arrResultado = response.data.filter(function(item) {
                        if (item.titulo == obj.nombreArticulo) {
                            obj.articulo = item;
                            // obj.cambiarMetaTags(item);
                        }
                    });

                });
        },
        regresar() {
            location.href = "blog";
        },
    }
});