@page
@model YBDevice.NWeb.Pages.Result.PrintModel
@{
    ViewData["Title"] = "打印预览";
    Layout = "/Pages/Shared/_Layout1.cshtml";
}
@if (Model.data != null)
{
    <div class="layui-card">
        <div class="layui-card-header">
            <button class="btn btn-primary js-print">打印</button>
        </div>
        <div class="layui-card-body"   style="margin:20px;">
            <div id="printcontent">
                <div class="container">
                    <div class="title">
                        <span style="margin-left: 34px;">人体成分健康分析报告</span>
                    </div>
                    <div class="main">
                        <div class="main-left">
                            <div class="personal-info">
                                <table>
                                    <tr>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th>身高</th>
                                        <th>测量时间</th>
                                    </tr>
                                    <tr>
                                        <td>@Model.data.NickName</td>
                                        <td>@(Model.data.Sex == GenderType.Male?"男":(Model.data.Sex == GenderType.FeMale?"女":"未知"))</td>
                                        <td>@(Model.data.Age)岁</td>
                                        <td>@(Model.data.Height.ToString("f1"))cm</td>
                                        <td>@Model.data.Time</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" style="text-align: left;padding-left: 18px;">本次测验健康评分为：@(Model.data.cmi.ToString("f1"))分</td>
                                    </tr>
                                </table>

                            </div>
                            <!------------------------ 人体成分分析 -------------------------->
                            <div class="human-component-analysis">
                                <div class="title">人体成分分析</div>
                                <div class="analysis-table">
                                    <div class="analysis-table-title">
                                        <div class="title-row title-row-1"
                                             style="width:140px;background-color: #0e4e90;border-top-left-radius: 10px;">项目</div>
                                        <div class="title-row title-row-2" style="width:168px;background-color: #71b1d4;">偏低</div>
                                        <div class="title-row title-row-3" style="width:84px;background-color: #5693c1;">正常</div>
                                        <div class="title-row title-row-4" style="width:168px;background-color: #2c669b;">偏高</div>
                                        <div class="title-row title-row-5" style="width:140px;background-color: #0e4e90;">范围</div>
                                    </div>
                                    <div class="analysis-table-body">
                                        <div class="line-name">
                                            <span>体重</span>
                                            <span>肌肉量</span>
                                            <span>肌肉率</span>
                                            <span>脂肪率</span>
                                            <span>脂肪量</span>
                                            <span>总水分</span>
                                            <span>骨骼肌量</span>
                                            <span>骨量</span>
                                        </div>
                                        <div class="line-val">
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.weight_pro)%;">
                                                            <div class="val">@(Model.data.weight)kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach(var item in Model.musclevallist)
                                                    {
                                                        var index = Model.musclevallist.IndexOf(item);
                                                        if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.muscleval_pro)%;">
                                                            <div class="val">@(Model.data.muscleval.ToString("f1"))kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.musclelist)
                                                    {
                                                         var index = Model.musclelist.IndexOf(item);
                                                       if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.muscle_pro)%;">
                                                            <div class="val">@(Model.data.muscle.ToString("f1"))%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.fat_rlist)
                                                    {
                                                        var index = Model.fat_rlist.IndexOf(item);
                                                       if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.fat_r_pro)%;">
                                                            <div class="val">@(Model.data.fat_r.ToString("f1"))%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.fat_wlist)
                                                    {
                                                         var index = Model.fat_wlist.IndexOf(item);
                                                       if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.fat_w_pro)%;">
                                                            <div class="val">@(Model.data.fat_w.ToString("f1"))kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.waterlist)
                                                    {
                                                         var index = Model.waterlist.IndexOf(item);
                                                      if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.water_pro)%;">
                                                            <div class="val">@(Model.data.water.ToString("f1"))%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.skeletalmusclelist)
                                                    {
                                                          var index = Model.skeletalmusclelist.IndexOf(item);
                                                      if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.skeletalmuscle_pro)%;">
                                                            <div class="val">@(Model.data.SkeletalMuscle.ToString("f1"))kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.bonelist)
                                                    {
                                                           var index = Model.bonelist.IndexOf(item);
                                                       if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.bone_pro)%;">
                                                            <div class="val">@(Model.data.bone.ToString("f1"))kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="line-range">
                                            <div class="item-range">-</div>
                                            <div class="item-range">@Model.musclevalscope</div>
                                            <div class="item-range">@Model.musclescope</div>
                                            <div class="item-range">@Model.fat_rscope</div>
                                            <div class="item-range">@Model.fat_wscope</div>
                                            <div class="item-range">@Model.waterscope</div>
                                            <div class="item-range">@Model.skescope</div>
                                            <div class="item-range">@Model.bonescope</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!------------------------ 肥胖分析 -------------------------->
                            <div class="obesity-analysis">
                                <div class="title">肥胖分析</div>
                                <div class="analysis-table">
                                    <div class="analysis-table-title">
                                        <div class="title-row title-row-1"
                                             style="width:140px;background-color: #0e4e90;border-top-left-radius: 10px;">项目</div>
                                        <div class="title-row title-row-2" style="width:168px;background-color: #71b1d4;">偏低</div>
                                        <div class="title-row title-row-3" style="width:84px;background-color: #5693c1;">正常</div>
                                        <div class="title-row title-row-4" style="width:168px;background-color: #2c669b;">偏高</div>
                                        <div class="title-row title-row-5" style="width:140px;background-color: #0e4e90;">范围</div>
                                    </div>
                                    <div class="analysis-table-body">
                                        <div class="line-name">
                                            <span>BMI</span>
                                            <span>皮下脂率</span>
                                            <span>皮下脂肪量</span>
                                            <span>内脏脂肪量</span>
                                        </div>
                                        <div class="line-val">
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.bmilist)
                                                    {
                                                         var index = Model.bmilist.IndexOf(item);
                                                        if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.bmi_pro)%;">
                                                            <div class="val">@(Model.data.bmi.ToString("f1"))</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.sfrlist)
                                                    {
                                                          var index = Model.sfrlist.IndexOf(item);
                                                        if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.sfr_pro)%;">
                                                            <div class="val">@(Model.data.sfr.ToString("f1"))%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.sfrvallist)
                                                    {
                                                         var index = Model.sfrvallist.IndexOf(item);
                                                        if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.sfrval_pro)%;">
                                                            <div class="val">@(Model.data.sfrval.ToString("f1"))kg</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-val">
                                                <div class="item-val-top">
                                                    @foreach (var item in Model.viscerallist)
                                                    {
                                                         var index = Model.viscerallist.IndexOf(item);
                                                        if(index == 1)
                                                        {
                                                            <span class="normalstand">@item</span>
                                                        }
                                                        else if(index == 0 || index == 2)
                                                        {
                                                            <span class="firststand">@item</span>
                                                        }
                                                        else
                                                        {
                                                             <span>@item</span>
                                                        }
                                                    }
                                                </div>
                                                <div class="item-val-bottom">
                                                    <div class="progress">
                                                        <div class="inner" style="width: @(Model.visceral_pro)%;">
                                                            <div class="val">@(Model.data.visceral.ToString("f0"))</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="line-range">
                                            <div class="item-range">@Model.bmiscope</div>
                                            <div class="item-range">@Model.sfrscope</div>
                                            <div class="item-range">@Model.sfrvalscope</div>
                                            <div class="item-range">@Model.visceralscope</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!------------------------ 躯干分析 -------------------------->
                            <div class="torso-analysis">
                                <div class="title">躯干分析</div>
                                <div class="torso-analysis-body">
                                    <img src="~/images/print/body.png">
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.musclekgleftarm.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.musclekgrightarm.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.musclekgtrunk.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.musclekgleftleg.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.musclekgrightleg.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.bodyfatkgleftarm.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.bodyfatkgrightarm.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.bodyfatkgtrunk.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.bodyfatkgleftleg.ToString("f1")</div>
                                    <div class="torso-analysis-item torso-analysis-item-1">@Model.data.bodyfatkgrightleg.ToString("f1")</div>
                                </div>
                            </div>
                        </div>
                        <div class="main-right">
                            <!------------------------ 身体类型 -------------------------->
                            <div class="body-type">
                                <div class="body-type-title">身体类型</div>
                                <div class="body-type-content">
                                    <!-- text-wrap 超过4个字换行居中 -->
                                    <div class="body-type-item"><span>隐形肥胖</span></div>
                                    <div class="body-type-item"><span>偏胖</span></div>
                                    <div class="body-type-item text-wrap"><span>结实型偏胖</span></div>
                                    <div class="body-type-item text-wrap"><span>缺乏肌肉型</span></div>
                                    <div class="body-type-item"><span>标准型</span></div>
                                    <div class="body-type-item text-wrap"><span>标准肌肉型</span></div>
                                    <div class="body-type-item"><span>偏瘦</span></div>
                                    <div class="body-type-item text-wrap"><span>偏瘦肌肉型</span></div>
                                    <div class="body-type-item text-wrap"><span>健美肌肉型</span></div>
                                </div>
                            </div>
                            <!------------------------ 营养分析 -------------------------->
                            <div class="nutrition-analysis">
                                <div class="nutrition-analysis-title">身体类型</div>
                                <table class="nutrition-analysis-table">
                                    <tr>
                                        <td style="width: 210px;">蛋白质</td>
                                        @if (Model.data.protein <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.protein.ToString("f1"))%</td>
                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">基础新陈代谢</td>
                                        @if (Model.data.kcal <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.kcal.ToString("f1"))kcal</td>

                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">身体年龄</td>
                                        @if (Model.data.bodyage <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.bodyage)岁</td>
                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">运动损耗</td>
                                        <td>-</td>
                                    </tr>
                                </table>
                            </div>
                            <!------------------------ 体重控制 -------------------------->
                            <div class="weight-control">
                                <div class="weight-control-title">体重控制</div>
                                <table class="weight-control-table">
                                    <tr>
                                        <td style="width: 210px;">体重</td>
                                        <td>@(Model.data.weight)kg</td>
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">体脂脂量</td>
                                        @if (Model.data.fat_w <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.fat_w.ToString("f1"))kg</td>

                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">去脂体重</td>
                                        @if (Model.data.lbm <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.lbm.ToString("f1"))kg</td>
                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">理想体重</td>
                                        @if (Model.data.idealweight <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.idealweight.ToString("f1"))kg</td>
                                        }
                                    </tr>
                                    <tr>
                                        <td style="width: 210px;">身体水分</td>
                                        @if (Model.data.water <= 0)
                                        {
                                            <td>-</td>
                                        }
                                        else
                                        {
                                            <td>@(Model.data.water.ToString("f1"))%</td>
                                        }
                                    </tr>
                                </table>
                            </div>
                            <!------------------------ 建议 -------------------------->
                            <div class="suggest">
                                <div class="suggest-title">建议</div>
                                <div class="content"></div>
                            </div>
                            <!------------------------ 二维码 -------------------------->
                           @* <div class="qrcode"></div>*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <div>测量记录暂不可打印</div>
}
@section css{
    <link href="~/css/print.css" rel="stylesheet" />
    <style>
        .firststand{
            width:164px
        }
        .normalstand{
            width:78px
        }
        .layui-card {
            margin-bottom: 15px;
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
        }
        .layui-card-header {
            position: relative;
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
        }
        .layui-card-body {
            position: relative;
            padding: 10px 15px;
        }
        .btn:not(:disabled):not(.disabled) {
            cursor: pointer;
        }

        .btn-primary {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
    </style>
}
@section Scripts{
    <script type="text/javascript" src="~/js/jqprint/jquery.jqprint-0.3.js"></script>
    <script type="text/javascript">
        $(".js-print").on("click", function () {
            $("#printcontent").jqprint({
                operaSupport: false
            });
        });
    </script>
}