<!-- 全部数据 -->

<template>
	<view class="">
		<tm-nav-bar left-icon="arrow-left" :title="desc? getNameByKey(desc) : getNameByKey(activeType)" @clickLeft="back" :rbgs="false"/>
		<view class="content">
			<view class="over" style="margin-top: 30rpx" @click="flag = !flag">
				<text>日期筛选</text>
				<uni-icons type="down" size="24"></uni-icons>
			</view>
			<view class="time" v-show="flag">
				<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
			</view>
			<view class="flx flx_sb bloodl_box" v-if="activeType == 'bloodLiquidAll'" style="flex-wrap: wrap;">
				<view class="flx flx_ac" v-for="(v,i) in blData" :key="i" style="flex: 0 0 calc((100% - 0rpx) / 2);height: 50rpx;">
					<view class="yuan" :style="{backgroundColor:v.color}"></view>
					<view class="name">
						{{ v.name }}
					</view>
				</view>
			</view>
			<view :class="'list'" v-for="(item, index) in dataList" :key="index" @click="goInfo(index)">
				<view v-if="!customType.includes(activeType)" class="row" >
					<view class="data">
						<image class="data-icon" src="https://img.agrimedia.cn/apptest/%E6%89%8B%E8%A1%A8-%E7%BA%BF%E6%80%A73-0.png" mode="widthFix"></image>		
						<view v-if="activeType == 'SleepDatas'">
							<view>睡眠时长: 
								{{getHours(item.data_msg[0].sleepTotalTime, 0)}}
								<text class="unit">时</text>
								{{getHours(item.data_msg[0].sleepTotalTime, 1)}}
								<text class="unit">分</text>
							</view>
							<view>深度睡眠: {{item.data_msg[0].deepSleepTime}}
								<text class="unit">分钟</text>
							</view>
						</view>
						<view v-if="activeType == 'stepIndex'">
							步数：{{item.data_msg.stepCount}}
						</view>
						<view v-if="activeType == 'bloodPressure'">
							{{item.data_msg.bloodPressureHigh}}/{{item.data_msg.bloodPressureLow}} mmHg
						</view>
						<view v-if="activeType == 'bloodOxygen'">
							{{ item.data_msg[0] ? item.data_msg[0] + (item.data_msg[1]?' | ':'') : ''}}
							{{ item.data_msg[1] ? item.data_msg[1] + (item.data_msg[2]?' | ':'') : ''}}
							{{ item.data_msg[2] ? item.data_msg[2] + (item.data_msg[3]?' | ':'') : ''}}
							{{ item.data_msg[3] ? item.data_msg[3] + (item.data_msg[4]?' | ':'') : ''}}
							{{ item.data_msg[4] ? item.data_msg[4] : ''}}
						</view>
						<view v-if="activeType == 'bloodGlucose'">
							{{item.data_msg}}毫摩尔/升
						</view>
						<view v-if="activeType == 'bodyTemperature'">
							{{item.data_msg}} ℃
						</view>
						<view v-if="activeType == 'pulseReat'">
							{{ item.data_msg[0] ? item.data_msg[0] + (item.data_msg[1]?' | ':'') : ''}}
							{{ item.data_msg[1] ? item.data_msg[1] + (item.data_msg[2]?' | ':'') : ''}}
							{{ item.data_msg[2] ? item.data_msg[2] + (item.data_msg[3]?' | ':'') : ''}}
							{{ item.data_msg[3] ? item.data_msg[3] + (item.data_msg[4]?' | ':'') : ''}}
							{{ item.data_msg[4] ? item.data_msg[4] : ''}}
						</view>
						<view v-if="activeType == 'bloodLiquid'">
							{{(item.data_msg.uricAcidVal /10).toFixed(2)}} 微摩尔/升
						</view>
						<view v-if="activeType == 'bloodLiquidAll'" style="font-size: 24rpx;" >
							<view>总胆固醇：{{(item.data_msg.cholesterol/100).toFixed(2)}} </view>
							<view>甘油三脂：{{(item.data_msg.triacylglycerol/100).toFixed(2)}} </view>
							<view>高密度脂蛋白:{{(item.data_msg.highDensity/100).toFixed(2)}}</view>
							<view>低密度脂蛋白：{{(item.data_msg.lowDensity/100).toFixed(2)}} </view>
						</view>
						<view v-if="activeType == 'ECGData'" style="font-size: 24rpx;">
							<view>心率:{{item.data_msg.meanHeartRate || item.data_msg.heartRate}} 次/分</view>
							<view>HRV：{{item.data_msg.averageHRV || item.data_msg.hrv}} 毫秒</view>
							<view>QTc：{{item.data_msg.averageTimeInterval || item.data_msg.QTC}} 毫秒</view>
						</view>
						<view v-if="activeType == 'bodyData'" style="font-size: 24rpx;">
							<view>BMI:{{item.data_msg.BMI}}</view>
							<view>体脂率：{{item.data_msg.bodyFatPercentage}}</view>
							<view>肌肉率：{{item.data_msg.muscleRate}}</view>
						</view>
					</view>
					<view class="time">
						{{item.date_str}} {{item.hour_minute}}
					</view>
				</view>
				<view class="" v-else>
					<detail_components :key_name="activeType" :item="item"></detail_components>
				</view>
			</view>
			<view class="end">到底了~</view>
		</view>
		
		<ecg-info ref="popShow" :ecgData="ecgData"></ecg-info>
	</view>
</template>

<script>
	import { getArrMaxValue } from '@/utils/utils.js'
	import { mapGetters } from "vuex";
	export default {
		props: {
			activeType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				customType:[
					// 'bodyData',
					// 'bloodLiquid',
					// 'bloodLiquidAll',
					// 'ECGData'
				],
				blData:[
					{
						name:'总胆固醇',
						color:'#46b4ff',
					},
					{
						name:'甘油三酯',
						color:'#29cf6c',
					},
					{
						name:'高密度脂蛋白',
						color:'#fcc05d',
					},
					{
						name:'低密度脂蛋白',
						color:'#fa4e33',
					}
				],
				desc: '',
				dataList: [],
				keyNameMap: {
				    bloodGlucose: "血糖",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
					pulseReat: '心率',
				    bloodLiquid: "尿酸",
					meiTuo: '梅脱',
					updataDate: '更新时间',
					bodyTemperature: '体温',
					ECGData: '心电图',
					stepIndex: '步数',
					bodyData:'身体成分',
					bloodLiquidAll: '血脂',
					SleepDatas: '睡眠'
				},
				time: new Date().toISOString().substring(0, 10),
				flag: true,
				successList: ['1676995200000'],
				errorList: ['1676908800000'],
				
				showPopup: false,
				ecgData: [],
				bodyData: []
			}
		},
		
		mounted() {
			// 初始化
			this.$refs.calendar.initCalendar()
			this.queryList()
			// 模拟异步赋值
			let timer = setTimeout(()=>{
				this.addTimer()
			},2000)
		},
		
		// onShow(e) {
		// 	let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		// 	let curRoute = routes[routes.length - 1].route //获取当前页面路由
		// 	let curParam = routes[routes.length - 1].options; //获取路由参数
		// 	// 拼接参数
		// 	let param = ''
		// 	for (let key in curParam) {
		// 	    param += '&' + key + '=' + curParam[key]
		// 	}

		computed: {
			...mapGetters({
				getActiceDevice: "api/getActiceDevice"
			})
		},
		
		methods: {
			goInfo(idx){
				if(this.activeType == 'ECGData'){
					uni.setStorageSync('infoData', JSON.stringify(this.dataList[idx]));
					this.$refs.popShow.open(1)
				}
				if(this.activeType == 'bodyData'){
					uni.setStorageSync('bodyData', JSON.stringify(this.dataList[idx]));
					this.$refs.popShow.open(2)
				}
			},
			getArrMaxValue,
			queryList() {
				let type = '';
				if (this.activeType == 'stepIndex') {
					type = 'step_split'
				} else if (this.activeType == 'bloodLiquidAll') {
					type = 'bloodLiquid'
				} else if (this.activeType == 'SleepDatas') {
					type = 'SleepDatas'
				} else {
					type = this.activeType
				};
				
				this.$store.dispatch('api/getDeviceListDays', { 
					type: type,
					device_real_time: this.time,
					device_id:this.getActiceDevice.device_id
				}).then(res => {
					this.dataList = res.data
					
					console.log(this.dataList)
				});
			},
			
			getNameByKey(key) {
			    return this.keyNameMap[key] || "Key not found";
			},
			
			addTimer() {
				this.successList = [...this.successList, '1681920000000']
			},

			// 点击某一天
			chooseDay(val) {
				this.time = val.year + '-' + val.month + '-' + val.day;
				this.queryList()
			},
			
			back() {
				if (this.activeType == 'ECGData' || this.activeType == 'bodyData' || this.activeType == 'SleepDatas') {
					this.$emit('back', 1)
				} else {
					this.$emit('back', 2)
				}
			},
			
			getHours(minutes, type) {
			    if (type == 0) {
			      return Math.floor((minutes / 60).toFixed(2));
			    }
			
			    if (type == 1) {
			      var minutes = minutes % 60;  
			      
			      if (minutes < 10) {  
			        minutes = '0' + minutes;  
			      }
			      return minutes;
			    }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bloodl_box{
		margin-top: 50rpx;
		padding: 0 40rpx;
		.name{
			font-size: 24rpx;
			color: #999;
		}
		.yuan{
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.content {
		margin: 0rpx 100rpx;
		.over {
			margin: 0rpx 30rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
		}
		.time {
			width: 100%;
		}
		.list {
			background-color: #fff;
			overflow: hidden;
			padding: 30rpx;
			margin: 30rpx 30rpx;
			border-radius: 30rpx;
			.row {
				// height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.data {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 36rpx;
				width: 900rpx;
				image {
					width: 50rpx;
				}
			}
			.data-icon {
				margin-right: 20rpx;
			}
			.time {
				font-weight: 300;
				font-size: 24rpx;
			}
		}
	}
	
</style>