<template>
	<view>
		<view class="content">
			<!-- 首页数据 -->
			<view class="content-wrap"  v-if="Sindex == 1">
				<homeData :dataListsNew="dataListsNew" :deviceList="deviceList" :Activedevice="Activedevice" @deviceGet="deviceGet" @pageDetail="pageDetail"></homeData>
			</view>
			
			<!-- 图表 -->
			<view class="content-wrap" v-if="Sindex == 2">
				<echartsData :pageData="pageData" @back="back" @allData="allData"></echartsData>
			</view>
			
			<!-- 日期筛选全部数据 -->
			<view class="content-wrap" v-if="Sindex == 3">
				<allData @back="back" :activeType="activeType"></allData>
			</view>
			
			<!-- 睡眠 -->
			<view class="content-wrap" v-if="Sindex == 4">
				<sleep-info ref="sleep" @back="back" @allData="allData"></sleep-info>
			</view>
			
			<!-- 数字人webview原生页面 -->
			<view class="right">
				<web-view :src="urlLink"></web-view>
			</view>
		</view>
	</view>
</template>

<script>
	import navtab from '../../components/navtab/navtab.vue' 
	
	import homeData from '../../components/home-data/home-data.vue'
	import echartsData from '../../components/echarts-data/echarts-data.vue'
	import allData from '../../components/all-data/all-data.vue'
	
	import { getArrMaxValue } from '@/utils/utils.js'
	import store from "@/store/index.js";
	import { mapGetters } from "vuex";
	
	export default {
		components: { homeData, echartsData, allData },
		data() {
			return {
				Sindex: 1,
				keyNameMap: {
				    bloodGlucose: "血糖",
				    sleep: "睡眠",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
				    bloodLiquid: "血脂",
					meiTuo: '梅脱',
					pulseReat: '心率',
					updataDate: '更新时间',
					bodyTemperature: '体温'
				},
				dataLists: {},
				dataListsNew:{
					stepIndex:{},
					pulseReat:{},
					bloodOxygen:{},
					bloodPressure:{},
					bloodGlucose:{},
					meiTuo:{},
					bodyTemperature:{},
					bloodLiquid:{},
					ECGData:{},
					bodyData:{},
					SleepDatas:{}
				},
				
				name: '',
				name1: '',
				name2: '',
				deviceList: [],
				Activedevice: '',
				
				urlLink: '',
				activeType: '',  // 选中的类型
				
				pageData: {
					type: ''
				},
				
				customConfigs: {
					padding: '30rpx',		   				  //内边距
					gridRows: 2, 			 	   			  //行数
					gridColumns: 1,	  		  	   			  //列数
					headShow: true,		 	   				  //head是否展示
					headWidth: '100%',	  	   				  //head宽度，支持百分比
					headHeight: '100vh',	   				  //head高度
					headBorderRadius: '12rpx', 				  //head圆角，支持百分比
				}
			}
		},
		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",
				getUserInfo: "api/getUserInfo",
			})
		},
		
		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
		},
		
		onPageScroll(e) {
		    this.$refs.xtotop_ref.scroll(e);
		},
		
		methods: {
			getArrMaxValue,
			onRefresh(pageNo, pageSize) {
				// 所有设备
				this.$store.dispatch('api/getBindUserDeviceId').then(res => {
					this.deviceList = res;
					
					// 默认选中设备
					if (!this.getActiceDevice.device_id) {
						if (this.deviceList.length) {
							this.name2 = this.deviceList[0].device_id;
							this.$store.commit('api/setActiceDevice', this.deviceList[0]);
							
							// 查询个人信息
							this.$store.dispatch('api/getUserInfo', { device_id: this.deviceList[0].device_id }).then(res => {
								this.$store.commit('api/setUserInfo', res);
								this.Activedevice = this.deviceList[0].device_id;
								this.IndexData(this.deviceList[0].device_id);
							});
						};
					} else  {
						this.IndexData(this.getActiceDevice.device_id);
						this.Activedevice = this.getActiceDevice.device_id;
					};
				});
			},
			
			// 首页数据
			IndexData(device_id) {
				this.$store.dispatch('api/getIndexData', { 
					device_id: 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)
						}
						
						if (this.dataListsNew.ECGData.data_msg) {
							// 删除心电图点位
							delete this.dataListsNew.ECGData.data_msg.wavefrom;
							delete this.dataListsNew.ECGData.data_msg.list;
						}
						
						this.urlLink = `/hybrid/html/ai.html?data=${JSON.stringify(this.dataListsNew)}&user=${JSON.stringify(this.getUserInfo)}&token=${store.getters['api/getApiToken']}&deviceId=${this.getActiceDevice.device_id}`;
					}
				);
			},
			
			mkHourMin(min){
				if(min < 60){
					return [0,min]
				}
				return [(Math.floor(min / 60)),(min % 60)]
			},
			
			// 触发组件
			pageDetail(str) {
				if (str == 'ECGData' || str == 'bodyData') {
					this.Sindex = 3;
					this.activeType = str;
					return
				} else if (str == 'SleepDatas') {
					this.Sindex = 4;
					this.activeType = str;
				} else {
					this.Sindex = 2;
					this.activeType = str;
					
					if (str == 'bloodLiquidAll') {
						this.pageData = this.dataListsNew['bloodLiquid'];
						this.pageData.type = 'bloodLiquidAll';
						return
					} else if (str == 'bloodLiquid') {
						this.pageData = this.dataListsNew['bloodLiquid'];
						this.pageData.type = 'bloodLiquid';
						return
					} else {
						for (let val in this.dataListsNew) {
							if (str == val) {
								this.pageData  = this.dataListsNew[val]
							}
						}
					}
				}
			},
			
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			
			formatDateTime(dateTimeStr) {
				if (dateTimeStr) {
					return dateTimeStr.replace(/-/g, ' ').replace(' ', ' ', 2).replace(' ', ':');
				}
			},
			
			// 退出登录
			outlogin() {
				this.$store.commit('api/setApiToken', '')
				this.$store.commit('api/setActiceDevice', '')
				this.$store.commit('api/setUserInfo', '')
				
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			
			getNameByKey(key) {
			    return this.keyNameMap[key] || "Key not found";
			},
			
			deviceGet(val) {
				this.deviceList = val;
			},
			
			allData(index) {
				console.log(index)
				this.Sindex = index;
			},
			
			back(index) {
				this.Sindex = index;
				this.pageData.type = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skeleton {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
		z-index: 9999;
	}
	.flex_data{
		display: flex;
		.f_left{
			margin-right: 10rpx;
		}
		.f_right{
			padding-top: 16rpx;
		}
	}
	
	.content {
		display: flex;
		align-items: center;
		.content-wrap {
			width: 60%;
			height: 100vh;
			overflow: scroll;
		}
		.left {
			width: 60%;
		}
		.right {
			position: fixed;
			top: 0rpx;
			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: 400rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0rpx 0rpx 30rpx 0rpx;
			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: 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) ;
			}
		}
		.content-item {
			width: 42%;
			margin: 20rpx 10rpx;
			padding: 20rpx;
			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: 10rpx;
				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;
				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;
	    }
	
	.title {
		margin: 32rpx;
	}

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

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