<template>
  <view>
	<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>
	
	<view class="" @click="play">
		点击播放{{pLeft}}
	</view>
	<view @click="stop">
		停止播放{{pLeft}}
	</view>
  </view>
</template>
 
<script>
export default {
	data() {
		return {
			dataId: '',
			interval:null,
			pLeft:'-10',
			    // list: [139, 148, 158, 168, 176, 183, 190, 196, 201, 204, 204, 203, 198, 192, 182, 170, 156, 139, 120, 101, 80, 59, 37, 16, -4, -25, -44, -63, -81, -98, -112, -124, -135, -144, -151, -157, -161, -165, -168, -172, -176, -179, -182, -184, -186, -187, -187, -185, -183, -180, -177, -174, -171, -168, -165, -162, -160, -157, -154, -151, -147, -144, -141, -139, -137, -135, -133, -132, -132, -131, -130, -128, -126, -124, -122, -119, -116, -112, -109, -106, -102, -98, -94, -89, -84, -79, -74, -68, -63, -58, -53, -50, -48, -47, -47, -48, -51, -54, -58, -61, -64, -66, -68, -69, -69, -69, -71, -74, -78, -84, -89, -96, -103, -109, -111, -110, -103, -239, -145, -9, 160, 347, 533, 693, 805, 857, 846, 773, 643, 471, 276, 86, -72, -187, -225, -206, -187, -173, -163, -159, -162, -164, -161, -155, -147, -137, -129, -119, -103, -89, -79, -71, -66, -61, -52, -44, -38, -32, -24, -15, -3, 7, 16, 25, 34, 43, 54, 64, 74, 84, 96, 109, 123, 138, 152, 166, 181, 195, 209, 222, 233, 243, 251, 257, 261, 262, 260, 256, 249, 240, 227, 212, 195, 176, 156, 134, 111, 88, 67, 46, 27, 8, -8, -24, -37, -50, -61, -71, -80, -88, -94, -98, -101, -103, -105, -107, -107, -107, -107, -107, -106, -106, -104, -102, -99, -97, -94, -91, -87, -84, -81, -78, -75, -72, -69, -66, -63, -61, -59, -57, -56, -54, -53, -52, -52, -51, -50, -49, -47, -45, -44, -42, -40, -37, -35, -32],
			    // list: [],
				list:[
					-0.0008, 
					-0.0016, 
					-0.0016, 
					-0.0016, 
					-0.0016, 
					-0.0008, 
					-0.0008, 
					-0.0016, 
					-0.0016, 
					-0.0024000000000000002, 
					-0.004, 
					-0.0048000000000000004, 
					-0.005600000000000001, 
					-0.007200000000000001, 
					-0.0088, 
					-0.009600000000000001, 
					-0.011200000000000002, 
					-0.012, 
					-0.0128, 
					-0.013600000000000001, 
					-0.015200000000000002, 
					-0.016, 
					-0.016800000000000002, 
					-0.0176, 
					-0.018400000000000003
				],
				height: 300,
			    width: 3000,
			    centerY: 200 // y轴中心作
		}
	},
	onShow() {
	    // this.notifyMonitorValueChange();
	    
	  },
	  
	  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:{
		play(){
			this.interval = setInterval(() => {
				console.log(123)
				this.move()
			},50)
		},
		stop(){
			if(this.interval){
				clearInterval(this.interval)
			}
		},
		move(){
			this.pLeft -= 1
		},
		
		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上，不需要等待上一步绘制完成
		}
	}
	  
}
</script>
<style>
	.box1 {
	  position: absolute;
	  left: 0px;
	  top: 50px;
	  width: 3000rpx;
	}
	
	.box2 {
	  position: absolute;
	  left: 0px;
	  top: 50px;
	  width: 3000rpx;
	
	}
	
	.myScoll {
	  width: 100%;
	  height: 500rpx;
	  white-space: nowrap;
	  position: relative;
	}
</style>