<template>
	<view >
		<view class="detail_body">
			<view style="width: 100%;padding: 20rpx 0;">
				<view class="title">
					二级造价工程师2020二级造价工程师习题练习
				</view>
				<view style="width: 686rpx;height: 180rpx;display: flex;margin: 20rpx auto;">
					<view class="box1">
						<view>
							<u-row gutter="16">
								<u-col span="7">
									<view style="text-align: center;display: flex;height: 180rpx;flex-direction: column;justify-content: center;">
										 <view class="container">
										     <view class='progress_box'>
										        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
										        <canvas class="progress_canvas"   canvas-id="canvasProgress">  </canvas> 
										        <view class="progress_text">
										            <view class="u-progress-dot">68</view> 
										            <text class='u-progress-info'> %</text>
										        </view>     
										    </view>
										</view>
									</view>
								</u-col>
								<u-col span="5" >
									<view style="margin-top: 20rpx;">
										<view class="t1">总题数</view>
										<view class="t3">300</view>
										<view class="t1">已答过</view>
										<view class="t3">204</view>
									</view>
								</u-col>
							</u-row>
						</view>
						
					</view>
					<view class="box2">
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
							<view style="text-align: center;" @click="jumpQuestion">
								<view class="big_num">35</view>
								<view class="t4">
									错题集<u-icon name="arrow-right"  size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="box2">
						<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;">
							<view style="text-align: center;">
								<view class="big_num">126</view>
								<view class="t4">
									收藏集<u-icon name="arrow-right"  size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<u-row >
					<u-col span="11" >
						<view class="video_t1">
							2020年二级建造师教育选修
						</view>
					</u-col>
				</u-row>
			</view>
			<view>
				<u-tabs :list="list" font-size="24" bar-width="100" :current="current" @change="change" active-color="#32467B"></u-tabs>
			</view>
			<u-line color="#D6D6DB" />
			<view v-if="current==0">
				<!-- 题库目录-->
				<view style="margin-top: 15rpx;">
					<u-row >
						<u-col span="9" >
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								题库目录
							</view>
						</u-col>
						<u-col span="3" text-align="right">
							<view class="video_t2">
								<u-icon name="arrow-right"  size="28"></u-icon>
							</view>
						</u-col>
					</u-row>
					<view class="scroll_box">
						<scroll-view class="r_sliper" scroll-x="true" >
							<view v-for="(item,index) in list" :key="index" style="margin-right: 20rpx;display:inline-block">
								<view class="r_t2">
									二级建造师市政..
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<view v-if="current<=1">
				<!-- 题库介绍-->
				<view style="margin-top: 15rpx;">
					<u-row >
						<u-col span="9" >
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								题库介绍
							</view>
						</u-col>
					</u-row>
					<view class="text_box">
						这是一段课程介绍文本，课程介绍内容可在后台设置编辑，以富
						文本形式呈现，常见的由图片和文本组成。
					</view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 出题名师-->
			<view v-if="current<=2">
				<view style="margin: 15rpx 0;">
					<u-row >
						<u-col span="8" >
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								出题名师
							</view>
						</u-col>
					</u-row>
					<u-row >
						<view style="margin: 25rpx;display: flex;">
							<view >
								<image src="/static/avatar1.png" class="teacher_img"></image>
							</view>
							<view class="teacher_t">
								建工学院名誉院长，建造师建筑资深导师，北京工业大学教授，建造师考试大纲编委会编委。参与过国家一级注册建造师考试大纲、考试辅导书、习题集等书的编写。
							</view>
						</view>
					</u-row>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 相关推荐-->
			<view style="margin: 15rpx 0;">
				<u-row >
					<u-col span="8" >
						<view class="video_t2" style="display: flex;align-items: center;">
							<view class="top_line"></view>
							相关推荐
						</view>
					</u-col>
				</u-row>
				<view style="margin: 10rpx;">
					<view class="tj_box" v-for="(item,index) in list" :key="index">
						<image src="/static/banner.png"   style="width: 320rpx;height: 160rpx;"></image>
						<view style="font-size: 24rpx;color: #666666;d">
							2020年二级建造师继续教...
						</view>
						<view>
							<u-row >
								<u-col span="6" >
									<view style="margin-left: 20rpx;">
										<image src="/static/people.png"   style="width: 20rpx;height: 20rpx;"></image>
										<text style="color: #999999;font-size: 20rpx;margin-left: 10rpx;">2023</text>
									</view>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #E91313;font-size: 16rpx;margin-left: 8rpx;">
										活动价 
									</text>
									<text style="color: #E91313;font-size: 24rpx;font-weight: bold;">
										￥499
									</text>
								</u-col>
							</u-row>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view  class="footer_tab">
			<u-line color="#D6D6DB" />
			<view style="height: 100%;display: flex;align-items: center;position: relative;">
				<view style="text-align: center;margin-left: 30rpx;">
					<image src="/static/sc.png" class="sc"></image>
					<view class="sc_t">收藏</view>
				</view>
				
				<view class="buy" @click="jumpExam">
					模拟考试
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '题库目录'
				}, {
					name: '题库介绍'
				}, {
					name: '出题名师',
				}, {
					name: '相关推荐',
				}],
				current: 0
			}
		},
		onLoad(option) {
			this.drawProgressbg()
			this.drawCircle(1.3) // 0-2
		},
		onShow(){
		},
		methods: {
			jumpQuestion(){
				this.$navTo.togo('/pages2/bank/question', {
					type:2
				})
			},
			change(index) {
				this.current = index;
			},
			jumpExam(){
				this.$navTo.togo('/pages2/bank/question', {
					type:1
				})
			},
			drawProgressbg(){
			    // 使用 wx.createContext 获取绘图上下文 context
			    var ctx = wx.createCanvasContext('canvasProgressbg',this)
			    ctx.setLineWidth(6);// 设置圆环的宽度
			    ctx.setStrokeStyle('#ececec'); // 设置圆环的颜色
			    ctx.setLineCap('round') // 设置圆环端点的形状
			    ctx.beginPath();//开始一个新的路径
			    ctx.arc(30, 30, 25, 0, 2 * Math.PI, false);
			    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
			    ctx.stroke();//对当前路径进行描边
			    ctx.draw();
			  },
			  drawCircle(step){  
			      var context = wx.createCanvasContext('canvasProgress',this);
			        // 设置渐变
			        var gradient = context.createLinearGradient(50, 25, 25, 50);
			        gradient.addColorStop("0", "#32467B");
			        gradient.addColorStop("1.0", "#4FACFE");
			        context.setLineWidth(6);
			        context.setStrokeStyle(gradient);
			        context.setLineCap('round')
			        context.beginPath(); 
			        // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
			        context.arc(30, 30, 25, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
			        context.stroke(); 
			        context.draw() 
			    },
		
		},
		
	}
</script>
<style>
	::-webkit-scrollbar{
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
<style scope>
	.t4{
		font-size: 24rpx;
		color: #999999;
	}
	.big_num{
		font-size: 64rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #32467B;
	}
	.t1{
		font-size: 20rpx;
		color: #999999;
	}
	.t3{
		font-size: 30rpx;
		color: #32467B;
		font-weight: bold;
		
	}
	.progress_box{
	  position: relative;
	  width:121rpx;
	  height: 121rpx;  
	  display: flex;  
	  align-items: center;
	  justify-content: center;
	}
	.progress_bg{
	  position: absolute;
	    width:121rpx;
	  height: 121rpx; 
	}
	.progress_canvas{ 
	  width:121rpx;
	  height: 121rpx; 
	} 
	.progress_text{ 
	  position: absolute; 
	  display: flex;  
	  align-items: center;
	  justify-content: center
	}
	.u-progress-info{
		font-size: 18rpx;
		margin-top: 22rpx;
		color: #32467B;
	}
	.u-progress-dot{
		font-size: 40rpx;
		font-weight: bold;
		color: #32467B;
	}
	.box2{
		width: 28%;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		margin-left: 3%;
	}
	.box1{
		width: 38%;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
	}
	.title{
		height: 64rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 24rpx;
		line-height: 64rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #0C141F;
		text-align: center;
		margin: 0 auto;
		width: 686rpx;
	}
	.text_box{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		padding: 20rpx;
	}
	.price_num{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E91313;
	}
	.price_t2{
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: line-through;
		color: #999999;
	}
	.price_t1{
		font-size: 33rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E91313;
	}
	.sc_t{
		font-size: 22rpx;
		color: #000000;
	}
	.sc{
		width: 29rpx ;
		height: 29rpx;
	}
	.buy{
		width: 138rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #32467B;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		vertical-align: middle;
		position: absolute;
		right: 30rpx;
	}
	.detail_body{
		padding-bottom: 96rpx;
	}
	.footer_tab{
		position:fixed;
		bottom:0;
		height: 96rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.tj_box{
		width: 50%;
		display: inline-block;
		text-align: center;
		margin: 10rpx 0;
	}
	.teacher_t{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		margin-left: 15rpx;
	}
	.teacher_img{
		width: 87rpx;
		height: 129rpx;
	}
	.t2{
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #666666;
		line-height: 36rpx;
		margin: 15rpx;
	}
	.r_t2{
		width: 201rpx;
		height: 49rpx;
		background: rgba(22, 119, 255, 0.05);
		border: 1rpx solid #32467B;
		border-radius: 16rpx;
		color: #666666;
		font-size: 23rpx;
		text-align: center;
		display: flex;
		align-items: center;
		padding: 5rpx;
		
	}
	.scroll_box{
		width: 100%;
		height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		white-space:nowrap;
		overflow: hidden;
		margin: 15rpx 0;
	}
	.r_sliper{
		padding: 0 20rpx;
	}
	.top_line{
		width: 6rpx;
		height: 22rpx;
		background: #32467B;
		margin-right: 10rpx;
	}
	.video_t2{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.video_t1{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}


	
page {
		background: #FFFFFF;
	}
</style>
