<template>
	<view class="body-style">
		<tm-nav-bar left-icon="arrow-left" :title="dataConfig[type].name" @clickLeft="back" />
		<view class="flx jcsb ac" style="height: 40rpx;background-color: #fff;padding: 20rpx;">
			<view class="" style="font-size: 40rpx;font-weight: bold;">
				
			</view>
			<view class="" style="color: #b8b8b8;font-size: 24rpx;">
				{{time}}
			</view>
		</view>
		<view style="height: 40rpx;background-color: #fff;">
			
		</view>
		
		<view style=" height:600rpx;background-color: #fff;"><l-echart ref="chartRef" @finished="init"></l-echart></view>
		<view class="flx flx_sb total_box" v-if="type == 'step'">
			<view class="distance b1">
				<view class="flx">
					<view class="" style="font-size: 36rpx;font-weight: 600;">
						{{ distance }}
					</view>
					<view class="" style="font-size: 24rpx;margin-top: 10rpx;margin-left: 4rpx;font-weight: 300;">
						公里
					</view>
				</view>
				<view class="" style="font-size: 24rpx;color: #999;">
					距离
				</view>
				<view class="flx" style="justify-content: end;">
					<image src="../../static/image/juli.jpg" style="width: 200rpx;" mode="widthFix"></image>
				</view>
			</view>
			<view class="calorie b1">
				<view class="flx">
					<view class="" style="font-size: 36rpx;font-weight: 600;">
						{{ calorie / 10 }}
					</view>
					<view class="" style="font-size: 24rpx;margin-top: 10rpx;margin-left: 4rpx;font-weight: 300;">
						千卡
					</view>
				</view>
				<view class="" style="font-size: 24rpx;color: #999;">
					卡路里
				</view>
				<view class="flx" style="justify-content: end;">
					<image src="../../static/image/kalvli.jpg" style="width: 200rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<overview v-if="dataConfig[type].overviewData" :overviewData="dataConfig[type].overviewData"></overview>
		<cankao v-if="dataConfig[type].cankaoData" :cankaoData="dataConfig[type].cankaoData" ></cankao>
		<view class="box-rds " @click="goPath">
			<view class="flx jcsb ac">
				<view class="" style="font-size: 26rpx;">
					全部数据
				</view>
				<view style="color: #b8b8b8;">></view>
			</view>
		</view>
		<view class="" style="height: 20rpx;">
			
		</view>
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				stepCount:0,
				calorie:0,
				distance:0,
				time: new Date().toISOString().substring(0, 10),
				type:'',
				desc:'',
				dataConfig:{
					bloodGlucose:{
						title:'123123',
						name:'血糖',
						color:"#fb8544",
						unit:'毫摩尔/升',
						cankaoData:[
							{
								name:'空腹/餐前',
								data:[
									0,3.9,6.1,15
								],
								adjustment:[
									0.05,
									0.00,
									-0.05
								],
								max:15
							},
							{
								name:'餐后1小时',
								data:[
									0,6.7,9.4,15
								],
								adjustment:[
									0.04,
									0.00,
									-0.04
								],
								max:15
							},
							{
								name:'餐后2小时',
								data:[
									0,4.4,7.8,15
								],
								adjustment:[
									0.04,
									0.00,
									-0.04
								],
								max:15
							}
						]
					},
					step:{
						name:'每日活动',
						color:"#29cf6f",
						unit:'毫摩尔/升',
					},
					bloodOxygen:{
						title:'123123',
						name:'血氧',
						color:"#bf32fc",
						unit:'%',
						cankaoData:false,
						
					},
					bodyTemperature:{
						title:'bodyTemperature',
						name:'体温',
						color:"#2ec8d8",
						unit:'℃',
						cankaoData:false,
					},
					bloodPressure:{
						title:'bloodPressure',
						name:'血压',
						color:"#fb8544",
						color1:"#00c3da",
						unit:'℃',
						cankaoData:false,
					},
					pulseReat:{
						title:'123123',
						name:'心率',
						color:"#fd5656",
						unit:'次/分',
						cankaoData:false,
						
					},
					bloodLiquid:{
						title:'123123',
						name:'尿酸',
						color:"#f00",
						unit:'微摩尔/升',
						cankaoData:[
							{
								name:'尿酸',
								data:[
									0,150,420,1000
								],
								adjustment:[
									0.06,
									0.00,
									-0.06
								],
								max:1000
							},
						],
					},
					bloodLiquidAll:{
						title:'123123',
						name:'血脂',
						
						unit:'微摩尔/升',
						overviewData:{
							name:'血脂概况',
							tb_head:[
								'',
								'范围',
								'平均值'
							],
							data:[
								{
									name:'总胆固醇',
									value:'0-0',
									average:0,
									color:'#46b4ff',
									bgColor:'#e1f3fd'
								},
								{
									name:'甘油三酯',
									value:'0-0',
									average:0,
									color:'#29cf6c',
									bgColor:'#e2fff3'
								},
								{
									name:'高密度脂蛋白',
									value:'0-0',
									average:0,
									color:'#fcc05d',
									bgColor:'#fef5e3'
								},
								{
									name:'低密度脂蛋白',
									value:'0-0',
									average:0,
									color:'#fa4e33',
									bgColor:'#fee5e1'
								}
							]
						},
						cankaoData:[
							{
								name:'总胆固醇',
								data:[
									0,2.8,5.17,20
								],
								adjustment:[
									0.05,
									0.02,
									-0.05
								],
								max:20
							},
							{
								name:'甘油三酯',
								data:[
									0,0.56,1.7,20
								],
								adjustment:[
									0.06,
									-0.02,
									-0.04
								],
								max:3
							},
							{
								name:'高密度脂蛋白',
								data:[
									0,0.96,1.15,20
								],
								adjustment:[
									0.04,
									0.00,
									-0.04
								],
								max:1.6
							},
							{
								name:'低密度脂蛋白',
								data:[
									0,3.1,20
								],
								adjustment:[
									0.04,
									0.00,
									-0.04
								],
								max:20
							}
						]
					}
				},
				option:{
					// tooltip: {
					// 	trigger: 'item',
					// 	formatter: function (params) {
					// 		// params 是数据的相关信息，可以根据需要进行处理
					// 		console.log(params)
					// 		if(params.componentType == 'series'){
					// 			return `<html><div style="width:10px">
					// 					<p>${params.seriesName}</p>
					// 					<p>${params.name}: ${params.value[1]}</p>
					// 				</div></html>`
					// 		}
					// 		return '';
					// 	},
					// 	// renderMode:'html'
					// 	// axisPointer: {
					// 	//   type: 'line',
					// 	//   label: {
					// 	// 	backgroundColor: '#6a7985'
					// 	//   }
					// 	// },
						
									
					//   },
				  xAxis: {
					splitLine:{
					  show:false
					},
					type:'value',
					max:4,
					min:0,
					axisLabel: {
						show: true,
						splitNumber:2,
						formatter: function(value, index) {
							let arr = ['12am', '6am', '12pm', '6pm', '12am']
							return arr[ Math.floor(index)];
						}
					}
				  },
				 
				  yAxis: {
					  splitLine:{
						show:true,
						lineStyle: {
							// 使用深浅的间隔色
							color: ["#ccc"],
							type:"dashed"
						}
					  },
					  axisTick: {
						  show: false
					  },
					  axisLine: {
						  show: false // 设置y轴线不显示
					  },
					  axisLabel: {},
					  position:"right",
					  splitNumber:3
					  
				  },
				  series: [
					{
					  symbolSize: 5,
					  data: 
					  [
					  ],
					  
					  markLine: {
					      data: [
					          {
								  show:false,
					              yAxis: 2.5, // 在 y 值为 100 的位置添加水平参考线
					          },
							  
					      ],
						  lineStyle:{
							  color:'#ccc',
							  cap:"butt"
						  },
						  label:{
							 color:'#ccc',
						  },
					  },
					  type: 'scatter',
					},
					
				  ],
				  
				},
				
			}
		},
		onLoad(e) {
			this.type = e.type
			this.desc = e.desc || ''
			this.calorie = e.calorie || 0
			this.stepCount = e.step || 0
			this.distance = e.distance || 0
			// this.getDataList()
		},
		computed: {
			...mapGetters({
				getActiceDevice: "api/getActiceDevice"
			})
		},
		methods: {
			async init() {
				this.chart = await this.$refs.chartRef.init(echarts);
				let option = await this.getDataList();
				this.chart.setOption(option)
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			goPath(){
				let type = this.type
				if(this.type == 'bloodLiquid'){
					type = 'bloodLiquid&desc=uricAcidVal'
				}
				if(this.type == 'bloodLiquidAll'){
					type = 'bloodLiquid'
				}
				uni.navigateTo({
					url:'./detail?type='+type
				})
			},
			makeHour(hours){
				return  Math.floor(hours/6); // 使用%运算符取余，确保结果是0-4的范围
			},
			makeMinute(minute){
				return minute/60;
			},
			makeFloatHoursMinutes(hours, minutes) {
				
			    let total = hours * 3600 + minutes * 60;
				let floatData =  total / 86400 * 4
				return floatData.toFixed(2);
			},
			async getDataList(){
				let type = this.type
				if(this.type == 'step'){
					type = 'step_split'
				}
				if(this.type == 'bloodLiquidAll'){
					type = 'bloodLiquid'
				}
				let res = await this.$store.dispatch('api/getDeviceListDays', {
					type: type,
					// type: (this.type),
					device_real_time: this.time,
					device_id:this.getActiceDevice.device_id
				})
				
				return this.makeOptionConfig(res.data);
			},
			getAverage(arr) {
			    if (arr.length === 0) return 0; // 如果数组为空，则返回0
			    const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
			    return sum / arr.length; // 计算平均值
			},
			subtractMinutes(timeStr, minutes) {
			  const parts = timeStr.split(':');
			  const hours = parseInt(parts[0], 10);
			  const minutesLeft = parseInt(parts[1], 10);
			 
			  const date = new Date();
			  date.setHours(hours, minutesLeft, 0, 0); // 设置时、分、秒、毫秒
			  date.setMinutes(date.getMinutes() - minutes); // 减去指定的分钟数
			 
			  // 格式化为HH:MM
			  const newHours = date.getHours().toString().padStart(2, '0');
			  const newMinutes = date.getMinutes().toString().padStart(2, '0');
			  return newHours + ':' + newMinutes;
			},
			/// git dev test
			makeOptionConfig(data){
				let echartsData = [];
				let sum = 0;
				let max = 0;
				let min = 0;
				let avg = 0;
				let len = 0;
				let arr = [];
				let dataArr = {};
				this.option.series[0].markLine.symbol = 'none'
				this.option.series[0].markLine.label.position ='insideEndTop'
				switch(this.type){
					case 'step':
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							let key = '';
							if(timeArr[1] < 30){
								key = timeArr[0]+':'+'00'
								
							}else{
								key = timeArr[0]+':'+'30'
								
							}
							if(dataArr[key] == undefined){
								dataArr[key] = {
									val:v.data_msg.stepCount,
									from:1
								}
							}else{
								// console.log(dataArr[key].val)
								dataArr[key].val += v.data_msg.stepCount;
							}
							
						})
						for (let key in dataArr) {
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								echartsData.push({value:[floatData,(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
								// console.log(key , dataArr[key]);
							}
						}
						console.log(echartsData)
						this.option.series[0].data = echartsData
						this.option.series[0].markLine = []
						this.option.series[0].type = 'bar'
						this.option.series[0].barMaxWidth = '10'
						this.option.title = {
							text :this.stepCount + '步',
							// subtext: '毫摩尔/升',
							left: 'center'
						};
						break;
					case 'bodyTemperature':
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							let key = timeArr[0]+':'+'00'
							if(dataArr[key] == undefined){
								dataArr[key] = {
									val:[parseFloat(v.data_msg)],
									from:0
								}
							}else{
								dataArr[key].val = [...dataArr[key].val,parseFloat(v.data_msg)];
							}
							let dataMsg = parseFloat(v.data_msg);
							// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
							// echartsData.push({value:[floatData,dataMsg],itemStyle: {color: this.dataConfig[this.type].color}})
							sum += dataMsg
							if(max == 0 || max < dataMsg){
								max = dataMsg
							}
							if(min == 0 || min > dataMsg){
								min = dataMsg
							}
						})
						avg = sum / data.length
						avg = parseFloat(avg.toFixed(2))
						// console.log(dataArr)
						for (let key in dataArr) {
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
							}
						}
						this.option.series[0].data = echartsData
						this.option.series[0].type = 'line'
						this.option.series[0].lineStyle = {}
						this.option.series[0].lineStyle.color = '#ccc'
						this.option.series[0].markLine.data[0].yAxis = avg
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.yAxis.min = parseInt(min)-1;
						this.option.yAxis.max = parseInt(max) + 1;
						this.option.yAxis.splitNumber = 1;
						this.option.title = {
							text :min + '-' + max,
							subtext: '℃',
							left: 'center'
						};
						this.dataConfig.bodyTemperature.title = min + '-' + max
						break;
					case 'bloodOxygen':
							data.map((v,i) => {
								let timeArr = v.hour_minute.split(':');
								let dataMsg = v.data_msg.filter(item => item > 0);
								if(timeArr[1] % 10 == 0){
									let key = v.hour_minute
									if(dataArr[key] == undefined){
										dataArr[key] = {
											val:dataMsg,
											from:0
										}
									}else{
										dataArr[key].val = [...dataArr[key].val,...dataMsg];
									}
								}else{
									
									let key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
									if(dataArr[key] == undefined){
										dataArr[key] = {
											val:dataMsg,
											from:1
										}
									}else{
										dataArr[key].val = [...dataArr[key].val,...dataMsg];
									}
									
								}
								
								
								
								dataMsg.map((v2,i2) => {
									if(v2 > 0){
										arr.push(v2)
									}
									
								})
								
							})
							for (let key in dataArr) {
								if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
									let timeArr2 = key.split(':');
									let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
									echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
									// console.log(key , dataArr[key]);
								}
							}
							if(arr.length > 0){
								min = Math.min(...arr)
								max = Math.max(...arr)
							}
							
							
							this.option.series[0].data = echartsData
							this.option.yAxis.axisLabel.formatter = '{value}%';
							this.option.series[0].markLine.data[0].yAxis = this.getAverage(arr)
							this.option.series[0].markLine.data[0].value = this.getAverage(arr)
							this.option.series[0].markLine.symbol = 'none'
							
							this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
							this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
							this.option.series[0].markLine.label.position ='insideEndTop'
							this.option.series[0].markLine.label.formatter = function(data){
								return data.value + '%'
								// console.log(data,123)
							};
							// this.option.series[0].markLine.label.distance =[10,5]
							this.option.title = {
								text :min + '-' + max,
								subtext: '%',
								left: 'center'
							};
							this.option.yAxis.splitNumber = 2;
							this.dataConfig.bodyTemperature.title = min + '-' + max
							this.option.yAxis.min = min;
							this.option.yAxis.max = 100;
							break;
					case 'bloodGlucose':
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							if(timeArr[1] < 30){
								let key = timeArr[0]+':'+'00'
								if(dataArr[key] == undefined){
									dataArr[key] = {
										val:[v.data_msg],
										from:0
									}
								}else{
									dataArr[key].val = [...dataArr[key].val,v.data_msg];
								}
							}else{
								let key = timeArr[0]+':'+'30'
								if(dataArr[key] == undefined){
									dataArr[key] = {
										val:[v.data_msg],
										from:1
									}
								}else{
									// console.log(dataArr[key].val)
									dataArr[key].val = [...dataArr[key].val,v.data_msg];
								}
							}
							// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
							// echartsData.push({value:[floatData,v.data_msg],itemStyle: {color: this.dataConfig[this.type].color}})
							sum += v.data_msg
							
							if(max == 0 || max < v.data_msg){
								max = v.data_msg
							}
							if(min == 0 || min > v.data_msg){
								min = v.data_msg
							}
						})
						
						avg = sum / data.length
						avg = parseFloat(avg.toFixed(2))
						for (let key in dataArr) {
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
								// console.log(key , dataArr[key]);
							}
						}
						this.option.series[0].data = echartsData
						this.option.series[0].markLine.data[0].yAxis = avg
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.title = {
							text :min + '-' + max,
							subtext: '毫摩尔/升',
							left: 'center'
						};
						this.dataConfig.bloodGlucose.title = min + '-' + max
						break;
					
						data.map((v,i) => {
							
							let dataMsg = v.data_msg;
							let timeArr = v.hour_minute.split(':');
							for(let i = 0;i<5;i++){
								let real_data = dataMsg[i]
								if(real_data <= 0){
									break;
								}
								len += 1;
								// let floatData = this.makeFloatHoursMinutes(timeArr[0],parseInt( timeArr[1]) + i)
								// echartsData.push({value:[floatData,real_data],itemStyle: {color: this.dataConfig[this.type].color}})
								sum += real_data
								if(max == 0 || max < real_data){
									max = real_data
								}
								if(min == 0 || min > real_data){
									min = real_data
								}
							}
							
						})
						avg = sum / len
						avg = parseFloat(avg.toFixed(2))
						this.option.series[0].data = echartsData
						this.option.series[0].markLine.data[0].yAxis = avg
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.title = {
							text :min + '-' + max,
							subtext: '%',
							left: 'center'
						};
						this.dataConfig.bloodGlucose.title = min + '-' + max
						this.option.yAxis.axisLabel.formatter = '{value}%';
						this.option.yAxis.splitNumber = 3;
						this.option.yAxis.min = 95;
						this.option.yAxis.max = 100;
						break;
					case 'bloodPressure':
						let max2 = 0;
						let min2 = 0;
						let sum2 = 0;
						let echartsData2 = []
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							let key = timeArr[0]+':'+'00'
							if(dataArr[key] == undefined){
								dataArr[key] = {
									val:[v.data_msg.bloodPressureHigh],
									val2:[v.data_msg.bloodPressureLow],
									from:0
								}
							}else{
								dataArr[key].val = [...dataArr[key].val,v.data_msg.bloodPressureHigh];
								dataArr[key].val2 = [...dataArr[key].val2,v.data_msg.bloodPressureLow];
							}
							// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
							// echartsData.push({value:[floatData,v.data_msg],itemStyle: {color: this.dataConfig[this.type].color}})
							sum += v.data_msg.bloodPressureHigh
							console.log(v.data_msg.bloodPressureHigh)
							sum2 += v.data_msg.bloodPressureLow
							
							if(max == 0 || max < v.data_msg.bloodPressureHigh){
								max = v.data_msg.bloodPressureHigh
							}
							if(min == 0 || min > v.data_msg.bloodPressureHigh){
								min = v.data_msg.bloodPressureHigh
							}
							if(max2 == 0 || max2 < v.data_msg.bloodPressureLow){
								max2 = v.data_msg.bloodPressureLow
							}
							if(min2 == 0 || min2 > v.data_msg.bloodPressureLow){
								min2 = v.data_msg.bloodPressureLow
							}
						})
						avg = sum / data.length
						let avg2 = sum2 / data.length
						avg = parseInt(avg)
						avg2 = parseInt(avg2)
						// console.log(avg,'ag')
						// console.log(avg2,'ag2')
						console.log(dataArr)
						
						for (let key in dataArr) {
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val2)],itemStyle: {color: this.dataConfig[this.type].color1}})
								// console.log(key , dataArr[key]);
							}
						}
						this.option.series[0].data = echartsData
						// this.option.series[1].data = echartsData2
						this.option.series[0].markLine.data[0].yAxis = avg
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.data[1] = {}
						this.option.series[0].markLine.data[1].lineStyle = {}
						this.option.series[0].markLine.data[1].lineStyle.color = this.dataConfig[this.type].color1
						this.option.series[0].markLine.data[1].label = {}
						this.option.series[0].markLine.data[1].label.color = this.dataConfig[this.type].color1
						this.option.series[0].markLine.data[1].yAxis = avg2
						// this.option.series[1].markLine.lineStyle.color = this.dataConfig[this.type].color
						// this.option.series[1].markLine.label.color = this.dataConfig[this.type].color
						this.option.title = {
							text :'收缩压'+min + '-' + max + '   '+ '舒张压：' +min2 + '-' + max2,
							// subtext: '毫摩尔/升',
							left: 'center'
						};
						this.dataConfig.bloodGlucose.title = min + '-' + max
						// this.option.yAxis.min = parseInt(min2) - 5;
						// this.option.yAxis.max = parseInt(max) + 5;
						break;
						
					case 'pulseReat':
						// [data[0]],
						data.map((v,i) => {
							
							let dataMsg = v.data_msg;
							let timeArr = v.hour_minute.split(':');
							let maxLength = (dataMsg.length > 5?5:dataMsg.length)
							let readDataArr = [];
							for(let i = 0;i<maxLength;i++){
								let real_data = dataMsg[i]
								
								if((real_data < 30 || real_data >= 200)){
									continue;
								}
								
								readDataArr.push(real_data)
								len += 1;
								sum += real_data
								if(max == 0 || max < real_data){
									max = real_data
								}
								if(min == 0 || min > real_data){
									min = real_data
								}
							}
							
							if(timeArr[1] < 30){
								let key = timeArr[0]+':'+'00'
								if(dataArr[key] == undefined){
									dataArr[key] = {
										val:readDataArr.filter(item => (item > 30 || item  <= 200)),
										from:0
									}
								}else{
									dataArr[key].val = [...dataArr[key].val,...readDataArr.filter(item => (item > 30 || item  <= 200))];
								}
								
							}else{
								let key = timeArr[0]+':'+'30'
								if(dataArr[key] == undefined){
									dataArr[key] = {
										val:readDataArr.filter(item => (item > 30 || item  <= 200)),
										from:0
									}
								}else{
									dataArr[key].val = [...dataArr[key].val,...readDataArr.filter(item => (item > 30 || item  <= 200))];
								}
								
							}
							
							
							
						})
						avg = sum / len
						avg = parseInt(avg)
						for (let key in dataArr) {
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
								// console.log(key , dataArr[key]);
							}
						}
						
						this.option.series[0].data = echartsData
						this.option.series[0].markLine.data[0].yAxis = avg
						
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.title = {
							text :min + '-' + max,
							subtext: '次/分',
							left: 'center'
						};
						this.dataConfig.bloodGlucose.title = min + '-' + max
						// this.option.yAxis.axisLabel.formatter = '{value}%';
						this.option.yAxis.splitNumber = 1;
						this.option.yAxis.min = 30;
						this.option.yAxis.max = 90;
					break;
					case 'bloodLiquid':
						
						data.map((v,i) => {
							let dataMsg = v.data_msg;
							let real_data = dataMsg.uricAcidVal/10
							let timeArr = v.hour_minute.split(':');
							
							if(timeArr[1] % 10 == 0){
								var key = v.hour_minute
							}else{
								var key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
							}
							if(dataArr[key] == undefined){
								dataArr[key] = {
									val:[real_data],
								}
							}else{
								dataArr[key].val = [...dataArr[key].val,real_data];
							}
							sum += real_data
							if(max == 0 || max < real_data){
								max = real_data
							}
							if(min == 0 || min > real_data){
								min = real_data
							}
							len += 1;
							
						})
						
						avg = sum / len
						avg = parseFloat(avg.toFixed(2))
						for (let key in dataArr) {
							
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								let nextKey = this.subtractMinutes(key,10)
								
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.type].color}})
								if(!dataArr.hasOwnProperty(nextKey)){
									echartsData.push(null)
								}
							}
						}
						
						this.option.series[0].data = echartsData
						//top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
						this.option.series[0].markLine.label.position ='insideEndTop'
						this.option.series[0].markLine.data[0].yAxis = avg
						this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
						this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
						this.option.series[0].type = 'line'
						this.option.series[0].symbol = 'none',
						this.option.series[0].smooth = true 
						 
						this.option.series[0].itemStyle= {
															color: 'rgb(255, 70, 131)'
														  }
						this.option.series[0].areaStyle = {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							  {
								offset: 0,
								color: 'rgb(254, 174, 173)'
							  },
							  {
								offset: 1,
								color: 'rgb(255, 255, 248)'
							  }
							])
						  }
						
						// this.option.series[0].type = 'this.dataConfig[this.type].color'
						this.option.title = {
							text :min + '-' + max,
							subtext: '微摩尔/升',
							left: 'center',
							textStyle:{
								 fontWeight:"lighter",
								 fontSize:24
							}
						};
						this.dataConfig.bloodGlucose.title = min + '-' + max
						
						this.option.yAxis.axisLabel.formatter = function(v,i){
							return v;
						}
						this.option.yAxis.splitNumber = 3;
						this.option.yAxis.min = 0;
						this.option.yAxis.max = Math.round(max) + 1;
					break;
				case 'bloodLiquidAll':
						let orTotal = {
							cholesterol:[],
							highDensity:[],
							lowDensity:[],
							triacylglycerol:[],
						}
						
						data.map((v,i) => {
							let dataMsg = v.data_msg;
							let real_data = {
								cholesterol:(dataMsg.cholesterol/100).toFixed(2),
								highDensity:(dataMsg.highDensity/100).toFixed(2),
								lowDensity:(dataMsg.lowDensity/100).toFixed(2),
								triacylglycerol:(dataMsg.triacylglycerol/100).toFixed(2)
							}
							orTotal.cholesterol.push(parseFloat(real_data.cholesterol))
							orTotal.highDensity.push(parseFloat(real_data.highDensity))
							orTotal.lowDensity.push(parseFloat(real_data.lowDensity))
							orTotal.triacylglycerol.push(parseFloat(real_data.triacylglycerol))
							let timeArr = v.hour_minute.split(':');
							if(timeArr[1] % 10 == 0){
								var key = v.hour_minute
							}else{
								var key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
							}
							if(dataArr[key] == undefined){
								dataArr[key] = {
									val:[real_data.cholesterol],
									highDensity:[real_data.highDensity],
									lowDensity:[real_data.lowDensity],
									triacylglycerol:[real_data.triacylglycerol],
								}
							}else{
								dataArr[key].val = [...dataArr[key].val,real_data.cholesterol];
								dataArr[key].highDensity = [...dataArr[key].highDensity,real_data.highDensity];
								dataArr[key].lowDensity = [...dataArr[key].lowDensity,real_data.lowDensity];
								dataArr[key].triacylglycerol = [...dataArr[key].triacylglycerol,real_data.triacylglycerol];
							}
							
							
						})
						
						let echartsData1 = [];
						echartsData2 = [];
						let echartsData3 = [];
						let echartsData8 = [] // 测试用
						for (let key in dataArr) {
							
							if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
								let timeArr2 = key.split(':');
								let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
								let nextKey = this.subtractMinutes(key,10)
								
								echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)]})
								if(!dataArr.hasOwnProperty(nextKey)){
									echartsData.push(null)
								}
								
								echartsData1.push({value:[floatData,this.getAverage(dataArr[key].highDensity)]})
								if(!dataArr.hasOwnProperty(nextKey)){
									echartsData1.push(null)
								}
								
								echartsData2.push({value:[floatData,this.getAverage(dataArr[key].lowDensity)]})
								if( !dataArr.hasOwnProperty(nextKey)){
									echartsData2.push(null)
								}
								
								echartsData3.push({value:[floatData,this.getAverage(dataArr[key].triacylglycerol)]})
								if( !dataArr.hasOwnProperty(nextKey)){
									echartsData3.push(null)
								}
								
								// console.log(key , dataArr[key]);
							}
						}
						console.log(echartsData8)
						this.option.legend = {
							data:['总胆固醇','甘油三酯','高密度脂蛋白','低密度脂蛋白']
						}
						// 总胆固醇
						this.option.series[0].data = echartsData
						this.option.series[0].type = 'line'
						this.option.series[0].symbol = 'none',
						this.option.series[0].smooth = true
						this.option.series[0].name = this.option.legend.data[0]
						this.option.series[0].color = this.dataConfig.bloodLiquidAll.overviewData.data[0].color
						// 甘油三酯
						this.option.series[1] = {}
						this.option.series[1].data = echartsData3
						this.option.series[1].type = 'line'
						this.option.series[1].symbol = 'none',
						this.option.series[1].smooth = true
						this.option.series[1].name = this.option.legend.data[1]
						this.option.series[1].color = this.dataConfig.bloodLiquidAll.overviewData.data[1].color
						// 高
						this.option.series[2] = {}
						this.option.series[2].data = echartsData1
						this.option.series[2].type = 'line'
						this.option.series[2].symbol = 'none',
						this.option.series[2].smooth = true
						this.option.series[2].name = this.option.legend.data[2]
						this.option.series[2].color = this.dataConfig.bloodLiquidAll.overviewData.data[2].color
						// 低
						this.option.series[3] = {}
						this.option.series[3].data = echartsData2
						this.option.series[3].type = 'line'
						this.option.series[3].symbol = 'none',
						this.option.series[3].smooth = true
						this.option.series[3].name = this.option.legend.data[3]
						this.option.series[3].color = this.dataConfig.bloodLiquidAll.overviewData.data[3].color
						
						this.option.series[0].markLine = []
						this.dataConfig.bloodGlucose.title = min + '-' + max
						this.dataConfig.bloodLiquidAll.overviewData.data[0].average = this.getAverage(orTotal.cholesterol).toFixed(2)
						this.dataConfig.bloodLiquidAll.overviewData.data[1].average = this.getAverage(orTotal.triacylglycerol).toFixed(2)
						this.dataConfig.bloodLiquidAll.overviewData.data[2].average = this.getAverage(orTotal.highDensity).toFixed(2)
						this.dataConfig.bloodLiquidAll.overviewData.data[3].average = this.getAverage(orTotal.lowDensity).toFixed(2)
						if(orTotal.cholesterol.length > 0){
							this.dataConfig.bloodLiquidAll.overviewData.data[0].value = Math.min(...orTotal.cholesterol).toFixed(2) + '-' + Math.max(...orTotal.cholesterol).toFixed(2)
							this.dataConfig.bloodLiquidAll.overviewData.data[1].value = Math.min(...orTotal.triacylglycerol).toFixed(2) + '-' + Math.max(...orTotal.triacylglycerol).toFixed(2)
							this.dataConfig.bloodLiquidAll.overviewData.data[2].value = Math.min(...orTotal.highDensity).toFixed(2) + '-' + Math.max(...orTotal.highDensity).toFixed(2)
							this.dataConfig.bloodLiquidAll.overviewData.data[3].value = Math.min(...orTotal.lowDensity).toFixed(2) + '-' + Math.max(...orTotal.lowDensity).toFixed(2)
							
						}
						this.option.yAxis.splitNumber = 3;
						this.option.yAxis.min = 0;
						this.option.yAxis.max = 6;
					break;
				}
				return this.option;
			}
		}
	}
</script>

<style scoped="scss">
	.total_box{
		padding: 20rpx;
		.b1{
			width: 300rpx;
			height: 250rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
		}
	}
	.body-style {
		background-color: #f6f6f6;
	}
	.box-rds {
		background-color: #fff;
		border-radius: 40rpx;
		padding: 30rpx;
		margin: 20rpx;
		
	}
	.title{
		background-color: #fff;
		.title-data{
			font-size: 60rpx;
			font-weight: bold;
			margin-right: 10rpx;
		}
	}
	.flx{
		display: flex;
		
	}
	.jc-end{
		justify-content: end;
	}
	.jc-start{
		justify-content: end;
	}
	.ac{
		align-items: center;
	}
	.jc{
		justify-content: center;
	}
	.jcsb{
		justify-content: space-between;
	}
	.fd_row{
		flex-direction: row;
	}
	
</style>
