<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">学习园地</block>
		</cu-custom>
		<scroll-view @scrolltolower="scrolltolower"  scroll-y="true"  :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
			
			<view class="sbanner">
				<view class="simgs">
					<image src="../../../static/study-banner.png" mode=""></image>
				</view>
			</view>
			<view class="study-apps">
				<view class="study-apps-item" @click="$noMultipleClicks(goMyTask)">
					<image src="../../../static/study-app01.png" mode=""></image>
				</view>
				<view class="study-apps-item" @click="$noMultipleClicks(goCourseware)">
					<image src="../../../static/study-app02.png" mode=""></image>
				</view>
			</view>
			<view v-if="list.length>0" >
				<view class="pdf_list">
					<view v-for="(item,index) of list" :key="index" :data-id="item.STUDYSECTION_ID"   class="pdf_list-item">
						<view class="pdf_list-img">
							<image :src="baseImgPath+item.COVERPATH" mode=""></image>
						</view>
						<view class="pdf_list-right">
							<view class="slist-title">
								{{item.TITLE}}
							</view>
							<view class="pdf_list-p">
								{{item.CONTENT.length>30?item.CONTENT.substring(0,30):item.CONTENT}}
							</view>
						</view>
						<view class="pdf_list-view"  @click="$noMultipleClicks(showFile,item)">
							预览
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="dataFlag=='noData'" class="dy-null">
				<view class="dy-null-img">
					<image :src="background[dataFlag].url" mode=""></image>
				</view>
				<view class="dy-null-title">
					{{background[dataFlag].msg}}
				</view>
			</view>
			
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		
		<video v-show="showVideo" id="video"  :src='videoUrl' @fullscreenchange = 'fullscreenchange'></video>
		<!-- <scroll-view scroll-y>
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<block v-if="TabCur==0">
				<view class="padding bg-white">
					<view class='cu-tag radius bg-blue'>技能培训</view>
					<view class='cu-tag radius'>创业培训</view>
				</view>
				<view class="slist">
					<view class="slist-item">
						<view class="slist-img">
							<image src="../../../static/1.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								职业通识公开课
							</view>
							<view class="slist-p">
								本课程从历史文化传统、公共道
								德、法律、工匠精神等方面,帮...
							</view>
						</view>
					</view>
					<view class="slist-item">
						<view class="slist-img">
							<image src="../../../static/2.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								茶艺师
							</view>
							<view class="slist-p">
								茶艺师是茶叶行业中具有茶叶专
								业知识和茶艺表演,服务,管...
							</view>
						</view>
					</view>
					<view class="slist-item">
						<view class="slist-img">
							<image src="../../../static/3.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								养老护理员
							</view>
							<view class="slist-p">
								我国处在老年人口增多,而养老
								护理的专业人士大大缺少。年...
							</view>
						</view>
					</view>
					<view class="slist-item">
						<view class="slist-img">
							<image src="../../../static/4.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								美容师
							</view>
							<view class="slist-p">
								根据人力资源社会保障部规定
								美容师资格证书作为第一批次...
							</view>
						</view>
					</view>
					<view class="slist-item">
						<view class="slist-img">
							<image src="../../../static/5.png" mode=""></image>
						</view>
						<view class="slist-right">
							<view class="slist-title">
								直播销售员
							</view>
							<view class="slist-p">
								电商直播已经成为当下新行业
								新产业的主流业态,是各行各..
							</view>
						</view>
					</view>
				</view>
			</block>

			<view class="cu-tabbar-height"></view>
		</scroll-view> -->
	</view>
</template>

<script>
	import {
		basePath,
		corpinfoId,
		loginUser,
		loginSession,
		baseImgPath
	} from '@/common/tool.js';
	export default {
		data() {
			return {
				backUrl: '/pages/index/index',
				dataFlag:'noData',
				noClick: true,
				listVal: [],
				videoPlaying:false,
				baseImgPath:baseImgPath,
				sTop:0,
				TabCur: 0,
				scrollLeft: 0,
				totalHeight:0,
				list:[],//返回数据
				page:1,//分页参数--页数
				rows:10,//分页参数--每页数据条数
				totalCount:0,//分页参数--初始化页数
				isEnd:false,//防止多次刷新
				totalPage:0,//分页参数--分页数量
				showVideo:false,
				videoUrl:'',
				VideoContext:'',
				tabList : [
					{
						name:'职业技能'
					},
					{
						name:'安全生产'
					},
					{
						name:'工伤预防'
					},
				]
			}
		},
		mounted(){
			// let that=this;
			// let CustomBar = this.CustomBar;
			// uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			// 	success(res) { //成功回调函数
			// 		let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
			// 		titleH.boundingClientRect(data=>{
			// 			that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
			// 			that.totalHeight = data.height+CustomBar
			// 		}).exec()
			// 	}
			// })
			this.VideoContext = uni.createVideoContext('video')
		},
		onShow(){
			
			var _this = this;
			_this.background = require('@/common/background.json');
			_this.showCount = -1;
			_this.currentPage = 1;
			_this.list = [];
			_this.isEnd = false;
			_this.getData();
			// _this.getDept();
			loginSession();
		},
		onLoad() {
			// this.getData();
			// loginSession();
		},
		methods: {
			//跳转事件
			goToEdit(e) {
				uni.navigateTo({
					url: '/pages/application/basic-info-manage/basic-information/basic-information-edit'
				});
			},
			getData() {
				// var _this = this;
				// uni.showLoading({
				// 	title: '请稍候'
				// })
				// uni.request({
				// 	url: basePath + '/app/studysection/list',
				// 	method: 'POST',
				// 	dataType: 'json',
				// 	header: {
				// 		'Content-type': 'application/x-www-form-urlencoded'
				// 	},
				// 	data: {
				// 		CORPINFO_ID: corpinfoId,
				// 	},
				// 	success: (res) => {
				// 		uni.hideLoading(); //结束加载中动画
				// 		var result = res.data.result;
				// 		if ("success" == result) {
				// 			_this.listVal = res.data.varList;
				// 		}
				// 	}
				// });
				
				
				var _this = this;
				if (_this.isEnd) {
					return
				}else{
					this.isEnd =true;
				}
				uni.showLoading({
					title:"加载中..."
				});//加载中动画
				uni.request({
					url: basePath +'/app/studysection/list?showCount='+_this.showCount+'&currentPage='+_this.currentPage ,
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						CORPINFO_ID:corpinfoId
					},
					success: (res) => {
						uni.hideLoading();//结束加载中动画
						if (res.data != null) {
							_this.totalPage = res.data.page.totalPage;
							if(_this.list.length == 0){
								_this.list = res.data.varList;
							}else{
								if(res.data.varList != null){
									_this.list2 = res.data.varList;
									_this.list = _this.list.concat(_this.list2);
								}
							}
						}
				
					}
				})
			},
			
			// 滑动到底方法
			scrolltolower(){
				console.info(666)
				var _this = this;
				_this.showCount = -1;
				_this.currentPage = _this.currentPage + 1;
				_this.isEnd = false;
				if(_this.totalPage >= _this.currentPage){
					_this.getData();//开始分页查询
				}
			},
			goStuToOpen(e) {
				var url = baseImgPath + e;
				var url2 = encodeURI(url);
				plus.runtime.openURL(url2, function(res) {});
			},
			goMyTask() {
				uni.redirectTo({
					url: '/pages/application/onlinexxks/my-tasks'
				});
			},
			goCourseware() {
				uni.redirectTo({
					url: '/pages/application/onlinexxks/courseware-list'
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			
			showFile(item){
				var isVideo = false
				if(item.FILEPATH.lastIndexOf('.mp4', item.FILEPATH.length - 1) > -1){
					isVideo = true
				}
				if(isVideo){
					this.videoUrl = baseImgPath+item.FILEPATH
					this.VideoContext.requestFullScreen()
				} else {
					uni.showLoading({
						title:"加载中..."
					});//加载中动画
					uni.downloadFile({
						url:baseImgPath+item.FILEPATH,
						success:(res)=>{
							uni.hideLoading();//结束加载中动画
							uni.openDocument({
								filePath:res.tempFilePath,
								success:function(res){
									console.info(res)
								}
							})
						}
					})
				}
				

			},
			fullscreenchange(){
				console.info(this.videoUrl)
				if(!this.videoPlaying){
					this.videoPlaying = true
					this.VideoContext.play()
				} else {
					this.videoPlaying = false
					this.VideoContext.stop()
					this.videoUrl = ''
				}
				// this.showVideo = false
			}
		}
	}
</script>

<style>
	.nav{margin-bottom: 4upx;}
	.cu-tag+.cu-tag{
		margin-left: 30upx;
	}
</style>
