<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" :class="studyMin==-1?'goTest':'noTest'" :disabled="studyMin==-1?false:true">
			<text v-if="studyMin==-1">去测验</text>
			<text v-else>需要学习{{studyInfo.minute?studyInfo.minute:""}}分钟可去测验({{studyTime}})</text>

		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				steps: [{
					title: '填报'
				}, {
					title: '学习'
				}, {
					title: '完成'
				}],
				stepActive: 1,
				studyInfo: {},
				studyTime: "00:00", // 学习时间
				studyMin: -1, // 倒计时
				timer: null,
			}
		},
		onLoad(options) {
			let that = this
			this.type = options.type
			this.getStudy()
			if (this.timer) {
				clearInterval(this.timer)
			} else {
				this.timer = setInterval(function() {
					that.loadTime()
				}, 1000)
			}

		},
		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
						that.studyMin = res.minute * 60
						// that.studyMin = .1 * 60
					},
					utilFail: function(res) {}
				})
			},
			loadTime() {
				if (this.studyMin >= 0) {
					let minutes = Math.floor(this.studyMin / 60);
					let seconds = Math.floor(this.studyMin % 60);
					minutes = minutes < 10 ? "0" + minutes : minutes
					seconds = seconds < 10 ? "0" + seconds : seconds
					this.studyTime = minutes + ":" + seconds
						--this.studyMin;
				} else {
					clearInterval(this.timer);
				}
			},
			goTest() {
				uni.navigateTo({
					url: '/pages/visit/testStudy?type=' + this.type
				})
			}

		}
	}
</script>

<style scoped>
	.containers {
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 60rpx;
		position: relative;
	}

	.containers>button {
		position: absolute;
		bottom: 60rpx;
		margin: 20rpx;
		width: 90%;
	}

	.steps {
		margin-bottom: 40rpx
	}

	.goTest {
		background-color: #044ed7;
		color: #fff;
	}

	.noTest {
		background-color: #ddd;
		color: #000
	}

	.service-show {
		width: 100%;
		height: 360rpx;

		position: relative;
	}
</style>
