<template>
	<view class="">
		
	
		<tm-nav-bar left-icon="arrow-left" :title="desc? getNameByKey(desc) : getNameByKey(type)" @clickLeft="back" />
		<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="type == 'bloodLiquid' && desc == ''"  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(type) || desc != ''" class="row" >
					<view class="data">
						<image 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="type == 'step'">
							步数：{{item.data_msg.stepCount}}
						</view>
						<view v-if="type == 'bloodPressure'">
							{{item.data_msg.bloodPressureHigh}}/{{item.data_msg.bloodPressureLow}} mmHg
						</view>
						<view v-if="type == '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="type == 'bloodGlucose'">
							{{item.data_msg}}毫摩尔/升
						</view>
						<view v-if="type == 'bodyTemperature'">
							{{item.data_msg}} ℃
						</view>
						<view v-if="type == '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="type == 'bloodLiquid' && desc == 'uricAcidVal'">
							{{item.data_msg.uricAcidVal / 10}} 微摩尔/升
						</view>
						<view v-if="type == 'meiTuo'">
							{{item.data_msg[0] / 10}} MET
						</view>
						<view v-if="type == 'bloodLiquid' && desc !== 'uricAcidVal'" style="font-size: 24rpx;" >
							<!-- <view>总胆固醇：{{item.data_msg.cholesterol/100}} 甘油三脂：{{item.data_msg.triacylglycerol/100}}</view>
							<view>密度脂蛋白:高-{{item.data_msg.highDensity/100}} 低-{{item.data_msg.lowDensity/100}}</view> -->
							<view>总胆固醇：{{item.data_msg.cholesterol/100}} </view>
							<view>甘油三脂：{{item.data_msg.triacylglycerol/100}} </view>
							<view>高密度脂蛋白:{{item.data_msg.highDensity/100}}</view>
							<view>低胆固醇：{{item.data_msg.lowDensity/100}} </view>
						</view>
						<view v-if="type == 'ECGData'" style="font-size: 24rpx;">
							<view>心率:{{item.data_msg.meanHeartRate}} 次/分</view>
							<view>HRV：{{item.data_msg.averageHRV}} 毫秒</view>
							<view>QTc：{{item.data_msg.averageTimeInterval}} 毫秒</view>
						</view>
						<view v-if="type == '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 v-if="Array.isArray(type)">
							{{item.data_msg[0]}}
						</view> -->
					</view>
					<view class="time">
						{{item.date_str}} {{item.hour_minute}} 
					</view>
				</view>
				<view class="" v-else>
					<detail_components :key_name="type" :item="item"></detail_components>
				</view>
			</view>
			<view class="" style="height: 30rpx;">
				
			</view>
		</view>
	</view>
</template>

<script>
	import { getArrMaxValue } from '@/utils/utils.js'
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				customType:[
					'bodyData',
					'bloodLiquid',
					'ECGData'
				],
				blData:[
					{
						name:'总胆固醇',
						color:'#46b4ff',
					},
					{
						name:'甘油三酯',
						color:'#29cf6c',
					},
					{
						name:'高密度脂蛋白',
						color:'#fcc05d',
					},
					{
						name:'低密度脂蛋白',
						color:'#fa4e33',
					}
				],
				type: '',
				desc: '',
				dataList: [],
				keyNameMap: {
				    bloodGlucose: "血糖",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
					pulseReat: '心率',
				    
				    bloodLiquid: "血脂",
					uricAcidVal: '尿酸',
					meiTuo: '梅脱',
					// pulseReat: '脉率',
					updataDate: '更新时间',
					bodyTemperature: '体温',
					ECGData: '心电图',
					step: '步数',
					bodyData:'身体成分'
				},
				time: new Date().toISOString().substring(0, 10),
				flag: true,
				successList: ['1676995200000'],
				errorList: ['1676908800000'],
			}
		},
		
		mounted() {
			// 初始化
			this.$refs.calendar.initCalendar()

			// 模拟异步赋值
			let timer = setTimeout(()=>{
				this.addTimer()
			},2000)
		},
		
		// onLoad() {
		// 	// 初始化
		// 	this.$refs.calendar.initCalendar()

		// 	// 模拟异步赋值
		// 	let timer = setTimeout(()=>{
		// 		this.addTimer()
		// 	},2000)
		// },
		onLoad(e) {
			this.type = e.type;
			this.desc = e.desc||'';
			this.queryList()
			console.log(this.customType.includes(this.type))
		},
		
		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.type == 'ECGData'){
					uni.showLoading({
						
					})
					uni.setStorageSync('infoData', JSON.stringify(this.dataList[idx]));
					uni.navigateTo({
						url:'/pages/index/detail_info?index='+idx,
						fail(e) {
							console.log(e)
						},
						complete() {
							uni.hideLoading({
								
							})
						}
					})
				}
				if(this.type == 'bodyData'){
					uni.showLoading({
						
					})
					uni.setStorageSync('bodyData', JSON.stringify(this.dataList[idx]));
					uni.navigateTo({
						url:'/pages/index/body_info?index='+idx,
						fail(e) {
							console.log(e)
						},
						complete() {
							uni.hideLoading({
								
							})
						}
					})
				}
				
			},
			getArrMaxValue,
			queryList() {
				this.$store.dispatch('api/getDeviceListDays', { 
					type: (this.type == 'step'?'step_split':this.type),
					// type: (this.type),
					device_real_time: this.time,
					device_id:this.getActiceDevice.device_id
				}).then(res => {
					// let arrData = res.data.filter((v) => {
					// 	return v.data_msg.stepCount > 0
					// })
					// let arrData = []
					
					// res.data.map((v,i) => {
					// 	if(this.type == 'step'){
					// 		if(v.data_msg.stepCount > 0){
								
					// 			arrData = [...arrData,v]
					// 			console.log(arrData)
					// 		}
					// 	}else{
					// 		arrData.push(v)
					// 	}
						
					// })
					// console.log(arrData,'end')
					// this.$refs.paging.completeByTotal(res.data,res.last_page);
					this.dataList = res.data
				});
			},
			
			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()
				// this.$refs.paging.reload();
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bloodl_box{
		margin-top: 30rpx;
		padding: 0 40rpx;
		.name{
			font-size: 24rpx;
			color: #999;
		}
		.yuan{
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.content {
		.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 {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.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;
				image {
					width: 50rpx;
				}
			}
			.time {
				font-weight: 300;
				font-size: 24rpx;
			}
		}
	}
	
</style>