<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<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="list" v-if="dataList.length">
				<view class="row" v-for="(item, index) in dataList" :key="index">
					<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.wear}}
							运动量：{{item.data_msg.amountOfExercise}}
						</view>
						<view v-if="type == 'bloodPressure'">
							{{item.data_msg.bloodPressureHigh}}/{{item.data_msg.bloodPressureLow}}
						</view>
						<view v-if="type == 'bloodGlucose'">
							{{item.data_msg}}
						</view>
						<view v-if="type == 'bloodLiquid' && desc == 'uricAcidVal'">
							{{item.data_msg.uricAcidVal}}
						</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}}</view>
						</view>
						<view v-else>
							{{getArrMaxValue(item.data_msg)}}
						</view>
					</view>
					<view class="time">
						{{item.date_str}} {{item.hour_minute}} 
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { getArrMaxValue } from '@/utils/utils.js'
	export default {
		data() {
			return {
				type: '',
				desc: '',
				dataList: [],
				keyNameMap: {
				    bloodGlucose: "血糖",
					bloodOxygen: "血氧",
					bloodPressure: '血压',
					heartReat: '心率',
				    bloodLiquid: "血液",
					uricAcidVal: '尿酸',
					meiTuo: '梅拖',
					pulseReat: '脉率',
					updataDate: '更新时间',
					step: '步数'
				},
				time: '',
				flag: false,
				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)
		// },
		
		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]
			}
			this.type = curParam.type;
			this.desc = curParam.desc;
		},
		
		
		methods: {
			getArrMaxValue,
			queryList(pageNo, pageSize) {
				this.$store.dispatch('api/getDeviceListDays', { 
					type: this.type,
					device_real_time: this.time
				}).then(res => {
					this.$refs.paging.completeByTotal(res.data, res.total);
				});
			},
			
			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.$refs.paging.reload();
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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>