<template>
	<view>
		<z-paging ref="paging"refresher-only @onRefresh="onRefresh">
			<view class="flx jcsb ac">
				<view class="left">
					<view class="content-header">
						<view class="sha-dow"></view>
						<view class="text">
							<view class="left" style="width: 100%">
								<view class="title">
									家庭健康管理
								</view>
								<view class="desc">
									<text class="">共享健康    ·      守护家人</text> 
								</view>
							</view>
						</view>
					</view>
					<view class="control flx flx_sb">
						<view class="btn">
							<liu-data-select elementId="data-select3" :dataList="deviceList" @change="changeDev" bgColor="#fff"
								color="#000">
								<view id="data-select3" class="btn-info1">{{name2? '设备：' + name2 : '选择设备'}}</view>
							</liu-data-select>
						</view>
						<view class="btn" @click="outlogin">
							退出登录
						</view>
					</view>
					<view class="list-wrap">
						<view class="content-item row header-item" @click="toPageCom('stepIndex')">
							<view class="item">
								<view class="title">卡路里</view>
								<view class="row-date">
									<view>{{dataListsNew.stepIndex.data_msg ? dataListsNew.stepIndex.data_msg.calorie / 10 : '--'}}</view>
									<text>千卡</text>
								</view>
							</view>
							<view class="item">
								<view class="title">步数</view>
								<view class="row-date">
									<view>{{dataListsNew.stepIndex.data_msg ? dataListsNew.stepIndex.data_msg.step : '--'}}</view>
									<text>步</text>
								</view>
							</view>
							<view class="item">
								<view class="title">距离</view>
								<view class="row-date">
									<view>{{dataListsNew.stepIndex.data_msg ? (dataListsNew.stepIndex.data_msg.distance / 1000).toFixed(2) : '--'}}</view>
									<text>公里</text>
								</view>
							</view>
							<view class="row-time" v-if="dataListsNew.stepIndex">
								{{dataListsNew.stepIndex.device_real_time? dataListsNew.stepIndex.device_real_time + '更新' : '--'}}
							</view>
						</view>
						<view class="content-item row header-item" style="flex-direction: column" @click="toPageCom('SleepDatas')">
							<view class="title" style="width: 100%">
								{{getNameByKey('sleep')}}
							</view>
							<view class="date" style="width: 100%">
								<view class="flex_data" v-if="dataListsNew.SleepDatas.data_msg">
									<view v-if="!(i == 0 && v == 0)" class="" v-for="(v,i) in mkHourMin(dataListsNew.SleepDatas.data_msg[0].sleepTotalTime)" :key="i" class="flex_data">
										<view class="f_left" >
											{{v}}
										</view>
										<view class="f_right">
											<text class="icon">{{(i == 0?'时':'分')}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="time" style="width: 100%; text-align: right; padding-bottom: 0rpx; text-align: left;">
								{{dataListsNew.SleepDatas.data_msg? dataListsNew.SleepDatas.device_real_time + '更新' : '--'}}
							</view>
							<view class="bg">
								<image src="../../static/icon/sleep.png" style="width: 200rpx;" mode="widthFix"></image>
							</view>
						</view>
						<view class="content-item" @click="toPageCom('bloodGlucose')">
							<view class="title">
								{{getNameByKey('bloodGlucose')}}
							</view>
							<view class="time">
								{{dataListsNew.bloodGlucose.data_msg? dataListsNew.bloodGlucose.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bloodGlucose.data_msg || '--'}}
									</view>
									<view class="f_right">
										<text class="icon">毫摩尔/升</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/xuetang.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="content-item" @click="toPageCom('bloodOxygen')">
							<view class="title">
								{{getNameByKey('bloodOxygen')}}
							</view>
							<view class="time">
								{{dataListsNew.bloodOxygen.data_msg? dataListsNew.bloodOxygen.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bloodOxygen.data_msg? (dataListsNew.bloodOxygen.data_msg[0]) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">%</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/xueyang.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="content-item" @click="toPageCom('bloodPressure')">
							<view class="title">
								{{getNameByKey('bloodPressure')}}
							</view>
							<view class="time">
								{{dataListsNew.bloodPressure.data_msg? dataListsNew.bloodPressure.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bloodPressure.data_msg? dataListsNew.bloodPressure.data_msg.bloodPressureHigh + '/' + dataListsNew.bloodPressure.data_msg.bloodPressureLow : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">mmHG</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/xueya.png" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="content-item" @click="toPageCom('bodyTemperature')">
							<view class="title">
								{{getNameByKey('bodyTemperature')}}
							</view>
							<view class="time">
								{{dataListsNew.bodyTemperature.data_msg? dataListsNew.bodyTemperature.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bodyTemperature.data_msg? (dataListsNew.bodyTemperature.data_msg) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">℃</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/wendu.png" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="content-item" @click="toPageCom('pulseReat')">
							<view class="title">
								{{getNameByKey('pulseReat')}}
							</view>
							<view class="time">
								{{dataListsNew.pulseReat.data_msg? dataListsNew.pulseReat.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.pulseReat.data_msg? (dataListsNew.pulseReat.data_msg[0]) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">次/分</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/mailv.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="content-item" @click="toPageCom('ECGData')">
							<view class="title">
								心电图
							</view>
							<view class="time">
								{{dataListsNew.ECGData.data_msg? dataListsNew.ECGData.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.ECGData.data_msg? (dataListsNew.ECGData.data_msg.heartRate || dataListsNew.ECGData.data_msg.meanHeartRate) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">次/分</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/xindiantu.png" style="width: 220rpx;" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="content-item"  @click="toPageCom('bodyData')">
							<view class="title">
								身体成分
							</view>
							<view class="time">
								{{dataListsNew.bodyData.data_msg? dataListsNew.bodyData.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bodyData.data_msg? (dataListsNew.bodyData.data_msg.BMI ) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">BMI</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/rtcf.png" style="width: 220rpx;" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="content-item" @click="toPageCom('bloodLiquid')">
							<view class="title">
								尿酸
							</view>
							<view class="time">
								{{dataListsNew.bloodLiquid.data_msg? dataListsNew.bloodLiquid.device_real_time + '更新' : '--'}}
							</view>
							<view class="date">
								<view class="flex_data">
									<view class="f_left">
										{{dataListsNew.bloodLiquid.data_msg? (dataListsNew.bloodLiquid.data_msg.uricAcidVal / 10).toFixed(2) : '--'}}
									</view>
									<view class="f_right">
										<text class="icon">微摩尔/升</text>
									</view>
								</view>
							</view>
							<view class="bg">
								<image src="../../static/icon/niaosuan.png" style="width: 220rpx;" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="content-item" @click="toPageCom('bloodLiquidAll')">
							<view class="title">
								{{getNameByKey('bloodLiquidAll')}}
							</view>
							<view class="time">
								{{dataListsNew.bloodLiquid.data_msg? dataListsNew.bloodLiquid.device_real_time + '更新' : '--'}}
							</view>
							<view class="gap-content">
								<view class="gap-item">
									<view class="title">
										总胆固醇
									</view>
									<view class="num">
										{{dataListsNew.bloodLiquid.data_msg? (dataListsNew.bloodLiquid.data_msg.cholesterol / 100).toFixed(2) : '--'}}
										<text class="icon">毫摩尔/升</text>
									</view>
								</view>
								<view class="gap-item">
									<view class="title">
										甘油三脂
									</view>
									<view class="num">
										{{dataListsNew.bloodLiquid.data_msg? (dataListsNew.bloodLiquid.data_msg.triacylglycerol / 100).toFixed(2) : '--'}}
										<text class="icon">毫摩尔/升</text>
									</view>
								</view>
								<view class="gap-item">
									<view class="title">
										高密度脂蛋白
									</view>
									<view class="num">
										{{dataListsNew.bloodLiquid.data_msg? (dataListsNew.bloodLiquid.data_msg.highDensity / 100).toFixed(2) : '--'}}
										<text class="icon">毫摩尔/升</text>
									</view>
								</view>
								<view class="gap-item">
									<view class="title">
										低密度脂蛋白
									</view>
									<view class="num">
										{{dataListsNew.bloodLiquid.data_msg? (dataListsNew.bloodLiquid.data_msg.lowDensity / 100).toFixed(2) : '--'}}
										<text class="icon">毫摩尔/升</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import navtab from '../../components/navtab/navtab.vue' 
	import homeData from '../../components/home-data/home-data.vue'
	import { getArrMaxValue } from '@/utils/utils.js'
	import store from "@/store/index.js";
	import { mapGetters } from "vuex";
	export default {
		name:"home-data",
		props: {
			deviceList: {
				default: []
			},
			dataListsNew: {
				default: []
			}
		},
		data() {
			return {
				keyNameMap: {
				    bloodGlucose: "血糖",
				    sleep: "睡眠",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
				    bloodLiquid: "血脂",
					meiTuo: '梅脱',
					pulseReat: '心率',
					updataDate: '更新时间',
					bodyData: '身体成分',
					bodyTemperature: '体温',
					bloodLiquidAll: '血脂'
				},
				dataLists: {},
				
				name: '',
				name1: '',
				name2: '',
			}
		},
		mounted() {
			this.name2 = this.getActiceDevice.device_id
		},
		onLoad() {
			/*
			* 首页数据
			*/
			this.onRefresh();
			// #ifdef APP-PLUS
			setTimeout(() => {
				var avaudiosession = plus.ios.import("AVAudioSession");
				var avaudio = avaudiosession.sharedInstance();
				avaudio.requestRecordPermission(()=>{
					console.log('申请麦克风权限');  
				});
			}, 1000);
			// #endif
			
			this.urlLink = `/hybrid/html/ai.html`;
		},
		computed: {
			...mapGetters({
				getActiceDevice: "api/getActiceDevice"
			})
		},
		
		onReady() {
			// #ifdef APP-PLUS
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			let currentWebview = page.$getAppWebview();
			setTimeout(function() {
				const wv = currentWebview.children()[0]
				//setStyle设置webview的宽高的位置
				wv.setStyle({
					top: 0,
					right: 0,
					height: uni.getSystemInfoSync().windowHeight,
					width: uni.getSystemInfoSync().windowWidth - 660
				});
			}, 100);
			// #endif
		},
		
		methods: {
			getArrMaxValue,
			onRefresh(pageNo, pageSize) {
				this.$store.dispatch('api/getIndexData', { 
					device_id: this.getActiceDevice.device_id ,
					need_arr :[
						'pulseReat',
						'bloodOxygen',
						'bloodPressure',
						'bloodGlucose',
						'meiTuo',
						'bodyTemperature',
						'bloodLiquid',
						'stepIndex',
						'ECGData',
						'SleepDatas',
						'bodyData'
					],
					}).then(res => {
						for(let i = 0;i < res.length; i++){
							this.dataListsNew[res[i].type] = res[i]
							this.dataListsNew[res[i].name] = this.getNameByKey(res[i].type)
						}

						this.urlLink = `/hybrid/html/ai.html?data=${JSON.stringify(res)}`;
						this.$refs.paging.complete();
					}
				);
				
				this.$store.dispatch('api/getBindUserDeviceId').then(res => {
					this.$emit('deviceGet', res);
				});
			},
			mkHourMin(min){
				if(min < 60){
					return [0,min]
				}
				return [(Math.floor(min / 60)),(min % 60)]
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			getNameByKey(key) {
			    return this.keyNameMap[key] || "Key not found";
			},
			formatDateTime(dateTimeStr) {
				if (dateTimeStr) {
					return dateTimeStr.replace(/-/g, ' ').replace(' ', ' ', 2).replace(' ', ':');
				}
			},
			toPageCom(val) {
				this.$emit('pageDetail', val)
				this.$store.commit('api/setpageType', val)
			},
			// 退出登录
			outlogin() {
				this.$store.commit('api/setApiToken', '')
				this.$store.commit('api/setActiceDevice', '')
				this.$store.commit('api/setUserInfo', {})
				
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			// 选中的设备
			changeDev(item) {
				this.name2 = item.device_id;
				this.$store.commit('api/setActiceDevice', item);
				
				// 查询个人信息
				this.$store.dispatch('api/getUserInfo', { device_id: item.device_id }).then(res => {
					this.$store.commit('api/setUserInfo', res);
				});
				
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.flex_data{
		display: flex;
		.f_left{
			margin-right: 10rpx;
		}
		.f_right{
			padding-top: 16rpx;
		}
	}
	
	.content {
		padding: 20rpx 30rpx;
		margin-top:20rpx;
		display: flex;
		align-items: center;
		.left {
			width: 60%;
		}
		.right {
			position: fixed;
			right: 0rpx;
			height: 100vh;
			width: 40%;
			padding: 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 30rpx;
		}
		.content-header {
			margin-bottom: 30rpx;
			padding: 30rpx;
			height: 300rpx;
			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: 300rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				opacity: .4;
			}
			.text {
				width: 800rpx;
				// height: 300rpx;
				left: 0px;
				top: 0px;
				right:0px;
				bottom:0px;
				margin:auto;
				margin: 0 auto;
				z-index: 999;
				backdrop-filter: blur(6rpx);
				border-radius: 20rpx;
				padding:20rpx;
				margin-top: 60rpx;
			}
			.left {
				.title {
					font-size: 100rpx;
					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;
		}
		.list-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0rpx 40rpx;
		}
		.control {
			margin: 0rpx 40rpx;
			.btn {
				font-size: 36rpx;
				font-weight: 800;
				margin-bottom: 30rpx;
				padding: 30rpx 50rpx;
				border-radius: 20rpx ;
				-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
			}
		}
		.header-item {
			height: 280rpx !important;
			padding-top: 0rpx !important;
		}
		.content-item {
			width: 42%;
			height: auto;
			margin: 20rpx 10rpx;
			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;
			overflow: hidden;
			.title {
				font-size: 38rpx;
				font-weight: 800;
				margin-bottom: 14rpx;
			}
			.row-time {
				position: absolute;
				bottom: 30rpx;
				left: 60rpx;
				font-size: 28rpx;
				color: grey;
			}
			.bg {
				position: absolute;
				bottom: 0rpx;
				right: 20rpx;
				opacity: .6;
				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;
				text {
					opacity: .5;
					font-size: 24rpx;
					font-weight: 500;
					padding-left: 10rpx;
				}
			}
			
			.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;
					}
				}
			}
		}
	}
	
	
	// 播放器样式 ********************************

	.video {
		width: 80%;
		padding: 0rpx 20rpx;
	}

	/* 隐藏所有默认控件 */
	video::-webkit-media-controls {
	  display: none !important;
	}
	 
	video::-moz-media-controls {
	  display: none !important;
	}
	 
	video::-ms-media-controls {
	  display: none !important;
	}
	 
	/* 针对不同浏览器的隐藏控件的方式 */
	video::part(media-controls) {
	  display: none !important;
	}
	
	video {
		border-radius: 30rpx;
		overflow: hidden;
	}
	
	.video-wrap{
		display: flex;
		align-items: center;
		background-color: #06193a;
		margin: 0rpx 20rpx;
		justify-content: center;
	}
	
	
	
	.page-main {
	        padding: 20rpx;
	    }
	

	.btn-info {
		width: 600rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: solid #f0f0f0 1px;
		border-radius: 12rpx;
		padding: 0 30rpx;
	}

	.btn-info1 {
		border-radius: 12rpx;
	}
	.card {
		width: 800rpx !important;
	}
</style>
