<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-color">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-col-xs-4">
					<div class="vongi-color-block block-red" @click="goToInfo({name:'MasterHealthChart',query:{type:'heart',title:'心率'}})">
						<span class="vongi-color-unit">次/分</span>
						<div class="mui-h1" v-text="healthData.heart?healthData.heart:'暂无'"></div>
						<div class="mui-media-body">心率</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-8">
					<div class="vongi-color-block block-yellow" @click="goToInfo({name:'MasterHealthChart',query:{type:'diastolic,systolic',title:'血压'}})">
						<span class="vongi-color-unit">mmHg</span>
						<div class="mui-h1" v-text="tolic"></div>
						<div class="mui-media-body">血压</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-4">
					<div class="vongi-color-block block-green" @click="goToInfo({name:'MasterHealthChart',query:{type:'oxygen',title:'血氧浓度'}})">
						<span class="vongi-color-unit"></span>
						<div class="mui-h1" v-text="healthData.oxygen?healthData.oxygen:'暂无'"></div>
						<div class="mui-media-body">血氧浓度</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-8">
					<div class="vongi-color-block block-green" @click="goToInfo({name:'MasterHealthChart',query:{type:'temperature',title:'体温'}})">
						<span class="vongi-color-unit"></span>
						<div class="mui-h1">{{healthData.temperature?(healthData.temperature+'℃'):'暂无'}}</div>
						<div class="mui-media-body">体温</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-4" @click="goToInfo({name:'MasterHealthChart',query:{type:'power',title:'电量'}})">
					<div class="vongi-color-block block-blue">
						<span class="vongi-color-unit"></span>
						<div class="mui-h1">{{healthData.power?healthData.power:'暂无'}}%</div>
						<div class="mui-media-body">电量</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-4">
					<div class="vongi-color-block block-yellowe" @click="goToInfo({name:'MasterHealthChart',query:{type:'step',title:'运动'}})">
						<span class="vongi-color-unit">步</span>
						<div class="mui-h1" v-text="healthData.step?healthData.step:'暂无'"></div>
						<div class="mui-media-body">运动</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-4">
					<div class="vongi-color-block block-pink" @click="goToInfo({name:'MasterHealthWarningSet'})">
						<div class="mui-h1 mui-icon mui-icon-gear vongi-color-icon"></div>
						<div class="mui-media-body">预警参数</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-col-xs-12">
					<div class="vongi-color-block block-green" @click="goToInfo({name:'MasterHealthChartMap',query:{type:'lbs',title:'活动轨迹'}})">
						<span class="vongi-color-unit"></span>
						<div class="mui-h1" v-text="address"></div>
						<div class="mui-media-body">定位</div>
					</div>
				</li>
			</ul>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import MapLoader from '$project/utils/AMap'
	export default {
		name: 'MasterHealthArchives',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '健康档案',

				healthData: {},

				address: '暂无',
			}
		},
		created() {},
		methods: {
			//获取手环数据
			getHeathData() {
				this.isLoading = true;
				API_Health.getHeathData().then(response => {
					this.isLoading = false;

					if (JSON.stringify(response) != "{}") {
						this.healthData = response;
						if (response.lbs) {
							let lbsArr = response.lbs.split(',');
							//获取定位地址
							this.getPositionByLonLats(lbsArr[0], lbsArr[1]);
						}
					} else {
						mui.alert('请先绑定智能手表设备，并保持佩戴几分钟以便我们获取最新的监测数据。', '暂无数据', function() {

						});
					}

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取定位地址
			getPositionByLonLats(longitude, latitude) {
				var _this = this;
				MapLoader().then(AMap => {
					var lnglatXY = [longitude, latitude];
					AMap.service('AMap.Geocoder', function() {
						let geocoder = new AMap.Geocoder({});
						geocoder.getAddress(lnglatXY, function(status, result) {
							console.log(lnglatXY);
							console.log(status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								console.log(address);
								_this.address = address;
							} else {
								_this.address = '无法获取定位';
							}
						});
					});
				}).catch(error => {
					console.log(error)
				})
			},
			//点击获取详情
			goToInfo(obj) {
				if (JSON.stringify(this.healthData) != "{}") {
					this.$router.push(obj);
				}
			},

			asynCallBack() {},
		},
		mounted() {
			//获取手环数据
			this.getHeathData();
		},
		destroyed() {

		},
		computed: {
			tolic: {
				// getter
				get: function() {
					if (this.healthData.diastolic) {
						return this.healthData.diastolic + '/' + this.healthData.systolic;
					} else {
						return '暂无';
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
				persion_home_model: 'persion_home_model'
			})
		}
	}
</script>


<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.vongi-color-block a {
		color: #fff;
	}
</style>
