<template>
	<view>
		<tm-nav-bar left-icon="arrow-left" title="家庭健康" @clickLeft="back" />
		<view class="content">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
				<view class="content-header">
					<view class="left">
						<view class="title">
							家庭健康管理
						</view>
						<view class="desc">
							<text class="">共享健康</text> 
							<text class="">守护家人</text> 
						</view>
					</view>
					<view class="right">
						<image class="img" src="../../static/logo.png" mode=""></image>
					</view>
				</view>
				<view class="content-item">
					<view class="title">
						{{getNameByKey('bloodGlucose')}}
					</view>
					<view class="time">
						{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{list.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('bloodGlucose')}}
					</view>
					<view class="time">
						{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{list.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('bloodGlucose')}}
					</view>
					<view class="time">
						{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{list.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('bloodGlucose')}}
					</view>
					<view class="time">
						{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
					</view>
					<view class="date">
						{{list.bloodGlucose.bloodGlucose}}
						<text class="icon">℃</text>
					</view>
					<view class="bg">
						<image src="../../static/icon/脉率.png" mode="widthFix"></image>
					</view>
				</view>
			</z-paging>
		</view>
		
		<navtab :current="0"></navtab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				keyNameMap: {
				    bloodGlucose: "血糖",
				    bloodLiquid: "血液",
				    bloodOxygen: "血氧",
					bloodPressure: '血压',
					heartReat: '心率',
					meiTuo: '梅拖',
					pulseReat: '脉率',
					updataDate: '更新时间'
				},

				list: {
					bloodGlucose: {
						date: "2024-07-02-17-30",
						step: {
							"stepCount": 0,
							"amountOfExercise": 85,
							"distance": 0,
							"calorie": 0,
							"wear": 1
						},
						sleepData: [
							0,
							0,
							0,
							0,
							0,
							255
						],
						pulseReat: [
							0,
							0,
							0,
							0,
							0
						],
						heartReat: [
							0,
							0,
							0,
							0,
							0
						],
						respirationRate: [
							255,
							255,
							255,
							255,
							255
						],
						HRVData: [
							0,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255
						],
						bloodPressure: {
							"bloodPressureHigh": 0,
							"bloodPressureLow": 0
						},
						bloodOxygen: [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							64,
							64,
							0,
							0
						],
						"sleepAmountActivity": [
							0,
							0,
							0,
							0,
							0
						],
						"sleepStatus": [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							1
						],
						reset: {
							"time": 32,
							"reset": 0
						},
						g5Series: [
							0,
							0,
							0,
							0,
							0
						],
						bloodGlucose: 0,
						meiTuo: [
							10
						],
						pressure: [
							0
						],
						bloodLiquid: {
							"cholesterol": 0,
							"triacylglycerol": 0,
							"highDensity": 0,
							"lowDensity": 0,
							"uricAcidVal": 0
						},
						bodyTemperature: ""
					},
					pulseReat: null,
					meiTuo: {
						date: "2024-07-02-17-30",
						step: {
							"stepCount": 0,
							"amountOfExercise": 85,
							"distance": 0,
							"calorie": 0,
							"wear": 1
						},
						sleepData: [
							0,
							0,
							0,
							0,
							0,
							255
						],
						pulseReat: [
							0,
							0,
							0,
							0,
							0
						],
						heartReat: [
							0,
							0,
							0,
							0,
							0
						],
						respirationRate: [
							255,
							255,
							255,
							255,
							255
						],
						HRVData: [
							0,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255,
							255
						],
						bloodPressure: {
							"bloodPressureHigh": 0,
							"bloodPressureLow": 0
						},
						bloodOxygen: [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							64,
							64,
							0,
							0
						],
						sleepAmountActivity: [
							0,
							0,
							0,
							0,
							0
						],
						sleepStatus: [
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							0,
							1
						],
						reset: {
							"time": 32,
							"reset": 0
						},
						g5Series: [
							0,
							0,
							0,
							0,
							0
						],
						bloodGlucose: 0,
						meiTuo: [
							10
						],
						pressure: [
							0
						],
						bloodLiquid: {
							"cholesterol": 0,
							"triacylglycerol": 0,
							"highDensity": 0,
							"lowDensity": 0,
							"uricAcidVal": 0
						},
						bodyTemperature: ""
					}
				}
			}
		},
		onLoad() {
			console.log('123')
		},
		methods: {
			queryList(pageNo, pageSize) {
				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 {
			-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			margin-bottom: 30rpx;
			border-radius: 30rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0rpx;
			margin-top: 140rpx;
			.left {
				.title {
					font-size: 40rpx;
					font-weight: 900;
					margin-bottom: 20rpx;
				}
				.desc {
					font-size: 26rpx;
				}
			}
			.right {
				.img {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}
		.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;
			}
			.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;
			}
			.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;
				}
			}
		}
	}
</style>
