var dgnsDtlService = (function () {
    function createProdCard(prod) {
        var imageUrl;
        if (!prod.prodImage) {
            imageUrl = "/images/prod/NoImage.png";
        } else {
            imageUrl = "/clfd/image/" + prod.imageDir + "_" + prod.prodImage;
        }
        var productName = prod.prodNm ? prod.prodNm : "";
        // var productVolume = prod.prodCpcty ? prod.prodCpcty : "-";
        // var productPrice = prod.prodPrc ? prod.prodPrc : 0;
        var dtlHref = "/clfd/prod/dtl.do?prod=" + prod.prodId;

        var $card = $("<div class=\"res-inner03__rec\"></div>");
        var $anchor = $("<a href='"+dtlHref+"' target='_blank'></a>");
        var $divImg = $("<div class=\"res-inner03__rec__divImg\"></div>");
        var $img = $("<div class=\"res-inner03__rec__img\"><img src='" + imageUrl + "'/></div>");
        var $prodDiv = $("<div class=\"res-inner03__rec__contents\"></div>");
        var $prodNm = $("<div class=\"res-text__pr\">"+productName+"</div>");
        var $prodDtlDiv = $("<div class=\"inner03__rec__contents__ac\"></div>");
        // var $price = $("<div class=\"res-text__am\">" + clfdUtils.formattingDot(productPrice) +"</div>");
        // var $capacity = $("<div class=\"res-text__ca\"> / "+productVolume + "ml</div>");

        // $prodDtlDiv.append($price);
        // $prodDtlDiv.append($capacity);
        $prodDiv.append($prodNm);
        $prodDiv.append($prodDtlDiv);
        $divImg.append($img);
        $anchor.append($divImg);
        $anchor.append($prodDiv);
        $card.append($anchor);
        return $card;
    }

    function createProdGroupDiv(prodList, prodGbnNm) {
        if (!prodList || prodList.length < 1) {
            return ;
        }
        var $prodGroupDiv = $("<div></div>");
        var $prodGroupTitle = $("<h3 class='res-subtitle'>"+prodGbnNm+"</h3>");
        var $prodGroupListDiv = $("<div class='res-inner03'></div>");

        $prodGroupDiv.append($prodGroupTitle);
        $prodGroupDiv.append($prodGroupListDiv);
        _.forEach(prodList, function (prod) {
            $prodGroupListDiv.append(createProdCard(prod));
        });

        return $prodGroupDiv;
    }

    function drawRecommendProductList($root, prodList, prodGbnList) {
        _.forEach(prodGbnList, function (prodGbn) {
            var prodListGroup = _.filter(prodList, {'prodTy': prodGbn.cdDtlId});
            var prodGbnNm = prodGbn.cdDtlNm;
            var $prodGroupDiv = createProdGroupDiv(prodListGroup, prodGbnNm);
            if ($prodGroupDiv) {
                $root.append($prodGroupDiv);
            }
        });
    }

    return {
        drawRecommendProdList: function ($root, dgnsResult) {
            clfdCommonService.recommendProdList({
                scb: function (prodList, prodGbn) {
                    if (prodList.length > 0) {
                        var $topSubTitle = "<div class='res-top_subtitle'><div>" + dgnsResult.skTy + " 화장품 추천</div>" +
                            "<div>피부테스트의 결과로 도출된 피부타입에 맞는 화장품을 추천드려요.</div></div>"
                        $root.append($topSubTitle);
                        
                        drawRecommendProductList($root, prodList, prodGbn);
                    } else {
                        $root.append("<div class='res-top_subtitle' style='text-align: center;'><div style='font-weight: normal; line-height: 200px; font-size: 1.5rem;'>추천 화장품이 등록되어 있지 않습니다.</div></div>");
                    }
                }, ecb: function (res) {
                    console.log(res);
                }
            }, dgnsResult);
        }
    }
}())