<template>
	<view class='Rstudy' :style="{
		'padding-top':goods.PaddingTop+'px',
		'padding-right':goods.PaddingRight+'px',
		'padding-bottom':goods.PaddingBottom+'px',
		'padding-left':goods.PaddingLeft+'px',
		'bottom':posiTop+'px'
	}"
	@click="goUrl"
	 v-if="isshow==true">
		<view class='Rstudy-box' :style="{width:windowWidth+'px'}">
			<view class="close" @click.stop="isshow=false">
				<u-icon name="cross" color="#FFF" size="40"></u-icon>
			</view>
			<view class="content" :style="{width:textWidth+'px'}">
				<view class="cover">
					<image :src="Cover" style="width: 100%;height: 100%;border-radius: 5px;"></image>
				</view>
				<view class="content-r" :style="{width:(textWidth-70-30)+'px'}">
					<text class="content-Name">{{Name}}</text>
					<view class="progress-box">
						<progress :percent="progress" active stroke-width="3" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['goods'],
		data() {
			return {
				textWidth: 0,
				windowWidth: 0,
				isshow: false,
				posiTop: 0,
				laststudy: {},
				Name:'',
				Cover:'',
				progress: 0
			}
		},
		created() {
			
			this.posiTop = this.$uiConfig.is_bang ? 80 : 52;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			this.textWidth = this.windowWidth - this.goods.PaddingRight - this.goods.PaddingLeft - 30 - 20 - 10

			this.laststudy = uni.getStorageSync('laststudy');
			if (this.laststudy) {
				this.isshow = true;
				this.Name = this.laststudy.name;
				this.Cover = this.laststudy.cover_pic;
				this.progress = parseInt((this.laststudy.learned / this.laststudy.count)*100);
			}
		},
		methods:{
			goUrl(){
				var sort = this.laststudy.Sort-1;
				uni.navigateTo({
					url:'/pages/school/courseContent?id='+this.laststudy.id+'&name='+this.laststudy.name+'&cover_pic='+this.laststudy.cover_pic+'&index='+sort
				})
			},
			getData(){
				this.laststudy = uni.getStorageSync('laststudy');
				if (this.laststudy) {
					this.isshow = true;
					this.Name = this.laststudy.name;
					this.Cover = this.laststudy.cover_pic;
					this.progress = parseInt((this.laststudy.learned / this.laststudy.count)*100);
				}
			}
		}
	}
</script>

<style>
	.Rstudy {
		position: absolute;
		left: 0;
		z-index: 999;
	}

	.Rstudy-box {
		width: 100%;
		padding: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background: rgba(99, 99, 107, 0.8); */
		background: rgba(0, 0, 0, 0.6);

		border-radius: 5px;
		justify-content: space-between;

	}

	.Rstudy .close {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Rstudy .content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.Rstudy .content .cover {
		width: 70px;
		height: 45px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.Rstudy .content .content-r {
		height: 35px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		color: #FFF;
		font-family: aa;
	}

	.Rstudy .content .content-Name {
		font-size: 12px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.Rstudy .content .progress {
		font-size: 14px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
