hhh-page-dev/goto.js

// $(".popular").hide();


$(document).on("click", ".article__readMore", function (event) {
    $('.article__contexts_cases').css('height', 'auto');
    $('.article__readMore').hide();

});


$(document).on("click", ".likeSee__state__filter--item", function (event) {
    // $(".CaseNews").toggle();
    // $(".popular").toggle();
    $(".likeSee__state__filter--item").removeClass('active');
    $(this).addClass("active");
});




const urlParams = new URLSearchParams(window.location.search);

let id = urlParams.get('cid');

console.log(id);


var datahref = String(window.location.href);
var datahref2 = "http://127.0.0.1:5501/cases.html/";


console.log(datahref2);

let posit = datahref2.indexOf("d");

if (posit == -1) {
    console.log('沒有d');

} else {
    console.log('有d');
}


function get_data() {
    // var desid2=String(desid);
    // console.log(desid2);
    // $("#version").val(desid);
    // $("#version").html(desid);
    $.ajax({
        method: "GET",
        // url: `json/cases-${id}.json`,
        // url:`json/cases.json`,
        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=new&page=1`,
        dataType: "json",
    })
        .done(function (msg) {
            console.log(msg);
            let designersinfo = "";
            let CaseInfo = "";
            let CaseInfo_mb = "";
            let CaseTag = "";
            let CaseData = "";
            let CaseNews = "";
            let CasePopular = "";
            let CaseDetail = "";
            let CasePageTitle = "";
            let CaseImgQuantity = "";
            let article__contexts = "";
            let CaseCoverImg = "";

            for (let i = 0; i < msg.length; i++) {

                CaseCoverImg = `
                <div class="CaseCoverImg">
                    <a style="text-decoration: none;" href="https://hhh.com.tw/photos/detail/${id}/" target="_blank">
                        <img class="img-fluid" src="${msg[i].CaseCoverImg}" alt="">
                    </a>
                </div>
                <div class="morePhotoTip">
                    <a style="text-decoration: none; color:#fff;" href="https://hhh.com.tw/photos/detail/${id}/" target="_blank">
                        <i class="fa fa-clone case-img-quantity" aria-hidden="true"><span class="ms-2 case-img-quantity">${msg[i].CaseImgAmount}</span></i> 
                    </a>
                </div>
                `
                designersinfo = `
                <div class="container container-width-column px-md-0">
                    <div class="article__wrapper">
                            <h2 class="h4">${msg[i].Casetitle}</h2>
                        <div class="d-flex justify-content-between">
                            <div class="small d-none d-md-block">${msg[i].CaseTeamName} ｜ 圖片提供:${msg[i].CaseCompany}</div>
                            <div class="small">${msg[i].CaseDate}｜ 人氣:${msg[i].CaseViews}</div>
                        </div>
                    </div>
                </div>`

                CaseInfo = `
                <div class="row mx-0 justify-content-around align-items-center">
                        <div class="col-md-3 px-mx-0">
                            <div class="info__items border-end">
                                <div>
                                    <div class="info__items__title">風格</div>
                                    <div class="info__items--ellipse">${msg[i].CaseStyle}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 px-mx-0">
                            <div class="info__items border-end">
                                <div>
                                    <div class="info__items__title">格局</div>
                                    <div class="info__items--ellipse">${msg[i].CaseHouse}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 px-mx-0">
                            <div class="info__items border-end">
                                <div>
                                    <div class="info__items__title">坪數</div>
                                    <div class="info__items--ellipse">${msg[i].CaseSize}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 px-mx-0">
                            <div class="info__items">
                                <div>
                                    <div class="info__items__title">預算</div>
                                    <div class="info__items--ellipse">${msg[i].CaseProject}</div>
                                </div>
                            </div>
                        </div>
                    </div>`

                CaseInfo_mb = `
                <div class="row info--shadow text-center">
                    <div class="col-6 px-0 border-sidebar mh">
                        <div class="info__option mx-3 border-below">
                            <div>
                                <div class="info__items__title">風格</div>
                                <div class="info__items info__items--ellipse">${msg[i].CaseStyle}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 px-0 mh">
                        <div class="info__option mx-3 border-below">
                            <div>
                                <div class="info__items__title">格局</div>
                                <div class="info__items info__items--ellipse">${msg[i].CaseHouse}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 px-0 mh">
                        <div class="info__option mx-3">
                            <div>
                                <div class="info__items__title">坪數</div>
                                <div class="info__items info__items--ellipse">${msg[i].CaseSize}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 px-0 mh">
                        <div class="info__option mx-3">
                            <div>
                                <div class="info__items__title">預算</div>
                                <div class="info__items info__items--ellipse">${msg[i].CaseProject}</div>
                            </div>
                        </div>
                    </div>
                 </div>
                `

                if (msg[i].Casedescription == undefined) {
                    article__contexts = `<div></div>`
                } else {
                    article__contexts = `
                        <div><p class="article__contexts_cases">${msg[i].Casedescription}</p></div>
                        <div class="article__readMore">
                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
                        <a class="article__readMore__text">閱讀更多</a>
                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
                        </div>
                        `
                }

                for (let j = 0; j < msg[i].CaseTag.length; j++) {
                    // console.log(msg[i].CaseTag.length);

                    // console.log(msg[i].CaseTag[j].Tag);

                    CaseTag += ' \
                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].CaseTag[j].Tag + '-keyword/" class="btn btn-outline-custom rounded-0">' + msg[i].CaseTag[j].Tag + '</a> \
                        ';
                }

                CaseData = `
             <h4 class="d-none d-md-block">CASE DATA</h4>
             <h4 class="d-block d-md-none">CASE DATA</h4>

             <div class="caseData__infoItems">
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">居住成員:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMember} </div>
                 </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">房屋坪數:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSize}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">設計風格:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataStyle}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">房屋類型:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataType}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">房屋狀況:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSituation}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">圖片提供:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataImgProvide}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">空間格局:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSpace}</div>
                </div>
                <div class="caseData__infoItems__list">
                    <div class="caseData__infoItems__list--lf">主要建材:</div>
                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMaterial}</div>
                </div>
            </div> `

                CaseData2 = `
                        <div class="caseData__designerBlock h-100">
                            <div class="caseData__designerBlock__designer d-block d-md-none">
                                <h4>聯絡設計師</h4>
                                <ul>
                                    <li><a itemprop="item" href="/designer-index.php?designer_id=779"
                                            target="_blank">${msg[i].CaseCompany}</a></li>
                                    <li><a itemprop="item" href="/designer-index.php?designer_id=779"
                                            target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
                                    <li>免付費諮詢專線</li>
                                    <li><a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a></li>
                                </ul>

                            </div>
                            <div class="caseData__designerBlock__designer--pc d-none d-md-block">
                                <div class="caseData__designerBlock__designer--above">
                                    <h4>聯絡設計師</h4>
                                    <ul>
                                        <li><a href="" target="_blank">${msg[i].CaseCompany}</a></li>
                                        <li><a href="" target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
                                    </ul>
                                </div>
                                <div class="caseData__designerBlock__designer--below">
                                    <ul>
                                        <li>
                                            免付費諮詢專線
                                        </li>
                                        <li>
                                            <a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="caseData__designerBlock__avatar">
                                <a href="">
                                    <div class="caseData__designerBlock__avatar--img"
                                        style="background-image:url(${msg[i].ContactDesignerImg});">

                                    </div>
                                </a>
                            </div>
                        </div>`

                for (var k = 0; k < msg[i].StyleProfile.length; k++) {

                    CaseNews +=
                        '<div class="col-6 col-md-4 ps-0"\
                            <div class="vue-waterfall-slot">\
                             <div class="card">\
                                 <a href="'+ msg[i].StyleProfile[k].ProfileLink + '">\
                                    <img class="img-fluid"\
                                    src="'+ msg[i].StyleProfile[k].ProfileImg + '"\
                                    alt="幸福空間個案圖" class="card-img-top">\
                                </a>\
                            </div>'
                    CaseNews += '<div class="card-body">'
                    for (var z = 0; z < msg[i].StyleProfile[k].ProfileTag.length; z++) {
                        // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                        CaseNews += '\
                                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
                                '+ msg[i].StyleProfile[k].ProfileTag[z].Tag + '\
                                </a>\
                                ';
                    }
                    CaseNews += '</div></div></div></div>'
                };


                // 備份寫法
                // for (var k = 0; k<msg[i].DesignerProfile.length; k++) {

                //     CaseNews +=
                //         '<div class="col-6 col-md-4 ps-0"\
                //             <div class="vue-waterfall-slot">\
                //              <div class="card CaseNews-Card">\
                //                  <a href="'+ msg[i].DesignerProfile[k].ProfileLink + '">\
                //                     <img class="img-fluid"\
                //                     src="'+ msg[i].DesignerProfile[k].ProfileImg + '"\
                //                     alt="幸福空間個案圖" class="card-img-top">\
                //                 </a>\
                //             </div>'
                //     CaseNews += '<div class="card-body">'
                //     for (var z = 0; z < msg[i].DesignerProfile[k].ProfileTag.length; z++) {
                //         // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                //         CaseNews += '\
                //                 <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].DesignerProfile[k].ProfileTag[z].Tag + '-keyword/">\
                //                 '+ msg[i].DesignerProfile[k].ProfileTag[z].Tag + '\
                //                 </a>\
                //                 ';
                //     }
                //     CaseNews += '</div></div></div></div>'
                // };   


                // for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
                //     CasePopular +=
                //         '<div class="likeSee__rule"\
                //             <a href="'+ msg[i].ProfilePopularity[x].ProfileLink + '">\
                //                 <div class="likeSee__bgImg">\
                //                     <img class="img-fluid" src="'+ msg[i].ProfilePopularity[x].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
                //                 </div>\
                //             </a>'
                //     CasePopular += '<div class="likeSee__tag">'
                //     for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) {
                //         CasePopular += '\
                //                 <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '-keyword/" class="likeSee__tag--item">\
                //                 '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
                //                 </a>\
                //                 ';
                //     }
                //     CasePopular += '</div></div>'
                // };
                // 個案細節

                // CaseDetail += '<div class="row px-0 mx-0">'
                // CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><button type="button" class="btn-close close-window d-block d-md-none mt-3 btn-close-white" style="margin-left:auto"></button><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
                // // 輪播圖
                // for (let j = 0; j < msg[i].CaseDetail.length; j++) {
                //     CaseDetail +=
                //         '<div style="width: 960px;" class="CaseSlider" data-info="' + j + '"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="' + msg[i].CaseDetail[j].CaseDetailImg + '" alt=""></div></div></div>'

                // }

                // CaseDetail += '</div></div></div>'

                // CaseDetail +=
                //     '<div class="col-md-4" style="background-color:#fff;">\
                //     <div class="modal-header border-0 display-pc close-window">\
                //         <button type="button" class="btn-close"></button>\
                //     </div>\
                //     <div class="d-flex justify-content-start align-items-center pt-5">\
                //     <a href="">\
                //     <div class="contact-section-avatar me-2">\
                //         <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
                //     </div>\
                // </a>\
                // <div class="ms-2" style="width: 100%;">\
                //     <a href="" class="contact-section-company">\
                //         <div>\
                //         '+ msg[i].CaseCompany + '\
                //         </div>\
                //     </a>\
                //     <div style="display: flex;" class="contact-section-detail-box mt-3">\
                //         <div class="contact-section-detail-lf">\
                //             <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
                //         </div>\
                //         <div class="contact-section-detail-rt">\
                //             <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
                //         </div>\
                //     </div>\
                //     </div>\
                // </div>\
                // '
                // CaseDetail +=
                //     '<div class="info-area-title-desktop">\
                //     <a href="'+ msg[i].CasePageLink + '" target="_blank">\
                //     '+ msg[i].Casetitle + '\
                //     </a>\
                // </div>\
                // <div class="divider"></div>\
                // '
                // CaseDetail +=
                //     '<div class="info-area-other-case-desktop py-3">\
                //     <div class="ml-1">該個案的其他圖片(<span id="index" class="slickNumber">1</span>/'+ msg[i].CaseDetail.length + ')</div>\
                //     <div class="other-case-desktop-items d-flex flex-wrap">\
                // '
                // for (let j = 0; j < msg[i].CaseDetail.length; j++) {

                //     CaseDetail +=
                //         '<div id="img-0" data-thisid=(' + j + ') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo(' + j + ')">\
                //                 <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg + '" width="70" height="70" alt="該個案的其他圖片">\
                //         </div>'

                // };


                // CaseDetail += '</div></div>';

                // CaseDetail += '<div class="divider"></div>';

                // CaseDetail +=
                //     '<div class="info-area-same-case-desktop py-3">\
                //     <div class="ml-1"><span>工業風</span> 其他作品</div>\
                //     <div class="same-case-desktop-items d-flex flex-wrap">\
                // '
                // for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
                //     CaseDetail +=
                //         '<div class="w-20 m-1 p-1 ">\
                //         <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
                //         <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
                //         </a>\
                //     </div>'
                // };
                // CaseDetail += '</div></div>';
                // CaseDetail += '<div class="divider"></div>';

                // CaseDetail +=
                //     '<div class="info-area-data-desktop py-3">\
                // <div class="ml-2">CASE DATA</div>\
                // <div class="data-table-desktop ml-2">\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>裝潢費用:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseProject + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>居住成員:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseDataMember + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>設計風格:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseStyle + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>房屋類型:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseDataType + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>房屋坪數:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseSize + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>房屋狀況:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseDataSituation + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>圖片提供:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseCompany + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>空間格局:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseDataSpace + '</div>\
                //         </div>\
                //     </div>\
                //     <div class="data-table-items d-flex">\
                //         <div class="data-table-lf">\
                //             <div>主要建材:</div>\
                //         </div>\
                //         <div class="data-table-rt">\
                //             <div>'+ msg[i].CaseDataMaterial + '</div>\
                //         </div>\
                //     </div>\
                // </div>\
                // </div>';

                // CaseDetail += '<div class="divider"></div>';
                // CaseDetail +=
                //     '<div class="info-area-contact-desktop py-3 mb-2">\
                //     <div class="ml-2">聯絡資訊 Info</div>\
                //         <div class="contact-section-desktop ml-2 mt-2">\
                //             <div class="contact-section-detail-desktop mt-3">\
                //                 <div class="d-flex">\
                //                     <div class="contact-section-detail-lf">\
                //                     <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
                //                 </div>\
                //             <div class="contact-section-detail-rt">\
                //                     <div>\
                //                         <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
                //                     </div>\
                //                 </div>\
                //             </div>\
                //             <div class="d-flex">\
                //                 <div class="contact-section-detail-lf">\
                //                     <div><i class="fas fa-map-marker-alt"></i></div>\
                //                 </div>\
                //                 <div class="contact-section-detail-rt">\
                //                     <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">' + msg[i].CaseCompanyAddress + '</a></div>\
                //                 </div>\
                //             </div>\
                //             <div class="d-flex">\
                //                     <div class="contact-section-detail-lf">\
                //                         <div><i class="far fa-envelope"></i></div>\
                //                     </div>\
                //                     <div class="contact-section-detail-rt">\
                //                         <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
                //                     </div>\
                //             </div>\
                //             <div class="d-flex">\
                //                 <div class="contact-section-detail-lf">\
                //                     <div><i aria-hidden="true" class="fa fa-home"></i></div>\
                //                 </div>\
                //                 <div class="contact-section-detail-rt">\
                //                     <div><a href="'+ msg[i].CaseCompanyWeb + '"\
                //                     target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
                //                 </div>\
                //             </div>\
                //         </div>\
                //     </div>\
                // </div>'
                // CaseDetail += '</div>'

                CasePageTitle += '' + msg[i].Casetitle + ''

            }
            $('.CaseCover_Box').html(CaseCoverImg);

            $('.article').html(designersinfo);
            $('.CaseInfo').html(CaseInfo);
            $('.CaseInfo_mb').html(CaseInfo_mb);

            $('.CaseTag').html(CaseTag);
            $('.caseData-PC-left').html(CaseData);
            $('.caseData-PC-right').html(CaseData2);
            $('.CaseNews-Card').html(CaseNews);
            // $('.Case-popular').html(CasePopular);
            // $('.CaseModel').html(CaseDetail);
            $('#case-page-title').html(CasePageTitle);

            $('.article__contexts-box').html(article__contexts);



            // $('.CaseDetail-slick').slick({
            //     slidesToShow: 1, //預設 1 幻燈片顯示幾張
            //     slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
            //     arrows: true, // 預設 true 左右箭頭是否顯示
            //     prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
            //     nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
            // });

            // var activeimg = $(".slick-active img")[0];

            // console.log(activeimg);

            // var imgwidth = activeimg.width;

            // var imgheight = activeimg.height;

            // console.log(imgwidth);


            // if(imgwidth < 1000 && imgwidth >imgheight)
            // {
            //     console.log(activeimg.parentNode)
            //     activeimg.parentNode.classList.add('swiper-zoom-container-sm-desktop');
            // }

            // if (imgwidth < imgheight) {
            //     activeimg.style.width = 'auto';
            // }



        });
}

get_data();

$('.morePhotoTip > a').attr('href', `./casedetail.html?cid=${id}`);

// function slickGoTo(key) {

//     let slickNumber = "";
//     $('.CaseDetail-slick').slick('slickGoTo', key);

//     let slickNo = key + 1;
//     console.log(slickNo);

//     slickNumber += '' + slickNo + ''

//     $('.slickNumber').html(slickNumber);

// }


// $(document).on("click", ".slick-prev", function (event) {
//     let slickNumbertest = '';
//     console.log(desid - 1);

//     let slickNumber1 = desid + 1;

//     slickNumbertest += '' + slickNumber1 + ''

//     $('.slickNumber').html(slickNumbertest);


// });


// $(document).on("click", ".slick-next", function (event) {
//     var desid = $(".slick-active").data("info");

//     let slickNumbertest = '';
//     console.log(desid + 1);

//     let slickNumber1 = desid + 1;

//     slickNumbertest += '' + slickNumber1 + ''

//     $('.slickNumber').html(slickNumbertest);
// });

// $(document).on("click", ".close-window", function (event) {
//     window.close();
// });

let filter;

$(".views").click(function () {
    filter = "hot";
    get_views_data();

});

$(".recently").click(function () {
    filter = "new";
    get_views_data();

});

function get_views_data() {

    $.ajax({
        method: "GET",
        // url: `json/cases-${id}.json`,
        // url:`json/cases.json`,
        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=${filter}&page=1`,
        dataType: "json",
    })

        .done(function (msg) {
            let CaseNews = "";
            // if (filter == "hot") {
            //     msg[0].StyleProfile.sort(function (a, b) {
            //         return a['Views'] > b['Views'] ? -1 : 1;
            //     });
            // }
            console.log(msg);

            console.log(msg[0].StyleProfile);

            for (var k = 0; k < msg[0].StyleProfile.length; k++) {
                CaseNews +=
                    '<div class="col-6 col-md-4 ps-0"\
                        <div class="vue-waterfall-slot">\
                         <div class="card CaseNews-Card">\
                             <a href="'+ msg[0].StyleProfile[k].ProfileLink + '">\
                                <img class="img-fluid"\
                                src="'+ msg[0].StyleProfile[k].ProfileImg + '"\
                                alt="幸福空間個案圖" class="card-img-top">\
                            </a>\
                        </div>'
                CaseNews += '<div class="card-body">'
                for (var z = 0; z < msg[0].StyleProfile[k].ProfileTag.length; z++) {
                    // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                    CaseNews += '\
                            <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
                            '+ msg[0].StyleProfile[k].ProfileTag[z].Tag + '\
                            </a>\
                            ';
                }
                CaseNews += '</div></div></div></div>'
            };

            $('.CaseNews-Card').html(CaseNews);

        });

};

if ($(".views").hasClass("active")) {
    filter = "hot";
    // alert('1')
} else {
    filter = "new";
    // alert('2')
}

function scroll_bottom_load_data(page) {

    $.ajax({
        method: "GET",
        // url: `json/cases-${id}.json`,
        // url:`json/cases.json`,
        url: `https://m3.hhh.com.tw:18686/gencase?id=${id}&sort=${filter}&page=${page}`,
        dataType: "json",
    })
        .done(function (msg) {
            let CaseNews = "";

            for (var k = 0; k < msg[0].StyleProfile.length; k++) {

                CaseNews +=
                    '<div class="col-6 col-md-4 ps-0">\
                        <div class="vue-waterfall-slot">\
                            <div class="card">\
                                <a href="'+ msg[0].StyleProfile[k].ProfileLink + '">\
                                    <img class="img-fluid" src="'+ msg[0].StyleProfile[k].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
                                </a>\
                            </div>'
                CaseNews += '<div class="card-body">'
                for (var z = 0; z < msg[0].StyleProfile[k].ProfileTag.length; z++) {
                    // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
                    CaseNews += '\
                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].StyleProfile[k].ProfileTag[z].Tag + '-keyword/">\
                        '+ msg[0].StyleProfile[k].ProfileTag[z].Tag + '\
                        </a>\
                        ';
                }
                CaseNews += '</div></div></div></div>'
            };
            $('.CaseNews-Card').append(CaseNews);
        });

}



$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $('body').prop("scrollHeight");
    //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    if (jQuery(window).width() < 767) {

        // console.log(scrollHeight);
        // console.log(scrollTop);
        //一樣 var scrollHeight2 = document.documentElement.scrollHeight;

        //https://stackoverflow.com/questions/10423759/plain-javascript-to-jquery-clientheight

        // console.log('scrollTop:', scrollTop);
        // console.log('scrollHeight:', scrollHeight);
        // console.log('clientHeight:', clientHeight);


        if (scrollTop + clientHeight >= scrollHeight - 5) {
            loadMore_m();
            console.log(page);
        }
    } else {

        // if (($(document).height() - 390) > $(window).scrollTop() + $(window).height() && $(window).scrollTop() + $(window).height() >= ($(document).height() - 400)) {
        //     loadMore();
        //     console.log(page);

        // }

        if (scrollTop + clientHeight >= scrollHeight - 5) {
            loadMore();
            console.log(page);

        }
    }


})



// $(window).scroll(function () {
//     var scrollTop = $(this).scrollTop();
//     var scrollHeight = $('body').prop("scrollHeight");
//     // console.log(scrollHeight);
//     // console.log(scrollTop);
//     //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
//     var clientHeight = document.documentElement.clientHeight;

//     //https://stackoverflow.com/questions/10423759/plain-javascript-to-jquery-clientheight

//     // console.log('scrollTop:', scrollTop);
//     // console.log('scrollHeight:', scrollHeight);
//     // console.log('clientHeight:', clientHeight);

//     if (($(document).height() - 390) > $(window).scrollTop() + $(window).height() && $(window).scrollTop() + $(window).height() >= ($(document).height() - 400)) {
//         loadMore();
//         console.log(page);

//     }

// })




var page = 1;
function loadMore() {

    // console.log(page);

    setTimeout(function () {
    page++;
    // console.log(page);
    scroll_bottom_load_data(page);

    return page
    }, 1000); 
}

function loadMore_m() {

    // console.log(page);

    setTimeout(function () {
        page++;
        // console.log(page);
        scroll_bottom_load_data(page);

        return page
    }, 500);
}
//if成立 只加一次

// $(document).ready(function () {
//     var page = 1;
//     $(window).scroll(function () {
//         let last = document.querySelector('.CaseNews-Card > div:last-child');
//         if ($(window).scrollTop() > last.offsetTop) {
//             page++
//             console.log(page);
//             // $("#click_test").trigger("click");
//             // scroll_bottom_load_data(page);
//         }
//     });
// });

// $(window).scroll(function () {
//     // var scrollz = $(document).scrollTop();
//     // console.log(scrollz);
//     // var scrolly = $(document).height();
//     // console.log(scrolly);
//     // var scrollx = $(window).height();
//     // console.log(scrollx);
//     if ($(window).scrollTop() + $(window).height() == $(document).height()) {


//         page++;
//         console.log(page);
//         scroll_bottom_load_data(page);

//         // alert("Reached bottom!");

//     }
// });


// $(document).ready(function () {

//     $('#hhh-cases').scroll(function () {
//         var h = $(this).height();
//         var sh = $(this)[0].scrollHeight;
//         var st = $(this)[0].scrollTop;

//         console.log(h);
//         console.log(sh);
//         console.log(st);
//         // if(h  >= sh){
//         //     alert('底部了')
//         // }

//     });
// });