<template>
	<view>
		<view class="content">
			<z-paging ref="paging"refresher-only @onRefresh="onRefresh">
				<view class="content-header">
					<view class="sha-dow"></view>
					<view class="text">
						<view class="left">
							<view class="title">
								家庭健康管理
							</view>
							<view class="desc">
								<text class="">共享健康    ·      守护家人</text> 
							</view>
						</view>
					</view>
				</view>
				<view class="content-item row">
					<view class="item">
						<view class="title">卡路里</view>
						<view class="row-date">
							{{dataLists.step.calorie}}
						</view>
					</view>
					<view class="item">
						<view class="title">步数</view>
						<view class="row-date">
							{{dataLists.step.step}}
						</view>
					</view>
					<view class="item">
						<view class="title">距离</view>
						<view class="row-date">
							{{dataLists.step.distance}}
						</view>
					</view>
					
					<view class="row-time">
						{{dataLists.updataDate}}
					</view>
					<view class="bg">
						<image src="../../static/icon/血糖.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('bloodGlucose')}}
					</view>
					<view class="time">
						{{dataLists.bloodGlucose? dataLists.bloodGlucose.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.bloodGlucose? dataLists.bloodGlucose.bloodGlucose : '--'}}
						<text class="icon">毫摩尔/升</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/血糖.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('bloodOxygen')}}
					</view>
					<view class="time">
						{{dataLists.bloodOxygen? dataLists.bloodOxygen.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.bloodOxygen? getArrMaxValue(dataLists.bloodOxygen.bloodOxygen) : '--'}}
						<text class="icon">%</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/血氧.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('bloodPressure')}}
					</view>
					<view class="time">
						{{dataLists.bloodPressure? dataLists.bloodPressure.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.bloodPressure? dataLists.bloodPressure.bloodPressure.bloodPressureHigh + '/' + dataLists.bloodPressure.bloodPressure.bloodPressureLow : '--'}}
						<text class="icon">mmHG</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/血压.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('heartReat')}}
					</view>
					<view class="time">
						{{dataLists.heartReat? dataLists.heartReat.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.heartReat? getArrMaxValue(dataLists.heartReat.heartReat) : '--'}}
						<text class="icon">次/分</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/脉率.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('meiTuo')}}
					</view>
					<view class="time">
						{{dataLists.meiTuo? dataLists.meiTuo.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.meiTuo? getArrMaxValue(dataLists.meiTuo.meiTuo) : '--'}}
						<text class="icon">MET</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/心率.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						尿酸
					</view>
					<view class="time">
						{{dataLists.bloodLiquid? dataLists.bloodLiquid.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{dataLists.bloodLiquid? dataLists.bloodLiquid.bloodLiquid.uricAcidVal/10 : '--'}}
						<text class="icon">微摩尔/升</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/体温计.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="content-item" style="height: 360rpx">
					<view class="title">
						{{getNameByKey('bloodLiquid')}}
					</view>
					<view class="time">
						{{dataLists.meiTuo? dataLists.meiTuo.date + '更新' : '--'}}
					</view>
					<view class="gap-content">
						<view class="gap-item">
							<view class="title">
								胆固醇
							</view>
							<view class="num">
								{{dataLists.bloodLiquid? dataLists.bloodLiquid.bloodLiquid.cholesterol/100 : '--'}}
								<text class="icon">微摩尔/升</text>
							</view>
						</view>
						<view class="gap-item">
							<view class="title">
								三酰甘油
							</view>
							<view class="num">
								{{dataLists.bloodLiquid? dataLists.bloodLiquid.bloodLiquid.triacylglycerol/100 : '--'}}
								<text class="icon">微摩尔/升</text>
							</view>
						</view>
						<view class="gap-item">
							<view class="title">
								高密度脂蛋白
							</view>
							<view class="num">
								{{dataLists.bloodLiquid? dataLists.bloodLiquid.bloodLiquid.highDensity/100 : '--'}}
								<text class="icon">微摩尔/升</text>
							</view>
						</view>
						<view class="gap-item">
							<view class="title">
								低密度脂蛋白
							</view>
							<view class="num">
								{{dataLists.bloodLiquid? dataLists.bloodLiquid.bloodLiquid.lowDensity/100 : '--'}}
								<text class="icon">微摩尔/升</text>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 200rpx"></view>
			</z-paging>
		</view>
		
		<navtab :current="0"></navtab>
	</view>
</template>

<script>
	import { getArrMaxValue } from '@/utils/utils.js'
	export default {
		data() {
			return {
				keyNameMap: {
				    bloodGlucose: "血糖",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
					heartReat: '心率',
				    bloodLiquid: "血液",
					meiTuo: '梅拖',
					pulseReat: '脉率',
					updataDate: '更新时间'
				},
				dataLists: {}
			}
		},
		onLoad() {
			this.onRefresh();
		},
		methods: {
			getArrMaxValue,
			onRefresh(pageNo, pageSize) {
				this.$store.dispatch('api/getDayInfo').then(res => {
					this.dataLists = res.data_msg;
					this.$refs.paging.complete();
				});
			},
			getNameByKey(key) {
			    return this.keyNameMap[key] || "Key not found";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 30rpx;
		margin-top:20rpx;
		.content-header {
			margin-bottom: 30rpx;
			padding: 30rpx;
			height: 600rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0rpx 0rpx 30rpx 0rpx;
			background-image: url('https://img.agrimedia.cn/watch-app/header-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			.sha-dow {
				width: 100%;
				height: 640rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				opacity: .4;
			}
			.text {
				width: 500rpx;
				height: 300rpx;
				left: 0px;
				top: 0px;
				right:0px;
				bottom:0px;
				margin:auto;
				margin: 0 auto;
				z-index: 999;
			}
			.left {
				.title {
					font-size: 80rpx;
					text-align: center;
					font-weight: 900;
					margin-bottom: 20rpx;
					text-stroke: 10rpx white;
				}
				.desc {
					text-align: center;
					font-size: 34rpx;
				}
			}
		}
		.row {
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.content-item {
			margin: 30rpx;
			padding: 30rpx;
			border: none;
			border-radius: 30rpx ;
			-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			position: relative;
			height: 200rpx;
			overflow: hidden;
			.title {
				font-size: 38rpx;
				font-weight: 800;
			}
			.row-time {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				font-size: 28rpx;
				color: grey;
			}
			.bg {
				position: absolute;
				bottom: 0rpx;
				right: 50rpx;
				opacity: .4;
				z-index: -1;
				image {
					width: 250rpx;
				}
			}
			.time {
				font-size: 28rpx;
				color: grey;
				padding: 20rpx 0rpx 20rpx 0rpx;
			}
			.row-date {
				font-size: 46rpx;
				font-weight: 800;
				display: flex;
				align-items: baseline;
				justify-content: center;
			}
			
			.date {
				font-size: 46rpx;
				font-weight: 800;
				display: flex;
				align-items: baseline;
				.icon {
					font-weight: 100rpx;
					font-size: 28rpx;
					color: grey;
					display: flex;
					flex-direction: column-reverse;
				}
			}
			
			.gap-content {
				display: flex;
				flex-wrap: wrap;
				.gap-item {
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;
					width: 50%;
					.title {
						font-size: 36rpx;
						padding-bottom: 10rpx;
					}
					.num {
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
</style>
