<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>饮食建议</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/layer.js"></script>
</head>


<body style="text-align:center">
<br>

<h2>膳食指导</h2>
<br>

<div id="app">
    <div style="margin:0 auto; width:90%">
        <h4 align="left">您的全天热量需求为&nbsp;{{DailyEnergy}} &nbsp;千卡</h4>
        <p align="left">*仅适用于极轻体力劳动者（如办公室人员）</p>
        <div class="panel panel-primary">
            <div class="panel-heading">三餐热量分配比例</div>
            <table class="table">
                <tr>
                    <td></td>
                    <td>早餐</td>
                    <td>午餐</td>
                    <td>晚餐</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>30%</td>
                    <td>40%</td>
                    <td>30%</td>
                </tr>
                <tr>
                    <td>千卡</td>
                    <td>{{breakfastEnergy}}</td>
                    <td>{{lunchEnergy}}</td>
                    <td>{{dinnerEnergy}}</td>
                </tr>
            </table>
        </div>
    </div>

    <br>
    <div style="margin:0 auto; width:90%">
        <div class="panel panel-success">
            <div class="panel-heading">早餐推荐比例</div>
            <table class="table">
                <tr>
                    <td></td>
                    <td>主食（谷物、杂粮、薯类，碳水化合物）</td>
                    <td>肉类（蛋白质）</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>60%</td>
                    <td>18%</td>
                </tr>
                <tr>
                    <td>千卡</td>
                    <td>{{breakfastEnergy_maple}}</td>
                    <td>{{breakfastEnergy_meat}}</td>
                </tr>
            </table>
        </div>
    </div>

    <div style="margin:0 auto; width:90%">
        <div class="panel panel-warning">
            <div class="panel-heading">午餐推荐比例</div>
            <table class="table">
                <tr>
                    <td></td>
                    <td>主食（谷物、杂粮、薯类，碳水化合物）</td>
                    <td>肉类（荤菜，蛋白质）</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>60%</td>
                    <td>20%</td>
                </tr>
                <tr>
                    <td>千卡</td>
                    <td>{{lunchEnergy_maple}}</td>
                    <td>{{lunchEnergy_meat}}</td>
                </tr>
            </table>
        </div>
    </div>

    <div style="margin:0 auto; width:90%">
        <div class="panel panel-danger">
            <div class="panel-heading">晚餐推荐比例</div>
            <table class="table">
                <tr>
                    <td></td>
                    <td>主食（谷物、杂粮、薯类，碳水化合物）</td>
                    <td>肉类（荤菜，蛋白质）</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>50%</td>
                    <td>15%</td>
                </tr>
                <tr>
                    <td>千卡</td>
                    <td>{{dinnerEnergy_maple}}</td>
                    <td>{{dinnerEnergy_meat}}</td>
                </tr>
            </table>
        </div>
    </div>

    <p>*以下蔬果、奶类摄入量以2016膳食宝塔推荐数据为准</p>
    <div style="margin:0 auto; width:90%">
        <div class="panel panel-primary">
            <table class="table">
                <tr>
                    <td>早餐</td>
                    <td>蔬菜类</td>
                    <td>水果类</td>
                    <td>奶类</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>20%</td>
                    <td>20%</td>
                    <td>60%</td>
                </tr>
                <tr>
                    <td>重量(克)</td>
                    <td>60-100</td>
                    <td>40-70</td>
                    <td>180</td>
                </tr>
            </table>
        </div>

        <div class="panel panel-primary">
            <table class="table">
                <tr>
                    <td>中餐</td>
                    <td>蔬菜类</td>
                    <td>水果类</td>
                    <td>奶类</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>40%</td>
                    <td>40%</td>
                    <td>0%</td>
                </tr>
                <tr>
                    <td>重量(克)</td>
                    <td>120-200</td>
                    <td>80-140</td>
                    <td>0</td>
                </tr>
            </table>
        </div>

        <div class="panel panel-primary">
            <table class="table">
                <tr>
                    <td>晚餐</td>
                    <td>蔬菜类</td>
                    <td>水果类</td>
                    <td>奶类</td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>40%</td>
                    <td>40%</td>
                    <td>40%</td>
                </tr>
                <tr>
                    <td>重量(克)</td>
                    <td>120-200</td>
                    <td>80-140</td>
                    <td>120</td>
                </tr>
            </table>
        </div>
    </div>
    <br>
    <div style="margin:0 auto; width:90%">
        <button class="btn btn-lg btn-warning btn-block" @click="printReport">打印报告</button>
    </div>
    <br>
    <br>
</div>

</body>
<script src="/js/common.js"></script>
<script>
	var data = {
		DailyEnergy: '',
		breakfastEnergy: "",
		lunchEnergy: "",
		dinnerEnergy: "",
		breakfastEnergy_maple: "",
		lunchEnergy_maple: "",
		dinnerEnergy_maple: "",
		breakfastEnergy_meat: "",
		lunchEnergy_meat: "",
		dinnerEnergy_meat: ""
	};
	// var dataObj, deviceID, uuid, uid, Height, BMI, stWeight, DailyEnergy;  //全局变量

	var app = new Vue({
		el: "#app",
		data: data,
		created: function () {
			let sex = this.getQueryString('sex'),
				weight = this.getQueryString('weight');
			if (sex === '1' || sex === '男') {
				if (weight < 70) {
					this.DailyEnergy = 2030;
				} else if (weight >= 70 && weight < 80) {
					this.DailyEnergy = 2370;
				} else if (weight >= 80 && weight < 90) {
					this.DailyEnergy = 2710;
				} else if (weight >= 90) {
					this.DailyEnergy = 3050;
				}
			} else if (sex === '2' || sex === '女') {
				if (weight < 55) {
					this.DailyEnergy = 1520;
				} else if (weight >= 55 && weight < 60) {
					this.DailyEnergy = 1680;
				} else if (weight >= 60 && weight < 65) {
					this.DailyEnergy = 1830;
				} else if (weight >= 65) {
					this.DailyEnergy = 1980;
				}
			}

			// this.DailyEnergy = parseInt(this.DailyEnergy);

			this.breakfastEnergy = this.DailyEnergy * 0.3;
			this.lunchEnergy = this.DailyEnergy * 0.4;
			this.dinnerEnergy = this.DailyEnergy * 0.3;
			this.breakfastEnergy_maple = parseInt(this.breakfastEnergy * 0.6);
			this.breakfastEnergy_meat = parseInt(this.breakfastEnergy * 0.18);
			this.lunchEnergy_maple = parseInt(this.lunchEnergy * 0.6);
			this.lunchEnergy_meat = parseInt(this.lunchEnergy * 0.2);
			this.dinnerEnergy_maple = parseInt(this.dinnerEnergy * 0.5);
			this.dinnerEnergy_meat = parseInt(this.dinnerEnergy * 0.15);
		},
		methods: {
			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return decodeURIComponent(r[2]);
				}
				return '';
			},
            printReport() {
                layer.alert('请在浏览器打开 ' + location.href + ' 打印报告');
            }
		}
	});
</script>
</html>

