<template>
	<view>
		<tm-nav-bar left-icon="arrow-left" :title="title" @clickLeft="$utils.back" />
		<view class="">
			<view class="dxxl">
				<!-- <view class="" style="margin-bottom: 10rpx;">
					窦性心律
				</view> -->
				<scroll-view class="myScoll" scroll-x :show-scrollbar="true">
					<view class="box1">
						<canvas canvas-id="ecg"  style="width: 3000px; height: 300px;"></canvas>
					</view>
					<view class="box2" :style="{'left': pLeft + 'px'}">
					  <canvas canvas-id="myCanvas" style="width: 3000px; height: 300px;"></canvas>
					</view>
				</scroll-view>
			</view>
			<view class="list">
				<view class="flx flx_ac ">
					<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
						<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="" style="color: red;">
						心率
					</view>
				</view>
				<view class="flx flx_sb sl_box flx_wp">
					<view class="all" v-for="(item,index) in xinlv.jisuan">
						<view class="">
							<span class="sl_box_wz">{{item.times?item.times:0}}</span>
							<span class="sl_box_unit">{{item.unit}}</span>
						</view>
						<view class="sl_box_desc">
							{{item.desc}}
						</view>
						<view class="sl_box_cankao" v-if="item.cankao">
							{{item.cankao}}
						</view>
					</view>
					<view class="all" v-for="(item,index) in xinlv.cankao">
						<view class="">
							<span class="sl_box_wz">{{item.times.toFixed(2)}}</span>
							<span class="sl_box_unit">{{item.unit}}</span>
						</view>
						<view class="sl_box_desc">
							{{item.desc}}
						</view>
						<view class="sl_box_cankao" v-if="item.cankao">
							{{item.cankao}}
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="flx flx_ac ">
					<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
						<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="" style="color: red;">
						心率变异性
					</view>
				</view>
				<view class="">
					<xdt :datas="ybx.hrv"></xdt>
					<xdt :datas="ybx.sdnn"></xdt>
					<xdt :datas="ybx.rmssd"></xdt>
				</view>
			</view>
			<view class="list">
				<view class="flx flx_ac ">
					<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
						<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<view class="" style="color: red;">
						心电图
					</view>
				</view>
				<view class="">
					<xdt :datas="xdt.pwv"></xdt>
					<xdt :datas="xdt.qtc"></xdt>
					<xdt :datas="xdt.qsrf"></xdt>
					<xdt :datas="xdt.qsrx"></xdt>
					<xdt :datas="xdt.qsrfx"></xdt>
					<xdt :datas="xdt.st"></xdt>
				</view>
			</view>
			<view class="" style="height: 20rpx;">
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				list:[],
				height: 300,
				width: 3000,
				centerY: 200,
				pLeft:'0',
				dataInfo:{},
				xinlv:{
					jisuan:[
						{
							times:0,
							unit:'次/分',
							desc:'平均心率',
							cankao:''
						},
						{
							times:0,
							unit:'次/分',
							desc:'最高心率',
							cankao:''
						},
						{
							times:0,
							unit:'次/分',
							desc:'最低心率',
							cankao:''
						}
					],
					cankao:[
						{
							times:0,
							unit:'%',
							desc:'正常',
							cankao:'(60~100次/分)'
						},
						{
							times:0,
							unit:'%',
							desc:'心率偏快',
							cankao:'>100次/分)'
						},
						{
							times:0,
							unit:'%',
							desc:'心率偏慢',
							cankao:'(<60次/分)'
						},
						
					],
				},
				// 心率异变性
				ybx:{
					hrv:{
						name:'HRV',
						max:210,
						unit:'毫秒',
						min:0,
						val:0
					},
					sdnn:{
						name:'SDNN',
						max:180,
						unit:'毫秒',
						min:102,
						val:0
					},
					rmssd:{
						name:'RMSSD',
						max:39,
						unit:'毫秒',
						min:15,
						val:0
					}
				},
				xdt:{
					pwv:{
						name:'PWV',
						max:15,
						unit:'m/s',
						min:6,
						val:0
					},
					qtc:{
						name:'QTc',
						max:400,
						unit:'毫秒',
						min:260,
						val:0
					},
					qsrf:{
						name:'QRS 波振幅',
						max:1.5,
						unit:'mV',
						min:0.05,
						val:0
					},
					qsrx:{
						name:'QRS 波时限',
						max:120,
						unit:'毫秒',
						min:80,
						val:0
					},
					qsrfx:{
						name:'QRS 主波方向',
						max:0,
						unit:'向上，向下',
						min:0,
						val:0
					},
					st:{
						name:'ST 段振幅',
						max:0.1,
						unit:'mV',
						min:-0.05,
						val:0
					}
				}
			}
		},
		onLoad() {
			const dataKey = 'infoData'; // 同上面设置的key
			let get = uni.getStorageSync(dataKey)
			
			if(!get){
				uni.showToast({
					title:"读取数据失败"
				})
				setTimeout(() => {
					uni.navigateBack({
						delta:-1
					})
				},2000)
				return
			}
			const data = JSON.parse(get);
			this.dataInfo = data;
			this.changeData(this.dataInfo)
			this.list = this.dataInfo.data_msg.list
			// uni.removeStorageSync(dataKey);
		},
		onReady() {
				this.list = this.list.filter(val => val !== 0)
				const ctx = uni.createCanvasContext('ecg', this);
				ctx.setStrokeStyle('#d5d5d5') //
				ctx.setLineWidth(1) // 线条宽度
				for (var x = 0.5; x < 3000; x += 15) {
				  ctx.moveTo(x, 0)
				  // 结束点
				  ctx.lineTo(x, 3000)
				  // 描边，不调用stroke则看不到画的内容
				  ctx.stroke()
				}
				for (var y = 0.5; y < 3000; y += 15) {
				  ctx.moveTo(0, y)
				  // 结束点
				  ctx.lineTo(3000, y)
				  // 描边，不调用stroke则看不到画的内容
				  ctx.stroke()
				}
				// ctx.fill();
				ctx.draw()
				this.drawCurve()
		},
		methods: {
			drawCurve () {
			  let ctx = uni.createCanvasContext('myCanvas', this)
			  let list = this.list;
			  let centerY = this.centerY;
			  let width = this.width;
			  let xScale = width / (list.length - 1); // 计算每个数据点占据的宽度
			  let yScale = centerY / (Math.max(...list) - Math.min(...list))
			  // yScale *= 3
			  let x = 0;
			  let y = centerY / 2 - (list[0] * yScale)
			  ctx.beginPath();// 开始绘制
			  ctx.moveTo(x, y);
			  ctx.setStrokeStyle('#c96d79'); // 设置线条颜色
			  ctx.setLineWidth(2); // 设置线条宽度
			  for (let i = 1; i < list.length; i++) {
			    let x = i * xScale;
			    let y = centerY / 2 - ((list[i] / 2) * yScale); // 负数在中心下方，正数在中心上方
			    ctx.lineTo(x, y);
				
			  }
			 ctx.stroke()// 绘制线条
			 // ctx.fill();
			 ctx.draw(false); 
						
			  // 绘制到canvas上，不需要等待上一步绘制完成
			},
			changeData(data){
				let HRV = []
				let QT = []
				let heart = []
				let pwv = []
				let resRate = []
				this.xinlv.jisuan[0].times = data.data_msg.meanHeartRate == undefined?data.data_msg.heartRate:data.data_msg.meanHeartRate
				if(data.data_msg.wavefrom == undefined){
					return
				}
				data.data_msg.wavefrom.map((v,i) => {
					
					if(!(v instanceof Array)){
						if(v.HRV != 0){
							HRV.push(v.HRV) 
						}
						if(v.QT != 0){
							QT.push(v.QT) 
						}
						if(v.heart != 0 && v.heart != null){
							heart.push(v.heart) 
						}
						if(v.pwv != 0){
							pwv.push(v.pwv) 
						}
						if(v.resRate != 0){
							resRate.push(v.resRate) 
						}
					}
					
				})
				this.xinlv.jisuan[1].times = Math.max(...heart)
				this.xinlv.jisuan[2].times = Math.min(...heart)
				// 获取心率每个区间的数据数量
				let heart_zc = heart.filter(value => (value >= 60 && value<= 100)).length;
				let heart_fast = heart.filter(value => value > 100).length;
				let heart_slow = heart.filter(value => value < 60).length;
				let heart_length = heart.length
				this.xinlv.cankao[0].times = (heart_zc / heart_length).toFixed(2) * 100
				this.xinlv.cankao[1].times = (heart_fast / heart_length).toFixed(2) * 100
				this.xinlv.cankao[2].times = (heart_slow / heart_length).toFixed(2) * 100
				if(this.xinlv.cankao[0].times > 50){
					this.title = '窦性心率';
				}else if(this.xinlv.cankao[1].times >= 50){
					this.title = '心率偏快';
				}else if(this.xinlv.cankao[2].times >= 50){
					this.title = '心率偏慢';
				}else{
					this.title = '窦性心率不齐';
				}
				if(data.diseaseRisk != undefined && data.diseaseRisk >= 30 && this.xinlv.cankao[0].times > 50){
					this.title = '窦性心率不齐';
				}
				if(data.data_msg.hrv != undefined){
					this.ybx.hrv.val = data.data_msg.hrv
					this.ybx.sdnn.val = data.data_msg.diseaseSdnn
					this.ybx.rmssd.val = data.data_msg.diseaseRmssd
					this.xdt.pwv.val = (data.data_msg.pwvMeanVal/10).toFixed(2)
					this.xdt.qtc.val = data.data_msg.QTC
					this.xdt.qsrf.val = (data.data_msg.qrsAmp / 100).toFixed(2)
					this.xdt.qsrx.val = data.data_msg.qrsTime
					this.xdt.qsrfx.val = data.data_msg.leadOffType == 0?'向上':'向下'
					this.xdt.st.val = (data.data_msg.stMeanVal / 100).toFixed(2)
				}else{
					console.log('is undefined')
					this.ybx.hrv.val = data.data_msg.averageHRV
					this.xdt.qtc.val = data.data_msg.averageTimeInterval
				}
				
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.box1 {
	  position: absolute;
	  left: 0px;
	  width: 3000rpx;
	}
	
	.box2 {
	  position: absolute;
	  left: 0px;
	  width: 3000rpx;
	}
	
	.myScoll {
	  width: 100%;
	  height: 396rpx;
	  white-space: nowrap;
	  position: relative;
	}
.list{
	background-color: #fff;
	overflow: hidden;
	padding: 30rpx;
	margin: 30rpx 30rpx;
	border-radius: 30rpx;
}
.dxxl{
	background-color: #fff;
	padding: 20rpx;
	padding-top: 40rpx;
}
.sl_box{
	text-align: center;
	
	.all{
		width: calc(100% / 3);
		margin-top:40rpx;
	}
	.sl_box_cankao,.sl_box_desc{
		font-size: 24rpx;
		color: #999;
	}
	.sl_box_unit{
		font-size: 26rpx;
	}
	.sl_box_wz{
		margin-right: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
}
</style>
