<template>
	<view class="content">
		<view class="editem">
			<view class="name">{{$t("infoHeight")}}</view>
			<view class="right">
				<input type="digit" v-model="PostData.height" :placeholder="$t('verifyHeight')"
					placeholder-style="font-size:13px;color:#666" />cm
			</view>
		</view>
		<view class="editem">
			<view class="name">{{$t("infoWeight")}}</view>
			<view class="right">
				<input type="digit" v-model="PostData.weight" :placeholder="$t('verifyWeight')"
					placeholder-style="font-size:13px;color:#666" />kg
			</view>
		</view>
		<view class="editem">
			<view class="name">{{$t("infoGender")}}</view>
			<view class="right radio2">
				<view class="radio" @click="PostData.sex = 1">
					<uni-icons :type="PostData.sex==1?'checkbox-filled':'circle'" size="24"
						:color="PostData.sex==1?'#fea606':'#dfdfdf'"></uni-icons>{{$t("infoMan")}}
				</view>
				<view class="radio ml-15" @click="PostData.sex = 2">
					<uni-icons :type="PostData.sex==2?'checkbox-filled':'circle'" size="24"
						:color="PostData.sex==2?'#fea606':'#dfdfdf'"></uni-icons>{{$t("infoWoman")}}
				</view>
			</view>
		</view>
		<view class="editem">
			<view class="name">{{$t("infoBirthday")}}</view>
			<view class="right">
				<picker mode="date" :value="PostData.birthday" :end="endDate" @change="bindDateChange" :fields="fields">
					<view class="text">{{PostData.birthday?PostData.birthday:$t('verifyBirthday')}}</view>
					<icon class="iconfont icon-arrow-down-bold"></icon>
				</picker>
			</view>
		</view>
		<view class="box_con mb-15" v-if="iscalced">
			<view class="BMIlist">
				<view class="block">
					<view class="name">
						BMI
					</view>
					<view class="val">
						{{resdata.bmi?resdata.bmi:'0'}}
					</view>
					<view class="btnf" :style="{backgroundColor:resdata.bmilevelcolor}">
						{{resdata.bmilevel}}
					</view>
				</view>
				<view class="desc">
					<view class="statuevue">
						<view class="bi">
							<view :style="'left:'+resdata.offset+'%'" class="peobox">
								<view class="xx"></view>
							</view>
							<view class="item" v-for="(ite,ind) in resdata.bmilevellist" :key="ind"
								:style="{backgroundColor:ite.color}">
								<view class="span1">{{ite.text}}</view>
								<view class="span" v-if="ind<resdata.bmilevellist.length-1">{{ite.max_val}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="text" v-for="(ite,ind) in configInfo.literature.bmi_evaluation"
				v-if="configInfo.literature.bmi_evaluation.length">
				{{ite}}
			</view>
		</view>
		<view class="btn mt-20" @click="submit">{{$t("btnBMI")}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				//提交的数据
				PostData: {
					weight: '',
					height: '',
					sex: 0,
					birthday: null
				},
				resdata: {
					bmi: 0,
					bmilevel: '',
					bmilevelcolor: '',
					bmilevellist: [],
					offset: ""
				},
				leftval: 0,
				iscalced: false,
				fields: "",
			}
		},
		computed: {
			...mapState(["configInfo"]),
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			let that = this
			uni.setNavigationBarTitle({
				title: this.$t('titleBmi'),
			})
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		methods: {
			//年龄选择
			bindDateChange(e) {
				this.PostData.birthday = e.target.value
			},
			//bmi计算
			submit() {
				var that = this;
				if (!that.PostData.height) {
					this.$tools.msg(that.$t("verifyHeight"))
					return;
				}
				if (!that.PostData.weight) {
					this.$tools.msg(that.$t("verifyWeight"))
					return;
				}
				if (!that.PostData.sex) {
					this.$tools.msg(that.$t("verifyGender"))
					return;
				}
				if (!that.PostData.birthday) {
					this.$tools.msg(that.$t("verifyBirthday"))
					return;
				}
				that.$model.calcbmi(that.PostData).then(res => {
					if (res.code == 0) {
						this.resdata = res.data;
						this.iscalced = true;
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 15px;
		background-color: #fff;
	}

	.tip {
		font-size: 24rpx;
		color: #999;
		line-height: 22px
	}

	.editem {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		border-radius: 20px;
		margin-bottom: 15px;
		justify-content: space-between;
		background: #eee;
		padding-left: 15px;

		.name {
			width: 30%;
			float: left;
			height: 40px;
			line-height: 40px;
		}

		.right {
			width: 58%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 15px;
			height: 38px;
			line-height: 38px;

			.radio2 {
				justify-content: space-between;
			}

			.radio {
				width: 100%;
				display: flex;
				height: 40px;
				line-height: 40px;
			}

			.text,
			/deep/input {
				position: absolute;
				right: 15px;
				top: 0;
				left: 40%;
				z-index: 9999;
				color: #666;
				text-align: left;
			}

			/deep/input {
				padding-left: 0px;
				margin-top: 0px;
				font-size: 30rpx !important;
				height: 38px;
				line-height: 38px;
			}

		}
	}

	.btn {
		width: 100%;
		margin-top: 20px;
		background-color: $maincolor;
	}

	.box_con {
		margin: 15px 0;
		padding: 10px 15px 15px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 5px 0px #c3c3c3;
		font-size: 26rpx;
		width: calc(100% - 30px);
	}

	.desc {
		line-height: 20px;
		text-align: left;
		width: calc(100%-20px);
		height: auto;
		border-radius: 5px;
		font-size: 30rpx;
		color: #999;
		padding: 10px;
		background: #f7f7f7;


		.statuevue {
			height: 35px;
			position: relative;
			width: 100% !important;
			margin: 20px auto 10px;

			.bi {
				display: flex;
				justify-content: space-between;
				width: auto;
				padding-top: 10px;

				.peobox {
					position: absolute;
					right: 0;
					top: -1px;
					z-index: 999;

					.xx {
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background: #fff;
						position: absolute;
						z-index: 9;
						border: 2px solid #1b2086;
						top: 9px;
					}
				}
			}

			.item {
				position: relative;
				margin: 0;
				flex: 1;
				height: 5px;
				color: #666;
				font-size: 30rpx;

				.span1 {
					width: 100%;
					text-align: center;
					position: absolute;
					top: -23px;
				}

				.span {
					margin-top: 8px;
					position: absolute;
					right: -8px;
				}
			}
		}
	}

	.block {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		align-items: center;
	}

	.btnf {
		background-color: #ff5656;
		padding: 3px 8px;
		color: #fff;
		border-radius: 5px;
	}

	.yuanxing {
		display: inline-block;
		background: #f19601;
		width: 8px;
		height: 12px;
		margin-right: 5px;
		font-size: 36rpx;
	}
</style>