<template>
	<view class="containers">
		<view class="steps">
			<uni-steps :options="steps" :active="stepActive" active-color="#044ed7" />
		</view>
		<view class="study">
			<view class="service-show">
				<swiper class="service-show-swiper" :indicator-dots="true">
					<swiper-item v-for="(img,index) in studyInfo.file_detail" :key="index">
						<u-image height="360rpx" width="100%" :src="img.url" mode="aspectFit"
							>
						</u-image>
					</swiper-item>
				</swiper>
			</view>
			<view>
				{{studyInfo.content?studyInfo.content:""}}
			</view>
		</view>
		<view class="asks">
			
		</view>
		
		<button @click="goTest" size="mini" type="primary"
			>去测验({{studyInfo.minute?studyInfo.minute:""}})</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:1,
				steps: [{
					title: '填报'
				}, {
					title: '学习'
				}, {
					title: '完成'
				}],
				stepActive: 1,
				studyInfo:{},
				studyTime:""
			}
		},
		onLoad(options) {
			this.type = options.type
			this.getStudy()
		},
		methods:{
			async getStudy(){
				let that = this
				this.util.request({
					api: '/api/mobile/visit/get-ask',
					data:{
						type:that.type
					},
					utilSuccess: function(res) {
						that.studyInfo = res
					},
					utilFail: function(res) {}
				})
			},
			loadTime(min){
				let time = min*60*1000
			},
			goTest(){
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.containers {
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 60rpx;
	}
	
	.steps {
		margin-bottom: 40rpx
	}
	.service-show {
		width: 100%;
		height: 360rpx;
	
		position: relative;
	
		&>video {
			width: 100%;
			height: 100%;
		}
	
		&-swiper {
			width: 100%;
			height: 100%;
		}
	
		&-btn {
			display: flex;
	
			z-index: 3;
			position: absolute;
			bottom: 30rpx;
			right: 33rpx;
	
			&-img {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;
	
				margin-right: 14rpx;
	
				&>image {
					width: 24rpx;
					height: 21rpx;
	
					padding-left: 20rpx;
					padding-right: 10rpx;
				}
	
				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;
	
					padding-right: 20rpx;
				}
			}
	
			&-video {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;
	
				&>image {
					width: 24rpx;
					height: 21rpx;
	
					padding-left: 20rpx;
					padding-right: 10rpx;
				}
	
				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;
	
					padding-right: 20rpx;
				}
			}
		}
	}

</style>