<template>
	<view class="u-main-page">
		<u-form :model="PostData" :rules="rules" ref="form1">
			<u-form-item label="体重" prop="weight" borderBottom ref="item1">
				<u-input type="digit" v-model="PostData.weight" placeholder="请输入公斤体重" border="none"></u-input>
			</u-form-item>
			<u-form-item label="身高" prop="height" borderBottom ref="item1">
				<u-input type="digit" v-model="PostData.height" placeholder="请输入厘米身高" border="none"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sexname" borderBottom @click="showSexSelect" ref="item1">
				<u-input v-model="PostData.sexname" disabled disabledColor="$u-bg-color" placeholder="请选择性别" border="none">
				</u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom @click="showAgeSelect" ref="item1">
				<u-input v-model="PostData.age" disabled disabledColor="$u-bg-color" placeholder="请选择年龄" border="none">
				</u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u-form>
		<u-datetime-picker :minDate="minDate" :show="showAge" v-model="currentTimeData" mode="date" @cancel="showAge=false"
			@confirm="ageCofirm" @change="ageChange"></u-datetime-picker>
		<u-action-sheet :show="showSex" :actions="sexs" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-button type="primary" :loading="issubmitbmi" :disabled="issubmitbmi" text="计算" @click="submit"></u-button>
		
		<view class="content" v-if="iscalced">
			<view class="headertext">计算结果</view>
			<view>BMI:{{resdata.bmi}}</view>
			<view>等级:{{resdata.bmilevel}}</view>
		</view>
	</view>
</template>

<script>
	import {
		calcbmi
	} from '../common/api.js';
	export default {
		data() {
			return {
				//提交的数据
				PostData: {
					weight: '',
					height: '',
					sex: 0,
					sexname:'',
					age: null
				},
				resdata:{
					bmi:0,
					bmilevel:'',
					bmilevelcolor:''
				},
				//性别
				sexs: [{
						name: '男',
						value:1
					},
					{
						name: '女',
						value:2
					}
				],
				//表单规则验证
				rules: {
					weight: {
						type: 'string',
						required: true,
						message: '请填写正确的体重值',
						trigger: ['blur']
					},
					height: {
						type: 'string',
						required: true,
						message: '请填写正确的身高值',
						trigger: ['blur']
					},
					sexname: {
						type: 'string',
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				minDate: '',
				maxDate: '',
				currentTimeData:null,
				showAge: false, //是否显示年龄选择
				showSex: false, //是否显示性别选择
				iscalced:false,
				issubmitbmi: false, //是否提交计算bmi
			}
		},
		onLoad() {
			var nowtime = new Date();
			var minDate = nowtime.setFullYear(nowtime.getFullYear() - 100);
			this.minDate = new Date(minDate);
			this.maxDate = new Date();
		},
		methods: {
			//性别选择
			sexSelect(e) {
				console.log(e);
				this.PostData.sexname = e.name;
				this.PostData.sex = e.value;
				this.$refs.form1.validateField('sex')
			},
			//展示性别选择
			showSexSelect() {
				this.showSex = !this.showSex;
				uni.hideKeyboard();
			},
			//年龄选择
			showAgeSelect() {
				this.showAge = !this.showAge;
				uni.hideKeyboard();
			},
			//年龄确认
			ageCofirm(res) {
				this.showAge = !this.showAge;
				if(res.value.length == 3){
					this.PostData.age = res.value[0]+"/"+res.value[1]+"/"+res.value[2];
				}
			},
			//bmi计算
			submit() {
				var that =this;
				this.$refs.form1.validate().then(res => {
					that.calcbmi();
				}).catch(errors => {
					
				})
			},
			//bmi计算接口
			calcbmi(){
				calcbmi(this.PostData).then(res=>{
					this.resdata = res;
					this.iscalced=true;
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.headertext {
		font-size: 15px;
		font-weight: bold;
	}
	.content{
		margin-top: 10px;
		padding: 10px 15px 5px 15px;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 5px 0px #c3c3c3;
		font-size:13px;
	}
</style>
