$(() => {
    var xsimg = imgsrc => {
        if (imgsrc == null || imgsrc == "") {
            alert('暂无');
        }
        else {
            var box = document.createelement('div');
            var div = document.createelement('div');
            var img = document.createelement('img');
            var span = document.createelement('span');
            var p = document.createelement('span');
            var p2 = document.createelement('span');
            p.innertext = "-";
            p2.innertext = "+";
            p.addeventlistener('click', function() {              
                div.style.width = div.clientwidth - 100 + "px";
            });
            p2.addeventlistener('click', function() {
                div.style.width = div.clientwidth + 100 + "px";
                console.log(div.offsetwidth);
            });
            span.innertext = 'x';
            span.addeventlistener('click', function() {
                document.queryselector('body').removechild(box);
            });
            img.src = imgsrc;
            box.classlist.add('box-img');
            box.appendchild(div);
            box.appendchild(span);
            box.appendchild(p);
            box.appendchild(p2);
            div.appendchild(img);
            document.queryselector('body').appendchild(box);
        }
    }





    var cplx = document.queryselector(".procdt1 .prospecntmlweaz");
    var cpmc = document.queryselector(".procdt2 .prospecntmlweaz");
    var phcplx = document.queryselector(".phsxk1 .prospecntmlweazph")
    var phcpmc = document.queryselector(".phsxk2 .prospecntmlweazph")


    var zubiao = id => {
        cpmc.innerhtml = '';
        phcpmc.innerhtml = '';
        axios({
            baseurl: 'http://119.97.164.198:8080',
            url: `/casccms/good-main/listmainbyid/${id}`,
            method: 'get'
        }).then(res => {
            data = res.data.data
            for (var i = 0; i < data.length; i++) {
                createsxkmc(data[i]);
                phcreatesxkmc(data[i]);
            }
        })
    }

    var createsxkmc = data => {
        var div = document.createelement("div");
        div.innertext = data.itemname;
        div.classlist.add("prospewzlink");
        cpmc.appendchild(div);
        $(div).click(function() {
            $(this).parent().parent().parent().parent().children('p')[0].setattribute('data-id', data.id);
            $(this).parent().parent().parent().parent().children('p').text(this.innertext);
            $(this).parent().parent().parent().parent().children('.prosxcontent').stop().slidetoggle();
            $(this).parent().parent().parent().parent().children('span').stop().toggleclass('sprotate');
        });
    }

    var phcreatesxkmc = data => {
        var div = document.createelement("div");
        div.innertext = data.itemname;
        div.classlist.add("prospewzlinkph");
        phcpmc.appendchild(div);
        $(div).click(function() {
            $(this).parent().parent().parent().parent().children('p')[0].setattribute('data-id', data.id);
            $(this).parent().parent().parent().parent().children('p').text(this.innertext);
            $(this).parent().parent().parent().parent().children('.prosearchmenu').stop().slidetoggle();
            $(this).parent().parent().parent().parent().children('span').stop().toggleclass('sprotate');
        });
    }




    var createsxk = data => {
        var div = document.createelement("div");
        div.innertext = data.dirname;
        div.classlist.add("prospewzlink");
        cplx.appendchild(div);
        $(div).click(function() {    
            zubiao(data.id) 
            $('.procdt2 p')[0].innertext = '产品名称';
            $(this).parent().parent().parent().parent().children('p')[0].setattribute('data-id', data.id);
            $(this).parent().parent().parent().parent().children('p').text(this.innertext);
            $(this).parent().parent().parent().parent().children('.prosxcontent').stop().slidetoggle();
            $(this).parent().parent().parent().parent().children('span').stop().toggleclass('sprotate');
        });
    };

    var phcreatesxk = data => {
        var div = document.createelement("div");
        div.innertext = data.dirname;
        div.classlist.add("prospewzlinkph");
        phcplx.appendchild(div);
        div.setattribute('data-id', data.id);
        $(div).click(function() {
            zubiao(data.id);
            $('.phsxk2 p')[0].innertext = '产品名称';
            $(this).parent().parent().parent().parent().children('p')[0].setattribute('data-id', data.id);
            $(this).parent().parent().parent().parent().children('p').text(this.innertext);
            $(this).parent().parent().parent().parent().children('.prosearchmenu').stop().slidetoggle();
            $(this).parent().parent().parent().parent().children('span').stop().toggleclass('sprotate');
        });
    }


    axios({
        baseurl: 'http://119.97.164.198:8080',
        url: '/casccms/good-classfication/list',
        method: 'post'
    }).then(res => {
        data = res.data.data
        for (var i = 0; i < data.length; i++) {
            createsxk(data[i]);
            phcreatesxk(data[i])
        }
    });

















    $('.proptrcpsxconditions p').click(function() {
       $(this).parent().children('.prosxcontent').stop().slidetoggle();
       $(this).parent().children('span').stop().toggleclass('sprotate');
    });

    $('.proptrcpsxconditions span').click(function() {
        $(this).parent().children('.prosxcontent').stop().slidetoggle();
        $(this).parent().children('span').stop().toggleclass('sprotate');
    });






    $('.prosearchsxk p').click(function() {
        $(this).parent().children('span').stop().toggleclass('sprotate');
        $(this).parent().children('.prosearchmenu').stop().slidetoggle();
    });
    
    $('.prosearchsxk span').click(function() {
        $(this).parent().children('span').stop().toggleclass('sprotate');
        $(this).parent().children('.prosearchmenu').stop().slidetoggle();
    });





/*          ------------------------------------------------------------       */



    var procpcont = document.queryselector(".procpcont-boxone");
    var profy = document.queryselector(".profy");

    var prosearchss = document.queryselector(".prosearchss");
    var prosearchanniu = document.queryselector(".prosearchanniu");


    let smdmy = (obj) => {
        obj.innerhtml = "<div class='smdmy'>没有搜索到</div>";
    }

    /* 创建内容 */ /* data 是要显示的数据 */
   const createcnt = (data) => {
        var bigbox = document.createelement("div");
        var titlebox = document.createelement("div");
        var procpctgan = document.createelement("div");
        var procpctgan2 = document.createelement("div");
        var cntbox = document.createelement("div");
        var cntboxson1 = document.createelement("div");
        var cntboxson2 = document.createelement("div");
        var cntboxson3 = document.createelement("div");


        
        var boximg = document.createelement("div");
        var eleimg1 = document.createelement("div");
        var eleimg2 = document.createelement("div");
        eleimg1.classlist.add("xdxdximg");
        eleimg2.classlist.add("xdxdximg");
        var e1div = document.createelement("div");
        var e2div = document.createelement("div");
        var e1sondiv = document.createelement("div");
        var e2sondiv = document.createelement("div");
        var tupwz1 = document.createelement("div");
        var tupwz2 = document.createelement("div");
        var proimg1 = document.createelement("img");
        var proimg2 = document.createelement("img");
        proimg1.src = data.imageaddressstructure;
        proimg2.src = data.imageaddressface;
        tupwz1.classlist.add("proimgwz");
        tupwz2.classlist.add("proimgwz");
        tupwz1.innertext = "产品结构图";
        tupwz2.innertext = "产品外形图";
        proimg1.classlist.add("pro-jg-img");
        proimg2.classlist.add("pro-jg-img");
        e1sondiv.appendchild(tupwz1);
        e2sondiv.appendchild(tupwz2);
        e1sondiv.appendchild(proimg1);
        e2sondiv.appendchild(proimg2);
        e1div.appendchild(e1sondiv);
        e2div.appendchild(e2sondiv);
        eleimg1.appendchild(e1div);
        eleimg2.appendchild(e2div);
        boximg.classlist.add("procpboximage");
        proimg1.addeventlistener('click', function() {
            xsimg(data.imageaddressstructure);
        });
        proimg2.addeventlistener('click', function() {
            xsimg(data.imageaddressface);
        });

        if (data.imageaddressstructure != null && data.imageaddressstructure != '') {
            boximg.appendchild(eleimg1);
        }
        if (data.imageaddressface != null && data.imageaddressface != '') {
            boximg.appendchild(eleimg2);
        }






        cntboxson3.classlist.add("procpctyt");
        cntboxson2.classlist.add("procpctcs");
        cntboxson1.classlist.add("procpctxh");
        cntbox.classlist.add("procpctms");
        procpctgan.classlist.add("procpctgan");

        procpctgan2.classlist.add("procpctgan");

        titlebox.classlist.add("procpctnm");
        bigbox.classlist.add("procp-content");
        titlebox.innertext = data.goodname;
        cntboxson1.innertext = '国家标准: ' + data.nationalstandard;
        cntboxson2.innerhtml = '应用环境: ' + data.application;
        cntboxson3.innertext = data.gooddescription;
        cntbox.appendchild(cntboxson1);
        cntbox.appendchild(cntboxson2);
        cntbox.appendchild(cntboxson3);
        bigbox.appendchild(titlebox);
        bigbox.appendchild(procpctgan);
        bigbox.appendchild(boximg);
        if ((data.imageaddressstructure != null && data.imageaddressstructure != '') || (data.imageaddressface != null && data.imageaddressface != ''))
        {bigbox.appendchild(procpctgan2);}
        

        
        bigbox.appendchild(cntbox);
        procpcont.appendchild(bigbox);
    }



    /* 创建分页符 */
    /* n是有多少页， index 是第几页 */
    const createfy = (n, index) => {
        if (n < 2) return;
        var syfy = document.createelement("div");
        var myfy = document.createelement("div");
        var leftfy = document.createelement("div");
        var rightfy = document.createelement("div");
        syfy.innertext = '首页';
        myfy.innertext = '末页';
        leftfy.innertext = '←';
        rightfy.innertext = '→';
        syfy.classlist.add('procpfygn');
        myfy.classlist.add('procpfygn');
        leftfy.classlist.add('procpfygn');
        rightfy.classlist.add('procpfygn');
        profy.appendchild(syfy);
        profy.appendchild(leftfy);
        var xiabiao = 0;
       
         if (index > n - 3) {
            xiabiao = n - 4;
        }
        else if (index < 4) {
            xiabiao = 0;
        }
        else {
            xiabiao = index - 2;
        }
        var lll = n > 4 ? 4 : n;
        for (var i = 0; i < lll; i++) {
           var fy = document.createelement("div");
           fy.innertext = xiabiao + 1;
           fy.classlist.add('procpfygn');
           if (xiabiao == index - 1) fy.classlist.add('fyliang');
           profy.appendchild(fy);
           xiabiao++;
        }
        profy.appendchild(rightfy);
        profy.appendchild(myfy);
    }




/*  调数据   keywords搜索关键字   pagenum 所在页数 */
    const diaoshuju = (keywords, pagenum) => {
        max_search_request({
            url: "/casccms/good-detail/pagegooddetailcondition",
            data: {
                keywords: keywords,
                pagenum: pagenum,
                pagesize: 4
            }
        }).then((res) => {
            console.log(res)
            procpcont.innerhtml = '';
            for (var i = 0; i < res.data.list.length; i++) {
                createcnt(res.data.list[i]);
            }
            if (procpcont.innerhtml == '') smdmy(procpcont);
            profy.innerhtml = '';
            createfy(res.data.totalpage, pagenum);
            fygn(res.data.totalpage, pagenum, keywords);
        });
    }
    




    /* 实现分页符的功能  n 是总页数 index 是所在页数*/
    const fygn = (n, index, keywords) => {
        var num = 0;
        $(".procpfygn").click(function() {
            var key = $(this).text();
            if (key == "首页"){
                num = 1;
            }
            else if (key == "末页") {
                num = n;
            }
            else if (key == "←"){
                num = index == 1 ? 1 : index - 1;
            }
            else if (key == "→") {
                num = index == n ? n : index + 1;
            }
            else {
                num = +key;
            }
            diaoshuju(keywords, num);
        });
    }



   

    /* 搜索功能实现 */
    prosearchanniu.addeventlistener("click", function() {
        if (prosearchss.value == '') {}
        else {
            diaoshuju(prosearchss.value, 1);
        }
    });

    diaoshuju('', 1);

/* ----------------------- phone ----------------- */


    var prophspecontent = document.queryselector(".prophspecontent");
    var procpfyph = document.queryselector(".procpfy-ph");

    var prosearchwzwb = document.queryselector(".prosearchwzwb");
    var prosearchssann = document.queryselector(".prosearchssann");



     /* 创建内容 */ /* data 是要显示的数据 */
    let createphcont = (data) => {
        var boximg = document.createelement("div");
        var div1 = document.createelement("div");
        var div2 = document.createelement("div");
        div1.classlist.add("phxdxdximg");
        div2.classlist.add("phxdxdximg");
        var divbydiv1 = document.createelement("div");
        var divbydiv2 = document.createelement("div");
        var img1 = document.createelement("img");
        var img2 = document.createelement("img");
        boximg.classlist.add("boximgphpro");
        if (data.imageaddressstructure != null && data.imageaddressstructure != '')
        {boximg.appendchild(div1);}
        if (data.imageaddressface != null && data.imageaddressface != '')
        {boximg.appendchild(div2);}
        div1.appendchild(divbydiv1);
        div2.appendchild(divbydiv2);
        divbydiv1.classlist.add("phpro-imgwz");
        divbydiv2.classlist.add("phpro-imgwz");
        divbydiv1.innertext = "产品结构图";
        divbydiv2.innertext = "产品外形图";
        div1.appendchild(img1);
        div2.appendchild(img2);
        img1.src = data.imageaddressstructure;
        img2.src = data.imageaddressface;
        img1.classlist.add("phpro-img");
        img2.classlist.add("phpro-img");

        var bigbox = document.createelement("div");
        var title = document.createelement("div");
        var gan = document.createelement("div");
        var gan2 = document.createelement("div");
        var smallbox =  document.createelement("div");
        var xh = document.createelement("div");
        var cs = document.createelement("div");
        var ms = document.createelement("div");
        bigbox.classlist.add("proph-specnt");
        title.classlist.add("reallypro-title");
        gan.classlist.add("reallypro-gan");
        gan2.classlist.add("reallypro-gan");
        smallbox.classlist.add("reallypro-content");
        xh.classlist.add("procpctxhph");
        cs.classlist.add("procpctcsph");
        ms.classlist.add("procpctytph");
        title.innertext = data.goodname;
        xh.innertext = '国家标准: ' + data.nationalstandard;
        cs.innertext = '应用环境: ' + data.application;
        ms.innertext = data.gooddescription;
        bigbox.appendchild(title);
        bigbox.appendchild(gan);
        bigbox.appendchild(boximg);
        if ((data.imageaddressstructure != null && data.imageaddressstructure != '') || (data.imageaddressface != null && data.imageaddressface != ''))
            {bigbox.appendchild(gan2);}

        smallbox.appendchild(xh);
        smallbox.appendchild(cs);
        smallbox.appendchild(ms);
        bigbox.appendchild(smallbox);
        
        img1.addeventlistener('click', function() {
            xsimg(data.imageaddressstructure);
        })
        img2.addeventlistener('click', function() {
            xsimg(data.imageaddressface);
        })

        prophspecontent.appendchild(bigbox);
    }

    

        /* 创建分页符 */
    /* n是有多少页， index 是第几页 */
    const createfyph = (n, index) => {
        
        if (n < 2) return;
        var syfy = document.createelement("div");
        var myfy = document.createelement("div");
        var leftfy = document.createelement("div");
        var rightfy = document.createelement("div");
        syfy.innertext = '首页';
        myfy.innertext = '末页';
        leftfy.innertext = '←';
        rightfy.innertext = '→';
        syfy.classlist.add('prophfygnann');
        myfy.classlist.add('prophfygnann');
        leftfy.classlist.add('prophfygnann');
        rightfy.classlist.add('prophfygnann');
        procpfyph.appendchild(syfy);
        procpfyph.appendchild(leftfy);
        var xiabiao = 0;
        
        if (index > n - 3) {
            xiabiao = n - 4;
        }
        else if (index < 4) {
            xibiao = 0;
        }
        else {
            xiabiao = index - 2;
        }
        var lll = n > 4 ? 4 : n
        for (var i = 0; i < lll; i++) {
           var fy = document.createelement("div");
           fy.innertext = xiabiao + 1;
           fy.classlist.add('prophfygnann');
           if (xiabiao == index - 1) fy.classlist.add('fyliang');
           procpfyph.appendchild(fy);
           xiabiao++;
        }
        procpfyph.appendchild(rightfy);
        procpfyph.appendchild(myfy);
    }


    /* 实现分页符的功能  n 是总页数 index 是所在页数*/
    const fygnph = (n, index, keywords) => {
        var num = 0;
        $(".prophfygnann").click(function() {
            var key = $(this).text();
            if (key == "首页"){
                num = 1;
            }
            else if (key == "末页") {
                num = n;
            }
            else if (key == "←"){
                num = index == 1 ? 1 : index - 1;
            }
            else if (key == "→") {
                num = index == n ? n : index + 1;
            }
            else {
                num = +key;
            }
            diaoshujuph(keywords, num);
        });
    }







    /*  调数据   keywords搜索关键字   pagenum 所在页数 */
    const diaoshujuph = (keywords, pagenum) => {
        max_search_request({
            url: "/casccms/good-detail/pagegooddetailcondition",
            data: {
                keywords: keywords,
                pagenum: pagenum,
                pagesize: 2
            }
        }).then((res) => {
            prophspecontent.innerhtml = '';
            for (var i = 0; i < res.data.list.length; i++) {
                createphcont(res.data.list[i]);
            }
            procpfyph.innerhtml = '';
            createfyph(res.data.totalpage, pagenum);
            fygnph(res.data.totalpage, pagenum, keywords);
            if (prophspecontent.innerhtml == '') smdmy(prophspecontent);
        });
    }



    
    /* 搜索功能实现 */
    prosearchssann.addeventlistener("click", function() {
        if (prosearchwzwb.value == '') {}
        else {
            diaoshujuph(prosearchwzwb.value, 1);
        }
    });








    diaoshujuph('', 1);



    var hh1 = document.queryselector('.procdt1 p');
    var hh2 = document.queryselector('.procdt2 p');

    var procpqdsx = document.queryselector('.procpqdsx');
    procpqdsx.addeventlistener('click', function() {
        if (hh1.innertext == '产品类型') {}
        else if (hh2.innertext == '产品名称') {
            var id = hh1.getattribute('data-id');
            procpcont.innerhtml = '';
            profy.innerhtml = '';
            axios({
                baseurl: 'http://119.97.164.198:8080',
                url: `/casccms/good-main/listmainbyid/${id}`,
                method: 'get'
            }).then(res => {
                data = res.data.data
                for (var i = 0; i < data.length; i++) {
                    mainid = data[i].id;
                    axios({
                        baseurl: 'http://119.97.164.198:8080',
                        url: `/casccms/good-detail/getbyid/${mainid}`,
                        method: 'get'
                    }).then(res => {
                        data = res.data.data
                        
                        for (var i = 0; i < data.length; i++) {
                            createcnt(data[i]);
                        }
                    })
                }
            })
        }
        else {
            procpcont.innerhtml = '';
            profy.innerhtml = '';
            mainid = hh2.getattribute('data-id');
            axios({
                baseurl: 'http://119.97.164.198:8080',
                url: `/casccms/good-detail/getbyid/${mainid}`,
                method: 'get'
            }).then(res => {
                data = res.data.data
                for (var i = 0; i < data.length; i++) {
                    createcnt(data[i]);
                }
            })
        }
    })


    var phh1 = document.queryselector('.phsxk1 p');
    var phh2 = document.queryselector('.phsxk2 p');

    var prosearchsxann = document.queryselector('.prosearchsxann');
    prosearchsxann.addeventlistener('click', function() {
        if (phh1.innertext == '产品类型') {}
        else if (phh2.innertext == '产品名称') {

            var id = phh1.getattribute('data-id');
            prophspecontent.innerhtml = '';
            procpfyph.innerhtml = '';
            
            
            axios({
                baseurl: 'http://119.97.164.198:8080',
                url: `/casccms/good-main/listmainbyid/${id}`,
                method: 'get'
            }).then(res => {
                data = res.data.data
                for (var i = 0; i < data.length; i++) {
                    mainid = data[i].id;
                    axios({
                        baseurl: 'http://119.97.164.198:8080',
                        url: `/casccms/good-detail/getbyid/${mainid}`,
                        method: 'get'
                    }).then(res => {
                        data = res.data.data
                        for (var i = 0; i < data.length; i++) {
                            createphcont(data[i]);
                        }
                    })
                }
            })
        }
        else {

            prophspecontent.innerhtml = '';
            procpfyph.innerhtml = '';
            mainid = phh2.getattribute('data-id');
            axios({
                baseurl: 'http://119.97.164.198:8080',
                url: `/casccms/good-detail/getbyid/${mainid}`,
                method: 'get'
            }).then(res => {
                data = res.data.data
                for (var i = 0; i < data.length; i++) {
                    createphcont(data[i]);
                }
            })
        }
    });


});