<template>
	<view>
		
		<view class="" style="position: relative;">
			<view :style="'position: absolute;width: 100%; height: 60px;background-color: #000;z-index: 1;display: '+zz">
				<image src="../../static/image/1722482824117.jpg" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="">
				<canvas id="myCanvas" :canvas-id="canvasId" style="width: 100%; height: 60px;"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"sleep-list-data",
		props:{
			dataList:Array,
			canvasId:String
		},
		data() {
			return {
				zz:'block',
				
			};
		},
		watch:{
			dataList(newVal,oldVal){
			
				if(newVal.length > 0){
					this.zz = 'none'
					const query = uni.createSelectorQuery().in(this);
					query.select('#myCanvas').boundingClientRect(data => {
					  if (data) {
					    // data.width就是画布的宽度
					    let canvasWidth = data.width;
					    this.doDraw(canvasWidth)
					  }
					}).exec();
				}
			}
		},
		mounted() {
		    
		},
		methods:{
			doDraw(canvasWidth){
				const colorArr = [
					'#e933dd',
					'#6452da',
					'#4faffc'
				]
				const heightArr = [
					40,
					20,
					0
				]
				let current = 0;
				let times = 0;
				// 计算出每个线条的宽度
				const oneLineWidth = (canvasWidth / this.dataList.length).toFixed(2)
				const ctx = uni.createCanvasContext(this.canvasId, this);
				// 设置填充颜色为红色
				this.dataList.map((v,i) => {
					// if(current == v){
					// 	times += 1;
					// }else{
						ctx.setFillStyle(colorArr[parseInt(v)]);
						// 绘制矩形
						ctx.fillRect((i * oneLineWidth).toFixed(2), heightArr[parseInt(v)],oneLineWidth, 20);
						// current = v;
						// times = 1
					// }
					
				})
				
				// 将绘制的内容渲染到画布
				ctx.draw();
			}
		}
	}
</script>

<style>

</style>