@page
@model YBDevice.NWeb.Pages.RegUser.FamilyModel
@{
    ViewData["Title"] = "趋势统计";
}
<div style="margin-bottom:10px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    首次测量
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@(Model.data.FirstWeight)KG</p>
                    <p>
                        首次测量时间
                        <span class="layuiadmin-span-color">@Model.data.FirstResultTime</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    最近测量
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@(Model.data.LastWeight)KG</p>
                    <p>
                        最近测量时间
                        <span class="layuiadmin-span-color">@Model.data.LastResultTime</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    体重变化
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@(Math.Abs(Model.data.Weight))KG</p>
                    <p>
                        变化趋势
                        @if (Model.data.Weight < 0)
                        {
                            <span class="layuiadmin-span-color" style="color:red;"><i class="seraph custom-icon custom-icon-web-icon-" style="font-size:25px;"></i></span>

                        }
                        else if (Model.data.Weight == 0)
                        {
                            <span class="layuiadmin-span-color" style="font-size:25px;">-</span>
                        }
                        else
                        {
                            <span class="layuiadmin-span-color" style="color:green;font-size:15px;"><i class="seraph custom-icon custom-icon-xiajiang" style="font-size:25px;"></i></span>
                        }
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日测量
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">@(Model.data.TodayResultCnt)次</p>
                    <p>
                        累计测量
                        <span class="layuiadmin-span-color">@(Model.data.TotalResultCnt)次</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <h3>体重趋势</h3>
    </div>
    <div class="layui-card-body layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" value="@Model.time" va class="layui-input" placeholder="请选择时间" id="times" />
            </div>
            <div class="layui-inline">
                <button class="btn btn-primary btn-lg  js-searchs" type="button">查询</button>
            </div>
        </div>
        <div id="EchartZhu" style="width: 100vw;height: 400px;"> </div>
    </div>
</div>
@section Scripts
{
    <script type="text/javascript">
    layui.config({
        base: "/js/echarts/",
        version: 1
    })
        .use(['common', 'echarts', 'laydate'], function () {
            var common = layui.common, echarts = layui.echarts, laydate = layui.laydate;
            var _family = {
                chartZhu: {},
                init: function () {
                    this.getchart();
                    this.search();
                },
                getchart: function () {
                     laydate.render({
                            elem: "#times",
                            range: '~',
                            calendar: true,
                            min: '@Model.mintime',
                            max:'@Model.maxtime'
                     });
                    this.getjson();
                },
                getjson: function () {
                    var that = this;
                    common.ajax({
                        url: "/js/echarts/ybhdmob.json",
                        success: function (data) {
                            echarts.registerTheme('ybhdmob', data);
                            that.chartZhu = echarts.init(document.getElementById('EchartZhu'), 'ybhdmob');
                            that.searchs();
                        }
                    });
                },
                request: function (url) {
                    var that = this;
                    common.ajax({
                        url: url,
                        success: function (res) {
                            var data = res.data;
                            var timelist = data.timelist;
                            that.chart(that.chartZhu, data.weightlist, timelist);
                        }
                    });
                },
                searchs: function () {
                    var that = this;
                    $(".js-searchs").on("click", function () {
                        var starttime = $("#times").val();
                        var url = "/api/result/getfamilyresult?id=" + '@Model.familyid';
                        if (starttime != "") {
                            var times = starttime.split('~');
                            url = url + "&starttime=" + times[0].trim() + "&endtime=" + times[1].trim();
                        }
                        that.request(url);
                    });
                    $(".js-searchs").trigger("click");
                },
                chart: function (id, list, time) {
                    var options = {
                        xAxis: {
                            type: 'category',
                            data: time
                        },
                        yAxis: {
                            type: 'value'
                        },
                        tooltip: {
                            show: true
                        },
                        series: [{
                            data: list,
                            type: 'line',
                            smooth: true,
                            itemStyle: {
                            normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top' //在上方显示
                                    }
                                }
                            },
                        }]
                    };
                    if (list.length == 0) {
                        var nodataoption = {
                            title: {
                                text: '暂无数据',
                                x: 'center',
                                y: 'center',
                                textStyle: {
                                    color: '#000',
                                    fontWeight: 'normal',
                                    fontSize: 16
                                }
                            }
                        };
                        options = $.extend(options, nodataoption);
                    }
                    id.setOption(options, true);
                },
                search: function () {
                    $(".js-search").on("click", function () {
                        var queryparam = [];
                        var starttime = $("#time").val();
                        if (starttime != "") {
                            var times = starttime.split('~');
                            queryparam.push({
                                "Name": 'createtime',
                                "Type": QueryCond.GreaterThanOrEqual,
                                "Value": times[0].trim()
                            });
                            queryparam.push({
                                "Name": 'createtime',
                                "Type": QueryCond.LessThanOrEqual,
                                "Value": times[1].trim()
                            });
                        }
                        common.reloadtable("list", {
                            where: {
                                queryParam: queryparam
                            }
                        });
                    });
                }
            }.init();
        });
    </script>
}