<template>
	<view class="content">
		<view class="top">
			<text>{{$t("inheritHeighet.title")}}</text>
			{{$t("inheritHeighet.tips0")}}
		</view>
		<view class="table">
			<view class="tr">
				<view class="text">{{$t("infoGender")}}</view>
				<view class="td">
					<view class="radio">
						<uni-icons :type="sex==1?'checkbox-filled':'circle'" @click="sex=1" size="24"
							:color="sex==1?'#fea606':'#dfdfdf'"></uni-icons>{{$t("infoMan")}}
					</view>
					<view class="radio ml-10">
						<uni-icons :type="sex==2?'checkbox-filled':'circle'" @click="sex=2" size="24"
							:color="sex==2?'#fea606':'#dfdfdf'"></uni-icons>{{$t("infoWoman")}}
					</view>
				</view>
			</view>
			<view class="tr">
				<view class="text">{{$t("infoBirthday")}}</view>
				<view class="td">
					<picker mode="date" :end="endDate" @change="maskClick" :value="birthday?birthday:endDate"
						:fields="fields">
						<view class="uni-input">
							{{birthday?birthday:$t("verifyPicker")}}
							<icon class="iconfont icon-arrow-down-bold"></icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="tr">
				<view class="text">{{$t("inheritHeighet.dad")}}</view>
				<view class="td">
					<input class="input" type="digit" v-model="dadheight " :placeholder="$t('verifyPicker')">cm
				</view>
			</view>
			<view class="tr">
				<view class="text">{{$t("inheritHeighet.mom")}}</view>
				<view class="td">
					<input class="input" type="digit" v-model="momheight" :placeholder="$t('verifyPicker')">cm
				</view>
			</view>
		</view>
		<view class="table table2">
			<view class="text">{{$t("inheritHeighet.geneticheight")}}</view>
			<view class="text">{{$t("inheritHeighet.adultheight")}}</view>
			<view class="td">
				<text>{{geneticheight}}</text>cm
			</view>
			<view class="td">
				<text>{{adultheight}}</text>
				<text class="text2" v-if="errorvalue">±{{errorvalue}}</text> cm
			</view>
		</view>
		<view class="btn mb-15" @click="handleClick">{{$t("btnBMI")}}</view>
		<view class="title mt-20">
			<view class="h5">{{$t("inheritHeighet.tips1")}}</view>
			<view class="con">{{$t("inheritHeighet.tips2")}}</view>
			<view class="h5">{{$t("inheritHeighet.tips3")}}</view>
			<view class="con">{{$t("inheritHeighet.tips4")}}</view>
			<view class="con" v-for="(ite,ind) in configInfo.literature.height_prediction"
				v-if="configInfo.literature.height_prediction.length">
				{{ite}}
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sex: 1,
				errorvalue: 0,
				adultheight: 0,
				geneticheight: 0,
				dadheight: "",
				momheight: "",
				birthday: "",
				fields: "",
			}
		},
		computed: {
			...mapState(["user", "configInfo"]),
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			let that = this
			uni.setNavigationBarTitle({
				title: this.$t('inheritHeighet.title'),
			})
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		methods: {
			handleClick() {
				let that = this
				if (!that.dadheight) {
					that.$tools.msg(that.$t("verifyHeightDad"));
					return
				}
				if (!that.momheight) {
					that.$tools.msg(that.$t("verifyHeightMom"));
					return
				}
				if (!that.birthday) {
					that.$tools.msg(that.$t("verifyBirthday"));
					return
				}
				uni.showLoading({
					title:that.$t("msgCalculating")
				});
				that.$model.GetPredictheight({
					dadHeight: that.dadheight,
					momHeight: that.momheight,
					birthday: that.birthday,
					sex: that.sex,
				}).then(res => {
					if (res.code != 0) return
					setTimeout(function() {
						uni.hideLoading();
					}, 1000);
					that.adultheight = res.data.adultheight
					that.geneticheight = res.data.geneticheight
					that.errorvalue = res.data.errorvalue
				})
			},
			//确定年龄
			maskClick(e) {
				this.birthday = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 15px 10px;
		background: #fff;
		min-height: calc(100vh - 30px);

		.radio {
			display: flex;
			height: 34px;
			line-height: 34px;
		}

		picker {
			width: 100%;
			text-align: right;
			border: none;
			color: #333333;
		}

		.top {
			width: 100%;
			line-height: 30px;
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 30rpx;
			color: #999;

			text {
				width: 100%;
				display: block;
				text-align: center;
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
			}
		}

		.h5 {
			font-size: 30rpx;
			color: #666;
		}

		.con {
			margin-top: 5px;
			color: #999;
			line-height: 22px;
			font-size: 28rpx;
		}

		.table,
		.table2 {
			width: 100%;
			border: 1px solid #d69231;
			border-bottom: none;
			box-sizing: border-box;
			border-spacing: inherit;
			font-size: 28rpx;
			height: auto;
			overflow: hidden;
			border-right: none;

			.tr {
				width: 50%;
				float: left;

				.text {
					width: 40%;
				}

				.td {
					width: 60%;
				}
			}

			.text {
				float: left;
				height: 35px;
				line-height: 35px;
				background: #ffcf85;
				box-sizing: border-box;
				border-bottom: 1px solid #d69231;
				border-right: 1px solid #d69231;
				text-align: center;
			}

			.td {
				box-sizing: border-box;
				background: #e4cdac21;
				display: flex;
				float: left;
				height: 35px;
				line-height: 35px;
				padding-right: 5px;
				padding-left: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-bottom: 1px solid #d69231;
				border-right: 1px solid #d69231;
				text-align: center;


				/deep/input {
					width: 95%;
					height: 35px;
					line-height: 35px;
					font-size: 30rpx !important;
				}
			}

		}

		.table2 {
			margin: 50rpx auto;
			border-right: none;
			text-align: center;

			.text {
				width: 50%;
				border-right: 1px solid #d69231;
			}

			.td {
				height: 50px;
				width: 50%;
				line-height: 50px;
				display: inherit;
				border-right: 1px solid #d69231;

				.text2 {
					font-size: 36rpx;
					font-weight: bold
				}
			}
		}
	}

	.btn {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 15px;
		background-color: $maincolor;
	}
</style>