<template>
	<view class="progress_box">
		<canvas class="progress_bg"  canvas-id="cpbg"></canvas>
		<canvas class="progress_bar"  canvas-id="cpbar"></canvas>
		<view class="progress_txt">
			<view class="progress_info">{{ progress_txt }}%</view>
			<text class="progress_title">{{title}}</text>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		progress_txt:{
			type: Number,
			default:0
		},
		title:{
			type:String,
			default: ''
		},
		width:{
			type:Number,
			defauit:''
		},
		height:{
			type:Number,
			defauit:''
		}
	},
	mounted: function() {
		this.drawProgressbg();
		this.drawCircle(this.progress_txt); //参数为1-100
		this.style(this.width,this.height);
	},
	methods: {
		style:function(width,height){
			// console.log(width,height)
			// document.getElementById("cpbg").style.width = width+"px"; 
			// cpbgA.style.width = width+"px"; 
			// cpbgA.style.height = height+"px"; 
			// var cpbarA = document.getElementById("cpbar");
			// cpbarA.style.width = width+"px"; 
			// cpbarA.style.height = height+"px"; 
		},
		drawProgressbg: function() {
			// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
			var ctx = uni.createCanvasContext('cpbg', this);
			ctx.setLineWidth(6); // 设置圆环的宽度
			ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
			ctx.setLineCap('round'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			ctx.arc(110, 110, 70, 0.75 * Math.PI, 0.25 * Math.PI, false);
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle: function(step) {
			var ctx = uni.createCanvasContext('cpbar', this);
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = ctx.createLinearGradient(28, 55, 192, 55);
			gradient.addColorStop('0', '#009688');
			// gradient.addColorStop('1.0', '#FF3B1D');
			ctx.setLineWidth(6);
			ctx.setStrokeStyle(gradient);
			ctx.setLineCap('round');
			ctx.beginPath();
			// 参数step 为绘制的百分比
			step = 0.015 * step + 0.75;
			if (step >= 2) {
				step = step % 2;
			}
			ctx.arc(110, 110, 70, 0.75 * Math.PI, step * Math.PI, false);
			ctx.stroke();
			ctx.draw();
		},
		
	}
};
</script>

<style>
	.progress_box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.progress_bg {
		position: absolute;
		width: 220px;
		height: 220px;
	}
	.progress_bar {
		width: 220px;
		height: 220px;
	}
	.progress_txt {
		position: absolute;
		font-size: 28upx;
		color: #999999;
	}
	.progress_info {
		font-size: 36upx;
		padding-left: 16upx;
		letter-spacing: 2upx;
		font-size: 52upx;
		color: #fff;
	}
	.progress_titleP{
		color: #BFBFBF;
	}
	.progress_dot {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background-color: #fb9126;
	}
</style>
