<view class="pack-center pages-hint grey" wx:if="{{loading}}">
    <image src="/static/icons/loadingGif.gif"></image>
    <view>疯狂加载中</view>
</view>
<view wx:else>
    <view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;" wx:if="{{!footerPop}}">
        <image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/returnBlack.png' : '/static/icons/returnBlue.png'}}"></image>
    </view>

    <!-- 顶部背景 -->
    <view class="top">
        <image class="top-back" src="https://cdn.shuiganying.com/images/2023/04/04/20f3147bad60e75d41312489d3a53f92.png" mode="widthFix"></image>
        <view class="top-date">
            <text>{{createdAt.m_d}}</text>
            <text>{{createdAt.time}}</text>
        </view>
    </view>

    <view class="seeCont">
        <!-- 皮肤概况 -->
        <view class="survey">
            <view class="survey-title">
                <text>皮肤概况</text>
            </view>
            <view class="survey-cont">
                <view class="surveyTop">
                    <!-- 4:3 -->
                    <image class="surveyTop-img" src="{{coverImg}}" mode="aspectFill"></image>
                    <view class="surveyTop-cont">
                        <view class="surveyTop-cont-title">
                            <view class="surveyTop-title-name">
                                <block wx:if="{{analyze.skin_type.skin_type == 0}}">油性肤质</block>
                                <block wx:elif="{{analyze.skin_type.skin_type == 1}}">干性皮肤</block>
                                <block wx:elif="{{analyze.skin_type.skin_type == 2}}">中性皮肤</block>
                                <block wx:else>混合性皮肤</block>
                            </view>
                            <view class="surveyTop-title-text">肤质</view>
                        </view>
                        <view class="surveyTop-cont-item">
                            <view class="surveyTop-item-label">
                                <view class="surveyTop-item-name">
                                    <block wx:if="{{analyze.skintone.value == 0}}">透白</block>
                                    <block wx:elif="{{analyze.skintone.value == 1}}">白皙</block>
                                    <block wx:elif="{{analyze.skintone.value == 2}}">自然</block>
                                    <block wx:elif="{{analyze.skintone.value == 3}}">小麦</block>
                                    <block wx:else>黝黑</block>
                                </view>
                                <view class="surveyTop-item-text">肤色</view>
                            </view>
                            <view class="surveyTop-item-label">
                                <view class="surveyTop-item-name">{{analyze.skin_age.value}}</view>
                                <view class="surveyTop-item-text">肌龄</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="surveyList">
                    <view class="surveyList-title">油光占比</view>
                    <view class="surveyList-item">
                        <view class="surveyList-label">
                            <view class="surveyList-label-name">额头</view>
                            <view class="surveyList-label-thread">
                                <view class="surveyList-label-bar" style="width: {{zoneArea + '%'}}"></view>
                            </view>
                            <view class="surveyList-label-number">{{zoneArea}}%</view>
                        </view>
                        <view class="surveyList-label">
                            <view class="surveyList-label-name">左脸颊</view>
                            <view class="surveyList-label-thread">
                                <view class="surveyList-label-bar" style="width: {{leftcheekArea + '%'}}"></view>
                            </view>
                            <view class="surveyList-label-number">{{leftcheekArea}}%</view>
                        </view>
                        <view class="surveyList-label">
                            <view class="surveyList-label-name">右脸颊</view>
                            <view class="surveyList-label-thread">
                                <view class="surveyList-label-bar" style="width: {{rightcheekArea + '%'}}"></view>
                            </view>
                            <view class="surveyList-label-number">{{rightcheekArea}}%</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 衰老分析 -->
        <view class="module">
            <view class="module-title">衰老分析</view>
            <view class="old">
                <view class="oldTop">
                    <image class="oldTop-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/b4eb69e379fedd74b6a63dcb0f4ba134.png"></image>
                    <view class="module-check">
                        <image class="module-check-img" src="/static/report/report-picture.png"></image>
                        <view class="module-check-name" bindtap="faceSee" data-type="old">查看检测图</view>

                        <!-- 检测图 -->
                        <view class="face-back {{oldFace ? 'active' : ''}}"></view>
                        <view class="face-pop {{oldFace ? 'active' : ''}}">
                            <view class="face-cont">
                                <view class="face-img" style="background-image: url({{coverImg}}); background-repeat: no-repeat; background-size: 396rpx 520rpx; background-position: right;background-clip: border-box; "></view>
                                <view class="face-ai" style="background-image: url('{{ analyze.face_urls.texture_enhanced_lines}}'); background-repeat: no-repeat; background-size: 396rpx 520rpx; width: {{(100 - precent) + '%'}};background-clip: content-box;background-origin: content-box; background-position: right;"></view>

                                <view class="process_wrap" style="left:{{2*progress - 4}}rpx">
                                    <view class="line" bindtap="moveTo"></view>
                                    <view class="spot" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
                                </view>
                            </view>
                            <view class="surveyTop-close" bindtap="faceSee" data-type="old">
                                <image src="/static/icons/reportColse.png" mode="aspectFill"></image>
                            </view>
                        </view>

                    </view>
                </view>
                <view class="oldSee">
                    <view class="oldSee-item">
                        <view class="oldSee-name">抬头纹：{{analyze.forehead_wrinkle.value == 0 ? '无' : '有'}}</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">法令纹：{{analyze.nasolabial_fold.value == 0 ? '无' : '有'}}</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">鱼尾纹：{{analyze.crows_feet.value == 0 ? '无' : '有'}}</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">眉间纹：{{analyze.glabella_wrinkle.value == 0 ? '无' : '有'}}</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">额头区域细纹：{{analyze.fine_line.forehead_count}}处</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">左眼部区域细纹：{{analyze.fine_line.left_undereye_count}}处</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">右眼部区域细纹：{{analyze.fine_line.right_undereye_count}}处</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">额头区域深纹：{{analyze.wrinkle_count.forehead_count}}处</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">左眼部区域深纹：{{analyze.wrinkle_count.left_undereye_count}}处</view>
                    </view>
                    <view class="oldSee-item">
                        <view class="oldSee-name">右眼部区域深纹：{{analyze.wrinkle_count.right_undereye_count}}处</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 眼袋 -->
        <view class="module">
            <view class="module-title">眼袋</view>
            <view class="old">
                <view class="oldTop">
                    <image class="eye-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/1595e206bd5fe385d34e2de952415830.png"></image>
                    <!-- <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name">查看检测图</view>
                </view> -->
                </view>
                <view class="moduleText">
                    <image class="moduleText-img" src="/static/report/report-face.png"></image>
                    <view class="moduleText-tips">
                        您{{analyze.eye_pouch.value == 0 ? '无' : '有'}}<text>眼袋</text>，{{analyze.eye_pouch.value == 0 ? '没有眼袋正常，可能个人护理比较好' : '受长期不规律作息和年龄增长，皮 肤弹性减弱影响。'}}
                    </view>
                </view>
            </view>
        </view>

        <!-- 黑眼圈 -->
        <view class="module">
            <view class="module-title">黑眼圈</view>
            <view class="old">
                <view class="oldTop">
                    <image class="eye-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/d4659617f6964dedcbf80277b24c3394.png"></image>
                    <!-- <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name">查看检测图</view>
                </view> -->
                </view>
                <view class="moduleText">
                    <image class="moduleText-img" src="/static/report/report-face.png"></image>
                    <view class="moduleText-tips">
                        您是{{analyze.dark_circle.value == 0 ? '无' : '有'}}<text>黑眼圈</text>，{{analyze.dark_circle.value == 0 ? '没有黑眼圈通常是生活习惯比较好，主要是平时没有熬夜的习惯' : '可能由长期熬夜、日晒、年龄增长、眼周围皮肤炎症等因素导致'}}
                    </view>
                </view>
            </view>
        </view>

        <!-- 敏感度分析 -->
        <view class="module">
            <view class="module-title">敏感度分析</view>
            <view class="module-flex">
                <view class="module-flex-cont">
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/f0aefddad01f4ec1d31c3a20b01c5761.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">敏感程度</view>
                            <view class="module-flex-number">{{analyze.sensitivity.sensitivity_intensity}}</view>
                        </view>
                    </view>
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/87e55f24e6cd35cffb368bc0eda6a0da.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">敏感区域面积占比</view>
                            <view class="module-flex-number">{{sensitivityArea}}%</view>
                        </view>
                    </view>
                </view>
                <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name" bindtap="faceSee" data-type="tactful">查看检测图</view>

                    <!-- 检测图 -->
                    <view class="face-back {{tactfulFace ? 'active' : ''}}"></view>
                    <view class="face-pop {{tactfulFace ? 'active' : ''}}">
                        <view class="face-cont">
                            <view class="face-img" style="background-image: url({{coverImg}}); background-repeat: no-repeat; background-size: 396rpx 520rpx; background-position: right;background-clip: border-box; "></view>
                            <view class="face-ai" style="background-image: url('{{ analyze.face_urls.red_area}}'); background-repeat: no-repeat; background-size: 396rpx 520rpx; width: {{(100 - precent) + '%'}};background-clip: content-box;background-origin: content-box; background-position: right;"></view>
                            <view class="process_wrap" style="left:{{2*progress - 4}}rpx">
                                <view class="line" bindtap="moveTo"></view>
                                <view class="spot" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
                            </view>
                        </view>
                        <view class="surveyTop-close" bindtap="faceSee" data-type="tactful">
                            <image src="/static/icons/reportColse.png" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 毛孔分析 -->
        <view class="module">
            <view class="module-title">毛孔分析</view>
            <view class="module-flex">
                <view class="module-flex-cont">
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/6525be6f4924cbbd61f48996379a4887.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">毛孔数量</view>
                            <view class="module-flex-number">{{enlargedNumber}}</view>
                        </view>
                    </view>
                </view>
                <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name" bindtap="faceSee" data-type="pore">查看检测图</view>

                    <!-- 检测图 -->
                    <view class="face-back {{poreStatus ? 'active' : ''}}"></view>
                    <view class="face-pop {{poreStatus ? 'active' : ''}}">
                        <view class="face-cont">
                            <view class="face-img" style="background-image: url({{coverImg}}); background-repeat: no-repeat; background-size: 396rpx 520rpx; background-position: right;background-clip: border-box; "></view>
                            <view class="face-ai" style="background-image: url('{{ analyze.face_urls.texture_enhanced_pores}}'); background-repeat: no-repeat; background-size:  396rpx 520rpx; width: {{(100 - precent) + '%'}}; background-clip: content-box;background-origin: content-box; background-position: right;"></view>

                            <view class="process_wrap" style="left:{{2*progress - 4}}rpx">
                                <view class="line" bindtap="moveTo"></view>
                                <view class="spot" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
                            </view>
                        </view>
                        <view class="surveyTop-close" bindtap="faceSee" data-type="pore">
                            <image src="/static/icons/reportColse.png" mode="aspectFill"></image>
                        </view>
                    </view>

                </view>
                <view class="moduleText">
                    <image class="moduleText-img" src="/static/report/report-face.png"></image>
                    <view class="pore-flex">
                        <view class="pore-flex-item">额头粗大毛孔数：<text>{{analyze.enlarged_pore_count.forehead_count}}个</text></view>
                        <view class="pore-flex-item">下巴粗大毛孔数：<text>{{analyze.enlarged_pore_count.chin_count}}个</text></view>
                        <view class="pore-flex-item">右脸颊粗大毛孔数：<text>{{analyze.enlarged_pore_count.right_cheek_count}}个</text></view>
                        <view class="pore-flex-item">左脸颊粗大毛孔数：<text>{{analyze.enlarged_pore_count.left_cheek_count}}个</text></view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 黑头分析 -->
        <view class="module">
            <view class="module-title">黑头分析</view>
            <view class="module-flex">
                <view class="module-flex-cont">
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/d3c0382483ea69a29b5948fd86230da0.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">黑头分析</view>
                            <view class="module-flex-number">{{analyze.blackhead_count}}个</view>
                        </view>
                    </view>
                </view>
                <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name" bindtap="faceSee" data-type="black">查看检测图</view>
                    <!-- 检测图 -->
                    <view class="face-back {{blackFace ? 'active' : ''}}"></view>
                    <view class="face-pop {{blackFace ? 'active' : ''}}">
                        <view class="face-cont">
                            <view class="face-img" style="background-image: url({{coverImg}}); background-repeat: no-repeat; background-size: 396rpx 520rpx; background-position: right;background-clip: border-box; "></view>
                            <view class="face-ai" style="background-image: url('{{ analyze.face_urls.texture_enhanced_blackheads}}'); background-repeat: no-repeat; background-size: 396rpx 520rpx; width: {{(100 - precent) + '%'}}; background-clip: content-box;background-origin: content-box; background-position: right;"></view>

                            <view class="process_wrap" style="left:{{2*progress - 4}}rpx">
                                <view class="line" bindtap="moveTo"></view>
                                <view class="spot" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
                            </view>
                        </view>
                        <view class="surveyTop-close" bindtap="faceSee" data-type="black">
                            <image src="/static/icons/reportColse.png" mode="aspectFill"></image>
                        </view>
                    </view>

                </view>
            </view>
        </view>

        

        <!-- 痤疮色素性分析 -->
        <view class="module">
            <view class="module-title">色素性分析</view>
            <view class="module-flex">
                <view class="module-flex-cont">
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/fea1902e925d424db9c9fe9d5d642fd0.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">痤疮</view>
                            <view class="module-flex-number">{{analyze.acne.rectangle.length}}处</view>
                        </view>
                    </view>
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/9c603bc9ef32e5fdb405ee213fe6660f.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">闭口粉刺</view>
                            <view class="module-flex-number">{{analyze.closed_comedones.rectangle.length}}处</view>
                        </view>
                    </view>
                    
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/aa32dcc317286d7075c656496c55ad26.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">色斑</view>
                            <view class="module-flex-number">{{analyze.brown_spot.rectangle.length}}处</view>
                        </view>
                    </view>
                    <view class="module-flex-item">
                        <image class="module-flex-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/04/04/cf30364df4cac5874f8aba438f2b3d57.png"></image>
                        <view class="module-flex-check">
                            <view class="module-flex-name">痣</view>
                            <view class="module-flex-number">{{analyze.mole.rectangle.length}}处</view>
                        </view>
                    </view>
                </view>
                <view class="module-check">
                    <image class="module-check-img" src="/static/report/report-picture.png"></image>
                    <view class="module-check-name" bindtap="faceSee" data-type="pigment">查看检测图</view>

                    <!-- 检测图 -->
                    <view class="face-back {{pigmentFace ? 'active' : ''}}"></view>
                    <view class="face-pop {{pigmentFace ? 'active' : ''}}">
                        <view class="face-cont">
                            <view class="face-img" style="background-image: url({{coverImg}}); background-repeat: no-repeat; background-size: 396rpx 520rpx; background-position: right;background-clip: border-box; "></view>
                            <view class="face-ai" style="background-image: url('{{ analyze.face_urls.roi_outline_map}}'); background-repeat: no-repeat; background-size: 396rpx 520rpx; width: {{(100 - precent) + '%'}};background-clip: content-box;background-origin: content-box; background-position: right;"></view>

                            <view class="process_wrap" style="left:{{2*progress - 4}}rpx">
                                <view class="line" bindtap="moveTo"></view>
                                <view class="spot" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
                            </view>
                        </view>
                        <view class="surveyTop-close" bindtap="faceSee" data-type="pigment">
                            <image src="/static/icons/reportColse.png" mode="aspectFill"></image>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>

    <!-- 按钮 -->
    <view class="footer {{footerPop ? 'active' : ''}}" wx:if="{{Type != 'see'}}">
        <view class="footer-flex" wx:if="{{Type == '1' || Type == '2'}}">
            <navigator hover-class="none" url="/pages/recruit/index" class="footer-flex-btn footer-flex-share" open-type="switchTab">回到体验官</navigator>
        </view>
        <view class="footer-flex" wx:else>
            <navigator hover-class="none" url="../share/share" class="footer-flex-btn footer-flex-share">邀请好友</navigator>
            <navigator hover-class="none" url="/pages/mall/index" open-type="switchTab" class="footer-flex-btn">产品推荐</navigator>
        </view>
    </view>
</view>
<view class="refertoEject {{refertoStatus ? 'active' : ''}}" catchtouchmove='true'></view>
<view class="refertoCont {{refertoStatus ? 'active' : ''}}" catchtouchmove='true'>
    <view class="refertoCont-text">
        <view class="refertoCont-title">温馨提示</view>
        <image class="refertoCont-ls" src="/static/imgs/ls.png" mode="widthFix"></image>
        <view class="refertoCont-tips">
            您已经成功申请体验官，请在收到产品后进行10天的打卡体验，感谢您的支持
        </view>
        <view class="refertoCont-btn" bindtap="refertoTap">
            我知道了
        </view>
    </view>
    <!-- <image class="refertoCont-close" bindtap="refertoTap" src="https://cdn.shuiganying.com/images/2023/07/07/f9975891c1efa9b5fcd59fe33a75ed60.png" mode="widthFix"></image> -->
</view>