window._pdetail = (function(){
    try{    
        return (function(){
            var container = div().id('popupdetail');
            container.css({
                position: 'fixed',
                top: '0',
                left: '0',
                background: 'white',
                display: 'none',
                gridTemplateRows: '50px auto',
                width: '100vw',
                height: '100vh',
                zIndex: '2000',
            })
            /* header */
            container.child(
                div().css({ 
                    color:'white'
                    , background: '#6b6f82'
                    , display: 'flex'
                    , justifyContent: 'center'
                    , alignItems: 'center'
                    , fontSize: '24px'
                })
                .class('header')
                .text('')
            );
            container.child(
                div()
                .class('body')
                .css('background', '#dfdfdf')
                .css('overflow-x', 'hidden')
                .css('overflow-y', 'auto')
                .text('')
            );
            container.child(
                el('i')
                .addModule('x', container.get())
                .class('la la-close')
                .css('position', 'fixed')
                .css('top', '10px')
                .css('right', '10px')
                .css('color', 'white')
                .css('background', 'white')
                .css('color', '#333')
                .css('font-size', '18px')
                .css('border-radius', '50px')
                .css('padding', '5px')
                .css('cursor', 'pointer')
                .css('z-index', '2090')
                .click(function(){
                    this.x.style.display = 'none';
                })
            );
            container = container.get();
            var id = container.id;
            document.body.appendChild(container);
            return {
                el: _id('popupdetail'),
                data: {},
                close: function(){
                    this.el.style.display = 'none';
                    return this;
                },
                title: function(a){
                    var head = this.el.querySelector('.header');
                    head.innerHTML = a;
                    return this;
                },
                body: function(a){
                    var head = this.el.querySelector('.body');
                    head.innerHTML = '';
                    return el(head);
                },
                open: function(callback){
                    this.el.style.display = 'grid';
                    if(callback != undefined && typeof callback === 'function'){
                        callback(this);
                    };
                    return this;
                },
            }
        })();
    }catch(e){
        return {
            text: 'The function error',
            error : e
        }
    }
})();