<template>
	<view>
		<tm-nav-bar left-icon="arrow-left" title="睡眠" @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 class="canvas_box">
			<canvas canvas-id="circleCanvas" style="width: 480rpx; height: 480rpx;margin: 0  auto;"></canvas>
			<view class="" style="height: 40rpx;">
				
			</view>
			<view class="flx flx_sb">
				<view class="flx flx_ac">
					<!-- color:'#e933dd',
					bigColor:'#6452da', -->
					<view class="circle" style="background-color:#6452da ;" >
					</view>
					<view class="sleep_info">
						<view class="info_title">
							睡眠时长
						</view>
						<view class="info_val">
							{{sleep.shen}}
						</view>
					</view>
				</view>
				<view class="flx flx_ac">
					<view class="sleep_info">
						<view class="info_title" style="text-align: right;">
							深度睡眠
						</view>
						<view class="info_val">
							{{sleep.qian}}
						</view>
					</view>
					<view class="circle" style="background-color:#e933dd ;">
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				cavasConfig:{
					canvasWidth: 240,
					canvasHeight: 240,
					lineWidth:20,
					radius: 68, // 内圆的半径
					startAngle: -90, // 起始角度，-90度，即垂直方向的3点钟位置
					bigRadius:90,// 外圆的半径
					cxt:null,
					colorBg:'#f7c1f5',
					bigColorBg:'#d1ccf4',
					color:'#e933dd',
					bigColor:'#6452da',
					bigAngle:0,
					angle:0,
					startSmallAngle:0,
					bigStartAngle:0,
					stop:0,
					bigStop:0,
					maxTime:480
				},
				time: new Date().toISOString().substring(0, 10),
				sleep:{
					shen:'0 分',
					qian:'0 分'
				}
			}
		},
		onLoad() {
			this.getDataList()	
		},
		onReady() {
			this.cavasConfig.ctx = uni.createCanvasContext('circleCanvas', this);
			this.drawCircle('bottom',360,this.cavasConfig.bigRadius,this.cavasConfig.bigColorBg);
			this.drawCircle('bottom',360,this.cavasConfig.radius,this.cavasConfig.colorBg);
			
		},
		computed: {
			...mapGetters({
				getActiceDevice: "api/getActiceDevice"
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDataList(){
				let type = 'SleepDatas'
				let res = this.$store.dispatch('api/getDeviceListDays', {
					type: type,
					// type: (this.type),
					device_real_time: this.time,
					device_id:this.getActiceDevice.device_id
				}).then(res => {
					console.log(res.data.length)
					if(res.data.length > 0){
						this.sleep.shen = this.min2Hour(res.data[0].data_msg[0].sleepTotalTime)
						this.sleep.qian = this.min2Hour(res.data[0].data_msg[0].deepSleepTime)
						this.cavasConfig.angle = this.getAngle(res.data[0].data_msg[0].deepSleepTime)
						this.cavasConfig.bigAngle = this.getAngle(res.data[0].data_msg[0].sleepTotalTime)
						this.doAnimation(0)
						this.doAnimation(1)
					}else{
						this.doAnimation(0)
						this.doAnimation(1)
					}
				})
				
				
			},
			getAngle(min){
				return min/this.cavasConfig.maxTime * 360
			},
			min2Hour(min){
				let hour = (Math.floor(min / 60))
				let minute = (min % 60)
				return (hour?hour + ' 小时 ' + minute+ ' 分':minute+ ' 分')
			},
			doAnimation(type){
				
				  if(type == 0){
					  if(this.cavasConfig.bigStop === 1){
						  return
					  }
					  if(this.cavasConfig.bigStartAngle >= this.cavasConfig.bigAngle){
						  this.cavasConfig.bigStartAngle = this.cavasConfig.bigAngle
						  this.cavasConfig.bigStop = 1;
					  }else{
						  this.cavasConfig.bigStartAngle += this.cavasConfig.bigAngle/50
					  }
					  this.drawCircle('round',this.cavasConfig.bigStartAngle,this.cavasConfig.bigRadius,this.cavasConfig.bigColor);
				  }else{
					  if(this.cavasConfig.stop == 1){
						  return 
					  }
					  if(this.cavasConfig.startSmallAngle >= this.cavasConfig.angle){
						  this.cavasConfig.startSmallAngle = this.cavasConfig.angle
						  this.cavasConfig.stop = 1;
					  }else{
						  this.cavasConfig.startSmallAngle += this.cavasConfig.angle/50
					  }
					  this.drawCircle('round',this.cavasConfig.startSmallAngle,this.cavasConfig.radius,this.cavasConfig.color);
				  }
				requestAnimationFrame(() => {
					this.doAnimation(type)
				})
			  },
			  // lineCap线条类型  edangle绘制角度  radius 直径 color 线条颜色
			drawCircle(lineCap,edangle,radius,color) {
				this.cavasConfig.ctx.save()
				const cx = this.cavasConfig.canvasWidth / 2
				const cy = this.cavasConfig.canvasHeight / 2
				this.cavasConfig.ctx.lineCap = lineCap
				let start = this.cavasConfig.startAngle*Math.PI/180
				let end = (edangle+this.cavasConfig.startAngle)*Math.PI/180
				this.cavasConfig.ctx.beginPath()
				this.cavasConfig.ctx.arc(cx, cy, radius , start, end);
				this.cavasConfig.ctx.lineWidth = this.cavasConfig.lineWidth; // 设置线宽
				this.cavasConfig.ctx.strokeStyle = color; // 设置绘制样式为蓝色
				this.cavasConfig.ctx.stroke(); // 绘制路径
				this.cavasConfig.ctx.closePath()
				this.cavasConfig.ctx.restore()
				this.cavasConfig.ctx.draw(true)
			}
		}
	}
</script>

<style scoped="scss">
.canvas_box{
	background-color: #fff;
	padding: 20rpx;
	.circle {
		width: 40rpx;
		height: 40rpx;
		
		margin: 0 auto;
		border-radius: 50%;
		margin: 0 10rpx;
	}
	.sleep_info{
		
		.info_title{
			font-size: 24rpx;
			color: #999;
		}
		.info_val{
			
		}
	}

}
</style>
