<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 class="title flx ac" style="justify-content: center;">
			<view class="title-data">
				{{dataConfig[type].title}}
			</view>
			<view class="title-unit">
				{{dataConfig[type].unit}}
			</view>
		</view> -->
		<view style=" height:600rpx;background-color: #fff;"><l-echart ref="chartRef" @finished="init"></l-echart></view>

		<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 {
				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
							}
						]
					},
					bloodOxygen:{
						title:'123123',
						name:'血氧',
						color:"#bf32fc",
						unit:'%',
						cankaoData:false,
						
					},
					bodyTemperature:{
						title:'bodyTemperature',
						name:'体温',
						color:"#bf32fc",
						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
							},
						],
					}
				},
				option:{
				  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: 
					  [
						 
						// [0.5, 3.5],
						// [1.2, 2.4],
						// [1.4, 2.8],
						// [2.7, 2.4],
						// [3.4, 6],
					  ],
					  markLine: {
					      data: [
					          {
					              yAxis: 2.5, // 在 y 值为 100 的位置添加水平参考线
					          }
					      ],
						  lineStyle:{
							  color:'#ccc',
							  cap:"butt"
						  },
						  label:{
							 color:'#ccc',
						  },
					  },
					  type: 'scatter',
					}
				  ]
				},
				option2: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow' 
						},
						confine: true
					},
					legend: {
						data: ['热度', '正面', '负面']
					},
					grid: {
						left: 20,
						right: 20,
						bottom: 15,
						top: 40,
						containLabel: true
					},
					xAxis: [
						{
							type: 'value',
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666',
								
							}
						}
					],
					yAxis: [
						{
							type: 'category',
							axisTick: { show: false },
							data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}
					],
					series: [
						{
							name: '热度',
							type: 'bar',
							label: {
								normal: {
									show: true,
									position: 'inside'
								}
							},
							data: [300, 270, 340, 344, 300, 320, 310],
						},
						{
							name: '正面',
							type: 'bar',
							stack: '总量',
							label: {
								normal: {
									show: true
								}
							},
							data: [120, 102, 141, 174, 190, 250, 220]
						},
						{
							name: '负面',
							type: 'bar',
							stack: '总量',
							label: {
								normal: {
									show: true,
									position: 'left'
								}
							},
							data: [-20, -32, -21, -34, -90, -130, -110]
						}
					]
				},
			
			}
		},
		onLoad(e) {
			this.type = e.type
			this.desc = e.desc || ''
			// 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(){
				uni.navigateTo({
					url:'./detail?type='+this.type +(this.desc == ''?'':'&desc='+this.desc)
				})
			},
			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 res = await 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
				})
				
				return this.makeOptionConfig(res.data);
			},
			makeOptionConfig(data){
				let echartsData = [];
				let sum = 0;
				let max = 0;
				let min = 0;
				let avg = 0;
				let len = 0;
				switch(this.type){
					
					case 'bodyTemperature':
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							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 || max > dataMsg){
								min = dataMsg
							}
						})
						avg = sum / data.length
						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.yAxis.min = 32;
						this.option.yAxis.max = max + 4;
						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 = 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 || max > dataMsg){
									min = dataMsg
								}
							})
							avg = sum / data.length
							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.bodyTemperature.title = min + '-' + max
							break;
					case 'bloodGlucose':
						data.map((v,i) => {
							let timeArr = v.hour_minute.split(':');
							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 || max > v.data_msg){
								min = v.data_msg
							}
						})
						avg = sum / data.length
						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
						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 || max > 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 'pulseReat':
						data.map((v,i) => {
							
							let dataMsg = v.data_msg;
							let timeArr = v.hour_minute.split(':');
							for(let i = 0;i<1;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 || max > 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 = 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(':');
							let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
							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 || max > real_data){
								min = real_data
							}
							len += 1;
							
						})
						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.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 = 330;
					break;
				}
				return this.option;
			}
		}
	}
</script>

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