
<style  lang="less" scoped>
   @import "../assets/css/main.less";
   @import "../assets/css/cssReset.css";
     
    .nav{display: flex;.size(100%,126px);.min-width(1200px); .boxShadow(0px,0px,5px,rgba(0,0,0,.19));}
    .nav-left{ flex-grow:1.5}
    .nav-left img{.fl(); .size(50px;50px);.circle(25px); margin:35px 24px 41px 41px;}
    .nav-left p.name{.fz(14px,18px); color: #444;margin: 42px 0 5px 0;}
    .nav-left p.company{.fz(12px,18px); color: #444;}
	.nav-middle{flex-grow:3; }
	.nav-middle ul{display: flex; width: 690px; margin: 0 auto;}
	.nav-middle ul li{.size(138px,126px);.fz(14px);.center(text-x);.box-hover2(); .hover-bg(#fafafa);cursor: pointer;}
	.nav-middle ul li img{height: 40px; margin: 32px 0 14px;}
	.nav-right{flex-grow:1} 
	.nav-right ul{display: flex; line-height: 126px; justify-content:flex-end}
	.nav-right ul li{width: 60px; text-align: center;}
	.nav-right ul li img{cursor: pointer;}
	.shortcuts{.size(260px,592px);.circle(6px);background: rgba(255,255,255,.1); .boxShadow(2px,2px,0,rgba(0,0,0,.1));.fixed(); top: 156px;left: 30px; z-index: 50; overflow-y: auto;}
	.shortcuts ul{display: flex;  flex-wrap: wrap;}
	.shortcuts ul li{width: 130px; .fz(14px); text-align: center; margin:20px 0 20px 0;}
	.shortcuts ul li a img{margin-bottom: 12px;}
	.content{.size(700px,300px);margin: 280px auto 0; }
	.imgShow{.fl(); width:232px; height: 268px; position: relative; margin-right: 20px;}
	.imgShow img{position: absolute; z-index: 100; left: 0; top:0;}
	.msgShow{.fl();padding-top: 55px;}
	.msgShow .top{overflow: hidden;margin-bottom: 24px;}
	.calender{.fl(); margin-right: 16px; .size(98px,84px); text-align: center; background:url(../assets/img/calender2@2x.png) no-repeat center center;}
	.calender .month{.fz(12px,34px);color: #fff;}
	.calender .day{.fz(18px,38px);color: #333;}
	.description{.fr()}
	.description p{.fz(24px,35px,40px);color: #666; }
	.description span{color: #E95252;}
	.saleBtn{.size(200px,46px); .fz(16px);.bgc(#E95252);color: #fff;.circle(20px);border: none;}

</style>

<template>
  <div class="welcomeCont">
       
        
        
        <div class="shortcuts">
        	<ul>
        		<li @click="goUrl('groupManagement',1)"><img src="../assets/img/icon-bmcx@2x.png"><br/>报名111查询</li>
        		<li @click="goUrl('platformModule/Test',1)"><img src="../assets/img/icon-bmcx@2x.png"><br/>test</li>
        		<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
        		<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
        		<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
        		<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
        		<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
        		
        	</ul>
        </div>
       
        <div class="content">
        	<div class="imgShow">
        		<img src="../assets/img/img-shuidi.png" />
        		<canvas id="c"></canvas>
        	</div>
        	<div class="msgShow">
        		<div class="top">
	        		<div class="calender">
	        			<p class="month">4月</p>
	        			<p class="day">第12天</p>
	        		</div>
	        		<div class="description">
	        			<p>销售排名第<span>123</span><img src="../assets/img/icons8-scroll-up-filled-50@2x.png"></p>
	        			<p>你已经<span>3</span>天没有报名</p>
	        		</div>
        		</div>
        		<div class="bottom">
        			<input class="saleBtn" type="button" value="立即启动销售模式" />
        		</div>
        	</div>
        </div>
 
  </div>
</template>

<script>
		
	export default {
		name: 'login-box',
		data (){
		return{
			
		}
		},
		mounted(){
			this.wave();
		},
		methods:{
			wave(){
				var canvas = document.getElementById('c');
				var ctx = canvas.getContext('2d');
				var range = document.getElementById('r');
				//range控件信息
				//var rangeValue = range.value;
				var rangeValue = 50;
				var nowRange = 0; //用于做一个临时的range
				//画布属性
				var mW = canvas.width = 200;
				var mH = canvas.height = 250;
				var lineWidth = 2;
				//圆属性
				var r = mH / 2; //圆心
				var cR = r - 16 * lineWidth; //圆半径
				//Sin 曲线属性
				var sX = 0;
				var sY = mH / 2;
				var axisLength = mW; //轴长
				var waveWidth = 0.025; //波浪宽度,数越小越宽 
				var waveHeight = 6; //波浪高度,数越大越高
				var speed = 0.09; //波浪速度，数越大速度越快
				var xOffset = 0; //波浪x偏移量

				ctx.lineWidth = lineWidth;

				//画圈函数
				var IsdrawCircled = false;
				var drawCircle = function() {

					ctx.beginPath();
					ctx.strokeStyle = '#33B87F';
					//ctx.arc(r, r, cR + 5, 0, 2 * Math.PI);
					ctx.stroke();
					ctx.beginPath();
				//	ctx.arc(r, r, cR, 0, 2 * Math.PI);
					//ctx.clip();

				}

				//画sin 曲线函数
				var drawSin = function(xOffset) {
					ctx.save();
					var points = []; //用于存放绘制Sin曲线的点
					ctx.beginPath();
					//在整个轴长上取点
					for(var x = sX; x < sX + axisLength; x += 20 / axisLength) {
						//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
						var y = -Math.sin((sX + x) * waveWidth + xOffset);

						var dY = mH * (1 - nowRange / 100);

						points.push([x, dY + y * waveHeight]);
						ctx.lineTo(x, dY + y * waveHeight);
					}

					//封闭路径
					ctx.lineTo(axisLength, mH);
					ctx.lineTo(sX, mH);
					ctx.lineTo(points[0][0], points[0][1]);
					ctx.fillStyle = '#37d5a8';
					ctx.fill();
					ctx.restore();
				};
				var drawSin1 = function(xOffset) {
					var waveWidth = 0.015; //波浪宽度,数越小越宽 
					var waveHeight = 10; //波浪高度,数越大越高
					ctx.save();
					var points = []; //用于存放绘制Sin曲线的点
					ctx.beginPath();
					//在整个轴长上取点
					for(var x = sX; x < sX + axisLength; x += 20 / axisLength) {
						//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
						var y = -Math.sin((sX + x) * waveWidth + xOffset);
						var dY = mH * (1 - nowRange / 100);
						points.push([x, dY + y * waveHeight]);
						ctx.lineTo(x, dY + y * waveHeight);
					}
					//封闭路径
					ctx.lineTo(axisLength, mH);
					ctx.lineTo(sX, mH);
					ctx.lineTo(points[0][0], points[0][1]);
					ctx.fillStyle = '#b9f0e1';
					ctx.fill();
					ctx.restore();
				};

				//写百分比文本函数
				var drawText = function() {
					ctx.save();
					
					ctx.font = 24 + 'px Microsoft Yahei';
					ctx.textAlign = 'center';
					ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
					ctx.fillText(~~nowRange + '%', r, r + 50 / 2);
					ctx.restore();
				};
				var render = function() {
					ctx.clearRect(0, 0, mW, mH);
					//rangeValue = range.value;
					rangeValue = 50;

					if(IsdrawCircled == false) {
						drawCircle();
					}

					if(nowRange <= rangeValue) {
						var tmp = 1;
						nowRange += tmp;
					}

					if(nowRange > rangeValue) {
						var tmp = 1;
						nowRange -= tmp;
					}
					drawSin1(xOffset);
					drawSin(xOffset);
					drawText();
					xOffset += speed;
					requestAnimationFrame(render);
				}

				render();
			},
			goUrl (path,id) {
				this.$router.push({ path: "Details",query:{path,id} }) 
			}
		}	
	}



		
</script>