<template>
	<view>
		<!-- 老人信息 -->

		<view class="health-container">
			<view class="health-card" :style="norm">
				<image src="./images/hb-norm.png" alt="" ></image>
				<text>心跳:<text class="health-num">72</text>次/分</text>
			</view>
			<view class="health-card" :style="warn">
				<image src="./images/temp-warn.png" alt="" >
				</image>
				<text>体温:<text class="health-num">37.0</text>&#8451;</text>
			</view>
			<view class="health-card" :style="norm">
				<image src="./images/bpres-norm.png" alt="">
				</image>
				<text>血压:<text class="health-num">14</text>kPa</text>
			</view>
			<view class="health-card" :style="danger">
				<image src="./images/oxy-danger.png" alt="">
				</image>
				<text>血氧:<text class="health-num">92</text>%</text>
			</view>
			<view class="health-list">
				<view class="health-list-item">
					<text>脉搏:</text>
					<text>78 次/分</text>
				</view>
				<view class="health-list-item">
					<text>呼吸:</text>
					<text>16 次/分</text>
				</view>
				<view class="health-list-item">
					<text>血糖:</text>
					<text>6.7 mmol/L</text>
				</view>
				<view class="health-list-item">
					<text>血脂:</text>
					<text>4.6 mmol/L</text>
				</view>
				<view class="health-list-item">
					<text>其他指标1:</text>
					<text>16 次/分</text>
				</view>
			</view>
			<view class="elder-location">
				<view class="elder-location-text">
					<uni-icons type="location-filled" size="16px" color="#4964af"></uni-icons>
					<text>老人位置: 厦门市高崎机场T2航站楼</text>
				</view>
				<map class="map-area" :latitude="latitude"
				 :longitude="longitude" :scale="13" show-location="true"
					style="width: 100%;height: 500rpx;z-index: 10;" @click="handleToMap"></map>
			</view>
		</view>

	</view>
</template>
<script setup>
	import { useStore } from 'vuex';
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';
	const store = useStore();
	onShow(() => {
	})
	onLoad((options) => {
		
	})
	onReady(() => {
		console.log('setup中的onReady');
	})
	let latitude = ref(24.539473)
	let longitude = ref(118.137053)
	let danger=reactive({
		// "borderColor": "red",
		"color": "red",
		"font-weight": "bold",
		"backgroundColor": "#f5c2c8",
	})
	let warn=reactive({
		// "borderColor": "orange",
		"color": "#f08300",
		"font-weight": "bold",
		"backgroundColor": "#fcdab8",
	})
	let norm= reactive({
		// "borderColor": "green",
		"color": "green",
		"font-weight": "bold",
		"backgroundColor": "#ddf2da",
	})
	function handleToMap() {
		// uni.navigateTo({
		// 	// url: '/pages/homepage/TencentMap/index'
		// })
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.elder-data {
		margin: 10px 10px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.health-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		margin: 70rpx;
		margin-top: 35rpx;
	}

	.health-card {
		width: 260rpx;
		height: 260rpx;
		font-size: 16px;
		margin-bottom: 50rpx;
		background-color: #fff;
		border-radius: 15px;
		text-align: center;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	image {
		width: 150rpx;
		height: 150rpx;
	}

	.health-list {
		width: 610rpx;
		margin-bottom: 50rpx;
		border-radius: 10px;
		padding: 5px 10px;
		background-color: #fff;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}

	.health-list-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		color: #666;
		line-height: 2.2;
		border-bottom: 1px solid #eee;
	}

	.health-list-item:last-of-type {
		border-bottom: none;
	}

	.health-num {
		font-size: 22px;
		margin: 0 3px;
	}

	.elder-location {
		width: 100%;
		border: 2px solid #f1f1f1;
		border-radius: 5px;
		box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
	}

	.elder-location-text {
		width: 100%;
		padding: 10px;
		padding-left: 5px;
		background-color: #fefefe;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		color: #555;
		font-size: 16px;
		line-height: 1.4;
	}
</style>