<%@ page import="kr.co.jinwoosi.clfd.clfd.dgns.model.SkTy" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/tags.jspf" %>

<%
    String skTyLowerCase = ((SkTy)request.getAttribute("skTy")).getSkTyCd().toLowerCase();
%>

<script src="/clfd/js/common/clfdCommonService.js?ver=1.3"></script>
<script src="/clfd/js/dgns/dgnsDtlService.js?ver=1.5"></script>
<script src="/clfd/js/dgns/dtl.js?ver=1.3"></script>
<div class="pathbar">
    <div class="pathbar__text">
    </div>
</div>

<div class="res-title">
    <div>${dgnsTitle}</div>
    <div>${dgnsTime}</div>
</div>

<div class="res-wrapper">
    <div class="res-inner">
        <div class="res-inner__btn">
            <a href="#">
                <div class="res-btn__res">테스트결과</div>
            </a>
            <a href="#">
                <div class="res-btn__pro">추천화장품</div>
            </a>
        </div>
    </div>

    <div class="res-inner02">
        <div class="res-inner02__res">
            <div class="res-inner02__res__sta">
                <div class="res-inner02__res__name">
                    <c:choose>
                        <c:when test="${user != null && user.userNm != null}">
                            ${user.userNm}님<br>
                            피부타입
                        </c:when>
                        <c:otherwise>
                            당신의<br>
                            피부타입
                        </c:otherwise>
                    </c:choose>
                </div>
                <div class="res-inner02__res__type">
                    <img src="/clfd/img/clfd-res_<%=skTyLowerCase%>.png">
                </div>
            </div>
            <div class="bar-content">
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'D')}"> style="font-weight: bold;"</c:if>>건성(D)</div>
                <div class="bar-container">
                    <div id="odPercentBar" class="bar" style="width: ${odScorePercent}%;"></div>
                </div>
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'O')}"> style="font-weight: bold;"</c:if>>지성(O)</div>
            </div>
            <div class="bar-content">
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'R')}"> style="font-weight: bold;"</c:if>>저항성(R)</div>
                <div class="bar-container">
                    <div id="srPercentBar" class="bar" style="width: ${srScorePercent}%;"></div>
                </div>
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'S')}"> style="font-weight: bold;"</c:if>>민감성(S)</div>
            </div>
            <div class="bar-content">
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'N')}"> style="font-weight: bold;"</c:if>>비색소(N)</div>
                <div class="bar-container">
                    <div id="pnPercentBar" class="bar" style="width: ${pnScorePercent}%;"></div>
                </div>
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'P')}"> style="font-weight: bold;"</c:if>>색소(P)</div>
            </div>
            <div class="bar-content">
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'T')}"> style="font-weight: bold;"</c:if>>탱탱한(T)</div>
                <div class="bar-container">
                    <div id="wtPercentBar" class="bar" style="width: ${wtScorePercent}%;"></div>
                </div>
                <div class="barText" <c:if test="${fn:contains(skTy.skTyCd, 'W')}"> style="font-weight: bold;"</c:if>>주름진(W)</div>
            </div>
            <div class="res-inner02__res__contents">
                ${resultText}
            </div>
        </div>
    </div>

    <div id="recommendProdList"></div>

    <div id="newProdList"></div>
</div>
<input id="skTy" value="${skTy.skTyCd}" type="hidden"/>
<input id="odScore" value="${odScore}" type="hidden"/>
<input id="srScore" value="${srScore}" type="hidden"/>
<input id="pnScore" value="${pnScore}" type="hidden"/>
<input id="wtScore" value="${wtScore}" type="hidden"/>
<script src="/clfd/js/front/clfd_res.js?ver=1.1"></script>
